I divided bigger app into modules (feature modules, core module and shared module). I am using Angular Material and therefore I imported BrowserAnimationsModule
. I placed it in Shared Module and everything works fine, but the problem is arising when I want to lazy load some feature modules - then I have error about double import of BrowserModules. I know that BrowserAnimationsModule should be imported by Core Module, but when I am trying to do that, I get following error:
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
Below I am presenting the modules: 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 { }
In MaterialModule, I have imported all material modules together with CommonModule.