Importing BrowserAnimationsModule in the core module may lead to dysfunctional behavior

Question

Importing BrowserAnimationsModule in the core module may lead to dysfunctional behavior

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.

angular typescript module lazy-loading

Answer 1

Answer №1

If you encountered an issue similar to

Can't bind to 'ngForOf' since it isn't a known property

then it may be due to:

an undeclared @Input;
a configuration problem with @NgModule

Given that ngForOf is a predefined directive, let's delve into the issue related to your @NgModule setup.

Firstly, we must identify the source of this error. The error message provides a clue:

{{filterColumn | t"): ng:///ChargesModule/ChargesComponent.html@9:22

From this, it's evident that the error stems from the ChargesComponent within the ChargesModule. It is likely that the declaration in the ChargesModule resembles:

charges.module.ts

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [
    ChargesComponent,
    ...
  ]
})
export class ChargesModule {}

If you haven't already, I recommend reading my previous answer on Angular 2 Use component from another module for further clarity on utilizing components across modules. Ensure you grasp how components/directives/pipes can be employed in other modules. If unsure, read on...

The key guideline here is

Since we need to utilize the ngForOf directive within the template of the ChargesComponent, which belongs to ChargesModule, the directive should be included in the transitive directives of ChargesModule.

How are these directives gathered?

               ChargesModule.directives 
                         + 
      exported directives from imported @NgModules
                        ||
         ChargesModule.transitiveModule.directives

Initially, one might consider declaring the ngForOf directive in the declarations array of ChargesModule, but as ngForOf is already declared in CommonModule and a directive can only belong to one module, this approach won't suffice.

Hence, continue searching for ngForOf directives among the imported @NgModules. As we imported SharedModule, let's explore the directives it exports:

shared.module.ts

@NgModule({
  ...,
  exports: [
    NgbModule,
    TimepickerModule,
    TranslateModule,
    CurrenciesComponent,
    MaterialModule,
    FlexLayoutModule,
    CdkTableModule,
    FormsModule,
    DropDownListComponent,
    DictionariesComponent
  ]
})
export class SharedModule { }

SharedModule exports all directives that are either

exported from @NgModules

 NgbModule,
 TimepickerModule,
 TranslateModule,
 MaterialModule,
 FlexLayoutModule,
 CdkTableModule,
 FormsModule

This implies that if NgbModule has exported directives, they will be included in the exported directives of SharedModule.

or simply directives listed in the exports array

 CurrenciesComponent,
 DropDownListComponent,
 DictionariesComponent

As CommonModule is not listed here, it indicates that we may encounter the error 'Can't bind to 'ngForOf''

To resolve this, we must add CommonModule to the exports array, after which everything should function properly.

An intriguing question arises

However, I do not understand why this problem occurred only after moving BrowserAnimationsModule from Shared to Core module. Can you explain that?

Understanding this requires insight into the composition of BrowserAnimationsModule. Let's shed light on this by examining the source code:

@NgModule({
  exports: [BrowserModule],
  providers: BROWSER_ANIMATIONS_PROVIDERS,
})
export class BrowserAnimationsModule {
}

and inspecting BrowserModule:

@NgModule({
  ...
  exports: [CommonModule, ApplicationModule]
})
export class BrowserModule {

It becomes apparent that exporting BrowserAnimationsModule module from SharedModule also exports directives from CommonModule because:

SharedModule.transitiveModule.directives
               /\
               ||
   BrowserAnimationsModule exports 
               /\
               ||
     BrowserModule that exports
               /\
               ||   
          CommonModule

Thus, upon relocating BrowserAnimationsModule to CoreModule, SharedModule no longer exports the ngForOf directive, resulting in the error you observed.

Answer 2

If you encountered an issue similar to

Can't bind to 'ngForOf' since it isn't a known property

then it may be due to:

an undeclared @Input;
a configuration problem with @NgModule

Given that ngForOf is a predefined directive, let's delve into the issue related to your @NgModule setup.

Firstly, we must identify the source of this error. The error message provides a clue:

{{filterColumn | t"): ng:///ChargesModule/ChargesComponent.html@9:22

From this, it's evident that the error stems from the ChargesComponent within the ChargesModule. It is likely that the declaration in the ChargesModule resembles:

charges.module.ts

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [
    ChargesComponent,
    ...
  ]
})
export class ChargesModule {}

If you haven't already, I recommend reading my previous answer on Angular 2 Use component from another module for further clarity on utilizing components across modules. Ensure you grasp how components/directives/pipes can be employed in other modules. If unsure, read on...

The key guideline here is

Since we need to utilize the ngForOf directive within the template of the ChargesComponent, which belongs to ChargesModule, the directive should be included in the transitive directives of ChargesModule.

How are these directives gathered?

