Угловой материал @NgModule аннотация?

Question

Как я могу использовать компоненты угловых материалов в разных компонентах?Я смотрел и читал некоторые уроки, но они не решили мою проблему.Я до сих пор не могу их использовать.Вот ошибка:

compiler.js:2430 Uncaught Error: Unexpected directive 'MatToolbar' imported by the module 'MaterialModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:2430)
    at compiler.js:18645
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18555)
    at compiler.js:18642
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)

Я создал файл TypeScript, который импортирует мне все необходимые мне Материальные компоненты.

material.ts:

import { MatButtonModule, MatCheckboxModule, MatToolbar, MatToolbarRow,  } from '@angular/material';
import { NgModule } from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';

@NgModule({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    MatToolbar,
    MatToolbarRow,
    MatToolbarModule
  ],
  exports: [
    MatButtonModule,
    MatCheckboxModule,
    MatToolbar,
    MatToolbarRow,
    MatToolbarModule
  ]
})

export class MaterialModule { }

app.module.ts:

import { MaterialModule } from './material';
import { CvServiceService } from './service/cv-service.service';
import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SkillsComponent } from './skills/skills.component';
import { MenubarComponent } from './menubar/menubar.component';

@NgModule({
  declarations: [
    AppComponent,
    SkillsComponent,
    MenubarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFirestoreModule,
    AngularFireModule.initializeApp(environment.firebase, 'angularfs'),
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [CvServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Как использовать AngularMaterial-Componets?

Answer 1

Вам нужно импортировать MatToolbarModule, а не MatToolbar.

@NgModule({
  imports: [
    MatButtonModule,
    MatCheckboxModule,
    MatToolbarModule
  ],
  exports: [
    MatButtonModule,
    MatCheckboxModule,
    MatToolbarModule
  ]
})
export class MaterialModule { }

Answer 2

Вы получаете ошибку, потому что импортируете немодульный:

imports: [
    MatButtonModule,
    MatCheckboxModule,
    // MatToolbar,       // remove these
    // MatToolbarRow,    // two lines
    MatToolbarModule
  ],

Вы можете импортировать только классы, украшенные @NgModule, обычно все они имеют суффикс «Модуль».