NullInjectorError:没有提供程序

时间:2019-04-30 19:53:34

标签: angular angular2-providers

问候,我正在尝试使用“ ng build --prod --configuration = production”构建我的angular2项目,将其部署在ubuntu服务器上,并且在Web控制台中遇到此错误:

ERROR Error: "StaticInjectorError[t -> t]: 
  StaticInjectorError(Platform: core)[t -> t]: 
    NullInjectorError: No provider for t!"
    get http://192.168.1.168/main.765684076005ff28e8f4.js:1
    t http://192.168.1.168/main.765684076005ff28e8f4.js:1
    t http://192.168.1.168/main.765684076005ff28e8f4.js:1
    get http://192.168.1.168/main.765684076005ff28e8f4.js:1
    t http://192.168.1.168/main.765684076005ff28e8f4.js:1
    t http://192.168.1.168/main.765684076005ff28e8f4.js:1
    get http://192.168.1.168/main.765684076005ff28e8f4.js:1
    cm http://192.168.1.168/main.765684076005ff28e8f4.js:1
    n http://192.168.1.168/main.765684076005ff28e8f4.js:1
    fm http://192.168.1.168/main.765684076005ff28e8f4.js:1
    cm http://192.168.1.168/main.765684076005ff28e8f4.js:1
    get http://192.168.1.168/main.765684076005ff28e8f4.js:1
    tg http://192.168.1.168/main.765684076005ff28e8f4.js:1
    Jm http://192.168.1.168/main.765684076005ff28e8f4.js:1
    Qm http://192.168.1.168/main.765684076005ff28e8f4.js:1
    kg http://192.168.1.168/main.765684076005ff28e8f4.js:1
    Og http://192.168.1.168/main.765684076005ff28e8f4.js:1
    Gg http://192.168.1.168/main.765684076005ff28e8f4.js:1
    create http://192.168.1.168/main.765684076005ff28e8f4.js:1
    create http://192.168.1.168/main.765684076005ff28e8f4.js:1
    bootstrap http://192.168.1.168/main.765684076005ff28e8f4.js:1
    _moduleDoBootstrap http://192.168.1.168/main.765684076005ff28e8f4.js:1
    _moduleDoBootstrap http://192.168.1.168/main.765684076005ff28e8f4.js:1
    i http://192.168.1.168/main.765684076005ff28e8f4.js:1
    invoke http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    onInvoke http://192.168.1.168/main.765684076005ff28e8f4.js:1
    invoke http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    run http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    I http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    invokeTask http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    onInvokeTask http://192.168.1.168/main.765684076005ff28e8f4.js:1
    invokeTask http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    runTask http://192.168.1.168/polyfills.71466010da316f5320a5.js:1
    g http://192.168.1.168/polyfills.71466010da316f5320a5.js:1

我做了很多研究,看来这是AppModule中被遗忘的提供程序的错

但是我找不到哪个服务...

import { AgmCoreModule } from '@agm/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { MatButtonModule, MatSnackBarModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Http } from './service/http.service';
import { ToasterService } from './service/toaster.service';
import { ConnectedGuard } from './service/connected-guard.service';
import { DisconnectedGuard } from './service/disconnected-guard.service';
import { AppComponent } from './app.component';
import { LoginComponent } from './view/login/login.component';
import { RegisterComponent } from './view/register/register.component';
import { IndexComponent } from './view/index/index.component';
import { ResetComponent } from './view/reset/reset.component';
import { AppRoutingModule } from './app-routing.module';
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';
import { RecaptchaFormsModule } from 'ng-recaptcha/forms';
import { environment } from 'src/environments/environment';
import { PanelComponent } from './component/panel/panel.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    IndexComponent,
    ResetComponent,
    PanelComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    RecaptchaModule,
    RecaptchaFormsModule,
    MatButtonModule,
    MatSnackBarModule,
    AgmCoreModule.forRoot({
      apiKey: environment.GOOGLE_MAP_API_KEY,
    })
  ],
  providers: [
    CookieService,
    Http,
    ToasterService,
    DisconnectedGuard,
    ConnectedGuard,
    AppRoutingModule,
    {
      provide: RECAPTCHA_SETTINGS,
      useValue: {
        siteKey: environment.GOOGLE_RECAPTCHA_API_KEY,
      } as RecaptchaSettings,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Project tree structure

我如何找到解决方案,我不知道如何操作。

祝你有美好的一天,

2 个答案:

答案 0 :(得分:1)

我终于找到了解决方案(感谢@SouravDutta提供线索)

  1. 转到.\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js
  2. 评论以下内容...
/*extraMinimizers.push(new TerserPlugin({
   sourceMap: scriptsSourceMap,
   parallel: true,
   cache: true,
   terserOptions,
}));*/ 
  1. 再次重建项目并检查错误(现在提供更多信息) (我有:EXCEPTION: Uncaught (in promise): Error: No provider for CookieOptions!) 这是我AppModule.ts中缺少的提供程序

要解决缺少的提供程序...

  1. 我在AppModule的CookieOptions中添加了import { CookieService, CookieOptions } from 'angular2-cookie/core';
  2. 添加到我的提供商列表{ provide: CookieOptions, useValue: {} }

完成。

答案 1 :(得分:0)

在使用ionic cordova run android --device --prod命令进行生产构建和运行时,在 Ionic框架上开发时遇到了类似的问题。我想扩展@ShidomaruNeveRage解决方案。就我而言,我必须注释掉以下代码才能看到详细的错误:

  /*extraMinimizers.push(new TerserPlugin({
        sourceMap: scriptsSourceMap,
        parallel: true,
        cache: true,
        chunkFilter: (chunk) => !globalScriptsByBundleName.some(s => s.bundleName === chunk.name),
        terserOptions,
    }), 
    // Script bundles are fully optimized here in one step since they are never downleveled.
    // They are shared between ES2015 & ES5 outputs so must support ES5.
    new TerserPlugin({
        sourceMap: scriptsSourceMap,
        parallel: true,
        cache: true,
        chunkFilter: (chunk) => globalScriptsByBundleName.some(s => s.bundleName === chunk.name),
        terserOptions: {
            ...terserOptions,
            compress: {
                ...terserOptions.compress,
                ecma: 5,
            },
            output: {
                ...terserOptions.output,
                ecma: 5,
            },
            mangle: !mangle_options_1.manglingDisabled && buildOptions.platform !== 'server',
        },
    }));
    */