               ChargesModule.directives 
                         + 
      exported directives from imported @NgModules
                        ||
         ChargesModule.transitiveModule.directives

Initially, one might consider declaring the ngForOf directive in the declarations array of ChargesModule, but as ngForOf is already declared in CommonModule and a directive can only belong to one module, this approach won't suffice.

Hence, continue searching for ngForOf directives among the imported @NgModules. As we imported SharedModule, let's explore the directives it exports:

shared.module.ts

@NgModule({
  ...,
  exports: [
    NgbModule,
    TimepickerModule,
    TranslateModule,
    CurrenciesComponent,
    MaterialModule,
    FlexLayoutModule,
    CdkTableModule,
    FormsModule,
    DropDownListComponent,
    DictionariesComponent
  ]
})
export class SharedModule { }

SharedModule exports all directives that are either

exported from @NgModules

 NgbModule,
 TimepickerModule,
 TranslateModule,
 MaterialModule,
 FlexLayoutModule,
 CdkTableModule,
 FormsModule

This implies that if NgbModule has exported directives, they will be included in the exported directives of SharedModule.

or simply directives listed in the exports array

 CurrenciesComponent,
 DropDownListComponent,
 DictionariesComponent

As CommonModule is not listed here, it indicates that we may encounter the error 'Can't bind to 'ngForOf''

To resolve this, we must add CommonModule to the exports array, after which everything should function properly.

An intriguing question arises

However, I do not understand why this problem occurred only after moving BrowserAnimationsModule from Shared to Core module. Can you explain that?

Understanding this requires insight into the composition of BrowserAnimationsModule. Let's shed light on this by examining the source code:

@NgModule({
  exports: [BrowserModule],
  providers: BROWSER_ANIMATIONS_PROVIDERS,
})
export class BrowserAnimationsModule {
}

and inspecting BrowserModule:

@NgModule({
  ...
  exports: [CommonModule, ApplicationModule]
})
export class BrowserModule {

It becomes apparent that exporting BrowserAnimationsModule module from SharedModule also exports directives from CommonModule because:

SharedModule.transitiveModule.directives
               /\
               ||
   BrowserAnimationsModule exports 
               /\
               ||
     BrowserModule that exports
               /\
               ||   
          CommonModule

Thus, upon relocating BrowserAnimationsModule to CoreModule, SharedModule no longer exports the ngForOf directive, resulting in the error you observed.

Importing BrowserAnimationsModule in the core module may lead to dysfunctional behavior

Answer №1

Similar questions

Creating a mongoDB query that matches elements in an array of subdocuments with elements in a Typescript Array

What kind of Input field is being provided as an argument to a TypeScript function?

Angular Chart.js is throwing an error: "Uncaught SyntaxError: Cannot use import statement outside a module"

Executing the Onclick event within a primeNG menu bar

Find all Mondays occurring within a specified date range using Moment.js

Tips for exporting an array of dynamic JSON objects to CSV using Angular

Utilizing getter and setter functions within a setter with a type guard

Ensuring type safety for a generic union type

Challenge encountered while populating dropdown in Angular reactive form

Is it time to end my MediaObserver subscription in flex-layout for Angular?

Troubleshooting issue with image dimensions in Angular within CKEditor content

Leveraging jQuery within a webpack module shared across multiple components, located outside the webpack root directory

What is preventing me from adding members to an imported declaration?

Displaying server errors in an Angular componentIn this tutorial, we

Limit the selected values to calculate a partial sum

Leveraging the import statement within lib.d.ts to enhance Intellisense functionality in Visual Studio Code

Various modules in the project need to have distinct GitHub origins, particularly in the case of Spring-Angular

How come my ts-mockito spy isn't delegating method calls properly?

Why does the playwright's onEnd() results not include the duration as specified in the documentation? What am I overlooking?

A guide on passing variables to the MUI styled function within ReactJS