angular - tutorial - error: mat-form-field must contain a matformfieldcontrol.

Directiva inesperada ''MatSpinner'' importada por el módulo ''AppModule''. Por favor agregue una anotación de @NgModule

Question

Angular 5 -

Aquí están los módulos 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"

Estoy utilizando Spinner de material angular como directiva MatSpinner del módulo Material

import { MatSpinner } from "@angular/material";
@NgModule({
imports: [
MatSpinner
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Aquí está el HTML:

<mat-spinner></mat-spinner>

Estoy recibiendo un error-

Directiva inesperada ''MatSpinner'' importada por el módulo ''AppModule''. Por favor agregue una anotación @NgModule.

Answer 1

En su módulo de aplicación, generalmente importaría MatProgressSpinnerModule, no MatSpinner. MatSpinner sería importado en su componente.

Answer 2

MatSpinner y MatProgressSpinner son componentes y ya forman parte de MatProgressSpinnerModule .

En angular,

• No se puede agregar un componente a las importaciones de @NgModule
• Un componente no puede ser parte de declaraciones de más de un @NgModule

Como ambos componentes están disponibles en MatProgressSpinnerModule , debe agregar MatProgressSpinnerModule en las importaciones de su @NgModule .

Ejemplo

import { MatProgressSpinnerModule } from ''@angular/material/progress-spinner'';
@NgModule({
imports: [
MatProgressSpinnerModule
],
declarations: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }