コアモジュールにインポートしたときにBrowserAnimationsModuleが動作しない

Question

大きなアプリをモジュール（機能モジュール、コアモジュール、共有モジュール）に分割しました。私は角度材料を使用しているので、BrowserAnimationsModuleを輸入しました。私は共有モジュールに配置し、すべて正常に動作しますが、いくつかの機能モジュールを怠惰にロードしたいときに問題が発生します。次に、BrowserModulesの二重インポートに関するエラーが発生します。私はBrowserAnimationsModuleはコアモジュールによってインポートする必要があることを知っているが、私はそれを実行しようとしていたとき、私はエラーを以下の取得： app.module.ts：

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

    export class AppModule { } 

を

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 

私はモジュールを提示しています下

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

あなたは

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

のようなエラーに出くわした場合、あなたはそれのいずれかのことを知っておく必要があります。

• が宣言されていない@Inputに関係しています。

• またはngForOfは内蔵のディレクティブのは、あなたの@NgModule設定に問題何分析できているので、あなたは@NgModule設定

といくつかの問題を抱えています。

まず、このエラーの原因を特定する必要があります。これは、エラーメッセージから参照するのは簡単です：

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

我々がChargesModuleの一部であるChargesComponentのエラーを取得していることは明らかです。あなたは私の前の回答Angular 2 Use component from another moduleを読んでいない場合、私は強く、あなたがそれを行うことをお勧め

charges.module.ts

今

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

：私はChargesModule宣言がどのように見えると信じています。 1つのコンポーネント/指令/パイプを他のモジュールでどのように使用できるかを理解してください。あなたは、単にあなたが疑問残っているならば、ここでの主なルールは

我々はChargesComponentテンプレート内ngForOfディレクティブを使用する必要があるので、それが一部である...上

を読んで、SharedModuleからCommonModuleをエクスポートしない場合ChargesModuleのディレクティブの一部である必要があります。

これらの指令はどのように収集されますか？一見

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

我々はChargesModule宣言配列にngForOfディレクティブを宣言したがngForOfうすでにCommonModuleで宣言され、指示通り、我々はそれを行うことができないだけで一つのモジュールの一部である必要があります。

したがって、@NgModulesの間でのディレクティブを探し続けます。

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 

からエクスポートされたいずれかの

ているすべてのディレクティブをエクスポート：まあ、我々はのは、それがエクスポートディレクティブかを確認してみましょうSharedModuleをインポート

これは、NgbModule haエクスポートされたディレクティブは、SharedModuleのエクスポートされたディレクティブに追加されます。

またはちょうどディレクティブは、私たちがここにCommonModuleが表示されていないとして、我々は、我々は輸出にCommonModuleを追加する必要があり、それを解決するために、エラーCan't bind to 'ngForOf'

を取得すると仮定することができますexports配列

CurrenciesComponent, 
DropDownListComponent, 
DictionariesComponent 

に含ま配列はすべて期待どおりに動作するはずです。

良い質問は、それはBrowserAnimationsModuleがどのように見えるかを知らなくても理解するのは難しい

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

です。さんは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を0に移動した後SharedModuleは、ngForOfディレクティブをエクスポートしないため、エラーが発生します。