When restructuring a larger app, I divided it into modules such as feature modules, core module, and shared module. Utilizing Angular Material required me to import BrowserAnimationsModule, which I initially placed in the Shared Module. Everything functioned correctly until I attempted to lazy load certain feature modules - this triggered an error regarding double importing of BrowserModules. It became apparent that BrowserAnimationsModule should be imported by the Core Module, but when I made this adjustment, a new error emerged:
Uncaught Error: Template parse errors:
Can't bind to 'ngForOf' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("' | translate}}" (change)="change()" [(ngModel)]="actualFilter" name="food">
<mat-option [ERROR ->]*ngFor="let filterColumn of displayedColumns" [value]="filterColumn">
{{filterColumn | t"): ng:///ChargesModule/ChargesComponent.html@9:22
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("COLUMNFILTER' | translate}}" (change)="change()" [(ngModel)]="actualFilter" name="food">
[ERROR ->]<mat-option *ngFor="let filterColumn of displayedColumns" [value]="filterColumn">
{{filt"): ng:///ChargesModule/ChargesComponent.html@9:10
The module setup is as follows: app.module.ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HomeModule,
ChargesModule,
ModeratorPanelModule,
CoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
core.module.ts:
@NgModule({
imports: [
HttpModule,
HttpClientModule,
AppRoutingModule,
SharedModule,
BrowserAnimationsModule
],
declarations: [
SidenavComponent,
HeaderComponent,
ErrorPageComponent,
PageNotFoundComponent,
LoginComponent,
UpdatePanelComponent,
DialogConfirmCancelComponent,
ConfirmMessageComponent,
],
exports: [
HttpModule,
HttpClientModule,
SharedModule,
HeaderComponent,
SidenavComponent,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [
AuthService, AuthGuard, HttpAuthService, DictionariesService,
DictionaryItemFactory, CanDeactivateGuard, { provide: MatPaginatorIntl, useClass: CustomPaginator }
],
entryComponents: [DialogConfirmCancelComponent, ConfirmMessageComponent]
})
export class CoreModule { }
shared.module.ts:
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule,
CdkTableModule,
FormsModule,
NgbModule.forRoot(),
TimepickerModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
exports: [
NgbModule,
TimepickerModule,
TranslateModule,
CurrenciesComponent,
MaterialModule,
FlexLayoutModule,
CdkTableModule,
FormsModule,
DropDownListComponent,
DictionariesComponent
],
declarations: [
DictionariesComponent,
DropDownListComponent
],
providers: []
})
export class SharedModule { }
Within the MaterialModule, I included all material modules along with CommonModule.