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

Question

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

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

下面我介绍模块:应用程序模块.ts:

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        HomeModule,
        ChargesModule,
        ModeratorPanelModule,
        CoreModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

    export class AppModule { }

核心模块.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 { }

共享模块.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 中，我已经将所有 Material 模块与 CommonModule 一起导入。

Answer 1

如果你遇到类似这样的错误

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

那么你应该意识到它:

• 与未声明的@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 Use component from another module我强烈建议你这样做。确保您了解如何在其他模块中使用一个组件/指令/管道。如果您这样做了，那么只需从 SharedModule 导出 CommonModule，如果您仍然有疑问，请继续阅读...

这里的主要规则是

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

这些指令是如何收集的？

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

乍一看，我们会在 ChargesModule 声明数组中声明 ngForOf 指令，但 ngForOf 已经在 CommonModule 中声明由于指令只能是一个模块的一部分，我们不能那样做。

因此继续在导入的@NgModules 中寻找ngForOf 指令。好吧，我们导入了 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 数组中，所有这些都应该按预期工作。

好问题是

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

如果不知道 BrowserAnimationsModule 长什么样，就很难理解。让我们通过查看source code来获得启迪:

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

并查看BrowserModule :

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

很明显，如果我们从 SharedModule 中导出 BrowserAnimationsModule 模块，我们也会从 CommonModule 中导出指令，因为:

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

因此，在将 BrowserAnimationModule 移动到 CoreModule 之后，您的 SharedModule 不再导出 ngForOf 指令，这就是您的原因出现错误。