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

Question

正在尝试构建一个 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 构建。

Answer 1

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

Answer 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 编译器应该能够静态分析代码（无需执行代码）。

Answer 3

或者将“[authKey]: authReducer,”改为'auth': authReducer,

Answer 4

当为生产构建启用 AOT 时尝试使用 UrlMatcher 时我遇到了同样的错误。

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

AOT compilation does not support anonymous functions.

例如ES6 胖箭头函数

() => {}

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

例如而不是这个：

export default function AppCodeMatcher(){ ... }

这样做：

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

Answer 5

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

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

ERROR in Error during template compile of 'AppModule'

angular

ngrx

angular2-aot