Как я могу использовать компоненты Angular-Material в разных компонентах? Я смотрел и читал несколько руководств, но они не решили мою проблему. Я до сих пор не могу их использовать. Вот ошибка:
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, который импортирует мне все компоненты материалов, которые я хочу.
материал.тс :
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 { }
приложение.модуль.тс :
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?
Неа. Я создал его, как этот учебник





Вам нужно импортировать MatToolbarModule, а не MatToolbar.
@NgModule({
imports: [
MatButtonModule,
MatCheckboxModule,
MatToolbarModule
],
exports: [
MatButtonModule,
MatCheckboxModule,
MatToolbarModule
]
})
export class MaterialModule { }
Итак, когда я хочу импортировать компонент, я должен импортировать его модуль?
Да, как указано в документах import {MatToolbarModule} from '@angular/material/toolbar';material.angular.io/components/toolbar/api
Вы получаете сообщение об ошибке, потому что вы импортируете немодуль:
imports: [
MatButtonModule,
MatCheckboxModule,
// MatToolbar, // remove these
// MatToolbarRow, // two lines
MatToolbarModule
],
Вы можете импортировать только классы, украшенные @NgModule, обычно все они имеют суффикс «Module».
когда вы создали свой material.ts, вы создали его как модуль?