web-dev-qa-db-ja.com

'AppModule'のテンプレートコンパイル中にエラーが発生しました

Angular 6アプリをビルドしようとしています。--prodを使用すると次のエラーが発生します

ERROR in Error during template compile of 'AppModule'
  Expression form not supported in 'reducers'
    'reducers' contains the error at app/app.module.ts(48,3).

app.module.ts

  import AuthEffects from './store/auth/auth.effects';
    import ContentEffects from './store/content/content.effects';
    import NavigationEffects from './store/navigation/navigation.effects';
    import ConfigEffects from './store/config/config.effects';

    import { ICommonAppState } from './app.state';
    import { reducer as authReducer, key as authKey } from './store/auth';
    import { reducer as configReducer, key as configKey } from './store/config';
    import { reducer as contentReducer, key as contentKey } from './store/content';
    import { reducer as navigationReducer, key as navigationKey } from './store/navigation';

    import { PageContainerComponent } from './page-container/page-container.component';
    import { BenefitsComponent } from './+benefits/benefits.component';
    import { NavigationComponent } from './navigation/navigation.component';

    const enhancers = [];
    if (!environment.production) {
      enhancers.Push(StoreDevtoolsModule.instrument({ maxAge: 10 }));
    }

    export const reducers: ActionReducerMap<ICommonAppState> = {
      [authKey]: authReducer,
      [configKey]: configReducer,
      [navigationKey]: navigationReducer,
      [contentKey]: contentReducer,
    };

    const effects = [AuthEffects, ConfigEffects, NavigationEffects, ContentEffects];

    @NgModule({
      declarations: [AppComponent, NavigationComponent, PageContainerComponent, BenefitsComponent],
      imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,
        SharedComponentsModule,
        StoreModule.forRoot(reducers),
        EffectsModule.forRoot(effects),
        ...enhancers,
      ],
      providers: [
        { provide: APP_BASE_HREF, useValue: '/content-manager/' },
        { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
        DiscoveryService,
        AuthService,
        JWTService,
        ConfigService,
        ContentService,
        NavigationService,
        TenantGuard,
        AuthGuard,
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

エラーが報告されている48行目は、

export const reducers: ActionReducerMap<ICommonAppState> = {
  [authKey]: authReducer,
  [configKey]: configReducer,
  [navigationKey]: navigationReducer,
  [contentKey]: contentReducer,
};

Angular 6 with NgRX 6を使用しています。これが機能しない理由がわかりません。ドキュメントに従っていますが、prodを使用しない場合、アプリケーションは問題なくビルドされます。フラグ。ただし、ビルドは肥大化して遅くなりますが、AOTビルドをお勧めします。

angularngrxangular2-aot
7
Harry Blue

同じ問題がありました...インジェクショントークンを使用してActionReducerMapを提供してみてください。

export const reducers: ActionReducerMap<ICommonAppState> = {
    [authKey]: authReducer,
    [configKey]: configReducer,
    [navigationKey]: navigationReducer,
    [contentKey]: contentReducer,
};
export const REDUCERS_TOKEN = new InjectionToken<ActionReducerMap<ICommonAppState>>('App Reducers');
export const reducerProvider = { provide: REDUCERS_TOKEN, useValue: reducers };

そして、このように使用します

  imports: [
      ...
      StoreModule.forRoot(REDUCERS_TOKEN, { metaReducers }),
      ...
  ],
  providers: [reducerProvider]

そして、AOTコンパイラーは、コードを静的に（実行せずに）分析できるようになるはずです。

8
dav1d

私も同じエラーに直面しました、そして私の場合、それは私のモジュールのタイプミスでした。モジュールのプロバイダーの配列に1つのコンマ「、」がありました。 contentReducerの後のコンマをコードから削除してみてください。

8
Learning