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,

Try using both `import { HttpClientModule, HttpClient } from '@angular/common/http';` `import { HttpModule} from '@angular/http';` ... `imports:[HttpClientModule, HttpModule]` — Sourav Dutta, Apr 30 '19 at 20:10
@PraveenKumar Yes, it works (with `ng build`, but I want to deploy it on production...) @robert I'm using Angular 7.2.0 — Shidomaru NeveRage, Apr 30 '19 at 20:28
@SouravDutta `import { HttpModule } from '@angular/http';` canno't find module... What happens to HttpClient? — Shidomaru NeveRage, Apr 30 '19 at 20:33
@ShidomaruNeveRage, one suggestion would to look at all constructors of your components to identify which servers are being injected and then verify the modules file to see if they are declared in providers. — Praveen Kumar, Apr 30 '19 at 20:38
`import { Http } from './service/http.service';` is it correct import, I mean is the class name just Http and not HttpService ? — Sourav Dutta, Apr 30 '19 at 20:55
@SouravDutta The name of this class is `export class Http {`. It is correct (homemade) — Shidomaru NeveRage, Apr 30 '19 at 21:58
`/* // Temporarily comment out this part (in common.js of node_modules) to pinpoint the error new UglifyJSPlugin({ sourceMap: buildOptions.sourceMap, parallel: true, cache: true, uglifyOptions, }), */` from this [thread](https://github.com/angular/angular-cli/issues/4752#issuecomment-392100468) — Sourav Dutta, May 01 '19 at 03:53

score 10 · Accepted Answer · answered May 01 '19 at 21:18

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

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

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

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...

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

Done.

score -1 · Answer 2 · answered Jan 23 '20 at 07:12

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

It would help if you indicated which file that code resides in! — Morgs, Oct 05 '22 at 09:51
I added my experience with a similar use case and referred to @Shidomaru NeveRage's solution https://stackoverflow.com/a/55942814/7485690 , which I also mentioned in the text. From the context it should be obvious that I am talking about the same file. — Patronaut, Oct 05 '22 at 15:09

NullInjectorError: No provider for t

2 Answers2