由模块'AppModule'导入的意外指令'MatSpinner'。请添加@NgModule注释

Question

角5 -

这是npm模块（package.json） -

   "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"

我使用Angular材质Spinner作为Material模块的MatSpinner指令

import { MatSpinner } from "@angular/material";
@NgModule({
imports: [

MatSpinner
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

这是HTML：

<mat-spinner></mat-spinner>

我得到一个错误 -

由模块'AppModule'导入的意外指令'MatSpinner'。请添加@NgModule注释。

Answer 1

在你的app-module中，你通常会导入MatProgressSpinnerModule，而不是MatSpinner。 MatSpinner将导入您的组件中。

Answer 2

MatSpinner和MatProgressSpinner是组件，已经是MatProgressSpinnerModule的一部分。

在Angular，

• 在@NgModule的导入中无法添加组件
• 组件不能是多个@NgModule的声明的一部分

由于这两个组件都在MatProgressSpinnerModule中可用，因此您应该在@NgModule的导入中添加MatProgressSpinnerModule。

例

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@NgModule({
  imports: [
    MatProgressSpinnerModule
  ],
  declarations: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }