在核心模块中导入时,BrowserAnimationsModule不起作用

Question

我将更大的应用程序划分为模块(功能模块,核心模块和共享模块).我正在使用Angular Material,因此我导入了BrowserAnimationsModule.我把它放在共享模块中,一切正常,但是当我想延迟加载一些功能模块时出现问题 - 然后我有关于双重导入BrowserModules的错误.我知道BrowserAnimationsModule应该由Core Module导入,但是当我尝试这样做时,我会收到以下错误:

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

下面我将介绍模块: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 { }

在MaterialModule中,我已将所有材质模块与CommonModule一起导入.

Answer 1

如果您遇到类似的错误

无法绑定到'ngForOf',因为它不是已知属性

那么你应该意识到它:

• 与未申报有关@Input;

• 或者你有一些@NgModule配置问题

由于ngForOf是一个内置指令,让我们分析一下你的@NgModule配置有什么问题.

首先,我们需要确定此错误的来源.从错误消息中很容易看出:

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

应该很明显,我们收到的错误ChargesComponent是其中的一部分ChargesModule.我相信ChargesModule声明看起来像:

charges.module.ts

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

现在,如果您还没有阅读我之前的答案Angular 2使用其他模块中的组件,我强烈建议您这样做.确保您了解如何在其他模块中使用一个组件/指令/管道.如果然后只是出口CommonModule的SharedModule,如果你还有疑问,请继续阅读...

这里的主要规则是

由于我们需要在ChargesComponent模板中使用ngForOf指令,这是ChargesModule的一部分,因此该指令应该是传递ChargesModule中指令的一部分.

这些指令是如何收集的？

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

乍一看,我们会ngForOf在ChargesModule声明数组中声明指令,但是ngForOf已经声明了CommonModule,因为指令必须只是我们无法做到的一个模块的一部分.

因此继续查看ngForOf导入的指令@NgModules.好吧,我们导入了SharedModule让我们看看它导出的指令:

shared.module.ts

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

SharedModule 导出所有指令

从...出口 @NgModules

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

这意味着如果NgbModule已导出指令,那么它们将被添加到SharedModule的导出指令中.

或只是exports数组中包含的指令

 CurrenciesComponent,
 DropDownListComponent,
 DictionariesComponent

我们在这里看不到,CommonModule我们可以假设我们会得到错误Can't bind to 'ngForOf'

要解决它,我们必须添加CommonModule到exports数组,所有应该按预期工作.

好问题是

但是,我不明白为什么只有在将BrowserAnimationsModule从Shared模块移动到Core模块后才会出现此问题.你能解释一下吗？

如果不了解BrowserAnimationsModule外观,很难理解.让我们通过查看源代码来实现启发:

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

并查看BrowserModule:

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

很明显,如果我们BrowserAnimationsModule从SharedModule我们导出模块,我们也从以下导出指令CommonModule:

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

因此,在转移BrowserAnimationModule到CoreModule您的SharedModule不再导出ngForOf指令后,这就是您收到错误的原因.