Question

Angular 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作为材质模块的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＆amp; 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 { }

Answer 3

错误原因

当您必须导入模块但导入错误的模块或名称不正确时，会发生此类错误。在大多数情况下，您在导入组件时必须导入模块

解决方案

检查您的导入语句，看看您是否导入了正确的模块。组件是模块的一部分，这就是为什么您不导入组件而导入模块的原因，通常，模块名称的末尾带有 Module 。像MatProgressSpinnerModule

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

3 个答案:

实施例

错误原因

解决方案