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编译不支持匿名功能。

例如ES6胖箭头功能

() => {}

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

例如代替这个：

export default function AppCodeMatcher(){ ... }

执行此操作：

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

Answer 5

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

模板编译“ AppModule”期间发生错误ERROR

5 个答案: