NullInjectorError: No provider for t

Question

Greeting, I'm trying to build my angular2 project with "ng build --prod --configuration=production", deploy it on ubuntu server and I got this error in the web console :

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

I do a lot of research and it seems that it is the fault of a forgotten provider in AppModule

But I can't find which service...

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

How can I find the solution, I have no idea how to operate.

Have a good day,

Answer 1

I finally found the solution (Thanks @SouravDutta for the clue)

1. Go to .\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js
2. Comment the following...

/*extraMinimizers.push(new TerserPlugin({
   sourceMap: scriptsSourceMap,
   parallel: true,
   cache: true,
   terserOptions,
}));*/ 

3. Rebuild the project again and check the error (more informations are given now) (I had: EXCEPTION: Uncaught (in promise): Error: No provider for CookieOptions!) That's a missing provider in my AppModule.ts

---

To solve that missing provider...

1. I add CookieOptions to my import { CookieService, CookieOptions } from 'angular2-cookie/core'; in AppModule.
2. Add into my provider list { provide: CookieOptions, useValue: {} }

Done.

Answer 2

I had a similar issue developing on Ionic framework, using the command ionic cordova run android --device --prod for production build and run.I would like to expand on @ShidomaruNeveRage solution. In my case I had to comment out the following code to be able to see a detailed error:

  /*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',
        },
    }));
    */