I've been struggling with using Angular-Material Components in different components. Despite watching and reading various tutorials, I still can't seem to get them to work. The error message I keep encountering is:
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)
...
In an attempt to resolve this issue, I created a TypeScript file named material.ts which imports all the Material-Components that I need.
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 { }
In my app.module.ts, I import the MaterialModule along with other necessary modules:
import { MaterialModule } from './material';
import { CvServiceService } from './service/cv-service.service';
...
Despite including the MaterialModule in my AppModule, I’m still facing difficulties with utilizing Angular-Material Components effectively. Any guidance on how to properly use these components would be greatly appreciated.