Angular 6-由于NGRX,生产构建失败

时间:2018-08-01 07:17:35

标签: javascript angular angular-material angular-cli ngrx

我想使用以下命令生成并测试生产版本:

ng build --prod --configuration=production 
ng serve --prod --configuration=production

文件生成正确,但是当我在浏览器中打开网站时,出现此错误:

  

未捕获的错误:StaticInjectorError [n-> t]:   StaticInjectorError(平台:核心)[n-> t]:   NullInjectorError:没有t的提供者!

我的生产配置如下:

       "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": true,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": true,
          "buildOptimizer": true,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        },

我意识到问题出在我的应用程序中使用了ngrx。当我删除以某种方式连接到ngrx的所有内容时,该应用程序会正确打开。 您有什么想法我应该解决吗?

下面,我在应用程序中附加了一些ngrx示例。

AppModule

export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [storeFreeze] : [];

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    EffectsModule.forRoot([AuthEffects]),
  ],

AppCompoment:

  userState: Observable<User.State>;

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.userState = this.store.select('user');
  }
  

编辑

这里是完整的AppModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AuthGuard} from './shared-module/services/auth.guard';
import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {AppRoutingModule} from './app-routing.module';
import {ErrorComponent} from './shared-module/components/error/error.component';
import {Globals} from './shared-module/services/globals';
import {UserService} from './user-module/services/user.service';
import {FacebookModule} from 'ngx-facebook';
import {AuthenticationService} from './user-module/services/authentiation.service';
import {RouteReuseStrategy} from '@angular/router';
import {CustomRouteReuseStrategy} from './router-strategy';
import {NotAllowedComponent} from './shared-module/components/not-allowed/not-allowed.component';
import {MetaReducer, Store, StoreModule} from '@ngrx/store';
import {EffectsModule} from '@ngrx/effects';
import {AppState, reducers} from './store/app.reducers';
import {AuthEffects} from './store/auth/auth.effects';
import {SharedModule} from './shared-module/shared.module';
import {UserModule} from './user-module/user.module';
import {VideoManagerService} from './video-module/services/video-manager.service';
import {HttpClientModule} from '@angular/common/http';
import {SpecialistChoiceEffect} from './store/specialist-choice/specialist-choice.effects';
import {SpecialistService} from './specialist-module/services/specialist-service';
import {environment} from '../environments/environment';
import {storeFreeze} from 'ngrx-store-freeze';

export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [storeFreeze] : [];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NotAllowedComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FacebookModule.forRoot(),
    AppRoutingModule,
    StoreModule.forRoot(reducers, {metaReducers}),
    EffectsModule.forRoot([AuthEffects, SpecialistChoiceEffect]),
    SharedModule,
    UserModule
  ],
  providers: [
    AuthGuard,
    Globals,
    VideoManagerService,
    UserService,
    AuthenticationService,
    SpecialistService,
    Store,
    {
      provide: RouteReuseStrategy,
      useClass: CustomRouteReuseStrategy
    }
  ],

  bootstrap: [AppComponent]
})

export class AppModule {
}
  

编辑2

我更改了构建配置,目前我收到了更好的日志:

  

StaticInjectorError(AppModule)[SpecialistChoiceEffect-> MatSnackBar]:   StaticInjectorError(平台:核心)[SpecialistChoiceEffect-> MatSnackBar]:     NullInjectorError:MatSnackBar没有提供程序!

这是SpecialistChoiceEffect:

 constructor(private actions$: Actions,
          private router: Router,
          public infoBar: MatSnackBar) {
  }

让我说,我在AppModule中导入了SharedModule,该SharedModule导出了MaterialModule,而后者又导出了MatSnackBarModule。所以一切看起来都很好...

1 个答案:

答案 0 :(得分:0)

这似乎是CLI中的错误,请查看相应的Github issue

作为解决方案,您可以尝试以下操作:

  
      
  • 更新到@ angular / cli和@ angular-devkit的最新版本(更新其他@angular软件包可能不会受到损害)
  •   
  • 清除您的node_modules并重新安装
  •   

侧面说明:产品构建的行为有所不同,因为它在开发模式下使用AoT编译器(提前)而不是JIT编译器(及时)。由于AoT模式现在几乎和JIT一样快,因此我建议在开发过程中也使用它,因此,如果出现问题,您将立即获得反馈。有关更多信息,请参见SO answer