'AppModule' 模板编译期间出现错误答案

【问题标题】：ERROR in Error during template compile of 'AppModule''AppModule' 模板编译期间出现错误
【发布时间】：2018-12-04 20:22:03
【问题描述】：

尝试构建一个 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 和 NgRX 6。我不明白为什么这不起作用。如果我不使用 prod 标志，我已遵循文档，并且我的应用程序构建得很好。但是构建臃肿且缓慢，我更喜欢AOT 构建。

【问题讨论】：

标签： angular ngrx angular2-aot

【解决方案1】：

我也遇到了同样的错误，就我而言，这只是我的模块中的一个错字。我在模块的提供者数组中有一个逗号“，”。尝试从代码中删除 contentReducer 之后的逗号。

【讨论】：

很棒的答案！我的问题只是在错误的地方逗号。谢谢。
救了我！谢谢！！
我也遇到过同样的情况 :)
非常感谢，我也遇到了。
王牌。 PWA 迁移增加了另一个，对我来说也是如此。感谢您的提示。

【解决方案2】：

遇到了同样的问题...尝试使用注入令牌来提供 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 编译器应该能够静态分析代码（无需执行）。

【讨论】：

【解决方案3】：

或者只是将“[authKey]: authReducer”更改为 'auth': authReducer，

【讨论】：

【解决方案4】：

在为生产版本启用 AOT 时尝试使用 UrlMatcher 时，我遇到了同样的错误。

const adminRoutes: Routes = [
  {
    matcher: AppCodeMatcher,
    component: AppContainerComponent,
    children: [ ... ]
  }];

AOT 编译不支持匿名函数。

例如ES6 胖箭头函数

() => {}

但这也意味着不支持默认导出。您必须改用命名导出。

例如而不是这个：

export default function AppCodeMatcher(){ ... }

这样做：

function AppCodeMatcher() { ... }
export { AppCodeMatcher }

【讨论】：

【解决方案5】：

当您从 app.module.ts 中的声明中删除逗号“，”时它会解决。并重新启动代码编辑器。

【讨论】：