ERROR Error: Uncaught (in promise): Error: StaticInjectorError[e]:

[humarkx]

https://image.prntscr.com/image/4Huq_HhQTHyIjYKH0ztgKw.png

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[e]: StaticInjectorError[e]: NullInjectorError: No provider for e!

[humarkx]

Importing both HttpModule and HttpClientModule fixes the problem.

import { HttpClientModule } from '@angular/common/http'; import { HttpModule } from '@angular/http';

[vicb]

@ocombe is working on a fix (better error message)

[SK-Agrawal]

Add import { HttpModule } from '@angular/http'; in app.module.ts

[Heena-Vora]

still not working for me

[raghavjatin]

also not working for me , same error

[Moshiour027]

same here

[Muhammad-Soban]

Not working for me

[crowster]

in app module
Step 1 add import
import { HttpModule } from '@angular/http';
Step 2 add HttModule in :
imports: [
HttpModule
],
.....

Maybe you need to add in the service
import { Http ,HttpModule} from '@angular/http' too

[RyannGalea]

Have the same issue :(

[danielszuk]

same issue here (ive imported the httpmodule, but still not working)

[jersonjohn]

Same error , Not working for me too

[mumairofficial]

Worked by importing HttpClientModule even I am not using this module in whole app.. that's wired.

[jersonjohn]

Have to add app.module.ts under provider section to make them available in providers

Problem fixed!! HUHU

[ilivestrong]

@jersonjohn - Which service to registere in Providers section. I am facing the same issue and after reading above suggestions, I have already imported HttpClient and HttpClientModule in my app.module.ts (even though I am not using them)...

Please advise.

Thanks
Deepak

[ilivestrong]

[jersonjohn]

providers: [
AuthGuard,
CookieService,
CompanyService,
PolicyService,
CommunicationService,
AuthenticationService
]

[jersonjohn]

@ilivestrong all services need to configure in the providers section of the app.module.ts

Something like this

providers: [
AuthGuard,
CookieService,
CompanyService,
PolicyService,
CommunicationService,
AuthenticationService
]

[ilivestrong]

@jersonjohn - I already have all my custom services and angular services in providers array. Not sure why it's not working. I am just trying to build a login page using a reactive form (using FormBuilder).

Not sure what is breaking it...

[mumairofficial]

@ilivestrong have you included ReactiveFromsModule in import array of app.module.ts

[ilivestrong]

@mumairofficial - Yes I did. Strangely I created a new project and it went away, only until I wrote a new route guard and I get this StaticInjectionError for my route guard now.

This route guard is provided as well. :(

[HanVertegaal]

I had the same problem after creating a new service using ng-cli. This should automatically add the service to the providers array in app.module.ts

[VikashChoudahry]

I had same issue but after importing "HttpModule" in "app.module.ts" it worked fine for me.

1. import { HttpModule } from '@angular/http';
2. Add "HttpModule" in imports array list.

Thanks.
Keep Sharing.

[ShahidMirza2017]

Add import { HttpModule } from '@angular/http'; in app.module.ts for Http
Or
Add import {HttpClientModule} from '@angular/common/http' in app.module.ts for httpclient

[amitkprajapati]

I imported both HttpModule and HttpClientModule but still getting the same error , Please any one help me out , i am trying to implement routing .

[nvigneux]

@amitkprajapati import HttpClientModule in app.module.ts

import { HttpClientModule } from '@angular/common/http'
///
@NgModule({
  imports: [ HttpClientModule ]
})

[MehdiZohrevnd]

however someone answered correctly but i refer to correct solution too ....
1 - if you'r version is '6' in app.module use 'HttpClientModule' and 'HttpClient' from '@angular/common/http':

2 - otherwise use 'HttpModule' and 'Http' from '@angular/http':

[asrar7]

@MehdiZohrevnd what should be version 6 ?

[bfheythem]

I am having the same issue , even when I do the HttpClientModule imports :/ plz help

[panchomr]

Hi , i solved this way , in angular 6 httpModule is deprecated and was removed from Angular.

this is my app.module.ts

import { HttpClientModule } from '@angular/common/http';

and then add into imports:

imports: [
    APP_ROUTING,
    BrowserModule,
    RouterModule,
    HttpClientModule
  ],

in my service

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';

and this works for me

cheers!

[itamark]

As was mentioned above, this worked for me:
In app.module.ts import HttpClientModule and include it in your imports array.
In your service use HttpClient (http: HttpClient in constructor)

[omsaravanan]

Using Angular 6 and tried every suggestion... the problem continues... pls suggest

[adrobson]

In my case I had multiple resolvers and was using the wrong syntax by putting a [] around the resolvers eg [{name1:resolver1{,{name2:resolver2}] . Instead the syntax should be {name1:resolver1,name2:resolver2}

[SK-Agrawal]

Instead of doing this [{name1:resolver1*{*,{name2:resolver2}] Please try this one [{name1:resolver1*}*,{name2:resolver2}]

[jardelsimao]

this worked for me

@Injectable({
providedIn: 'root',
})

[alundiak]

Just in case someone needs additional info, especially if it's about erros with ng test.
I had this error(s):

Error: StaticInjectorError(DynamicTestModule)[HttpClient]:
StaticInjectorError(Platform: core)[HttpClient]:
NullInjectorError: No provider for HttpClient!

So this is what helped me:

I added to my xyz.component.spec.ts file

import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';

and

TestBed.configureTestingModule({
      imports: [ HttpClientModule, ReactiveFormsModule, RouterTestingModule ], // new line
      declarations: [ BookCreateComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

In fact,

• Injection of HttpClientModule helps to get rid of StaticInjectorError
• Injection of ReactiveFormsModule helps to get rid of Can't bind to 'formGroup' since it isn't a known property of 'form' errors.
• Injection of RouterTestingModule helps to get rid of Can't bind to 'routerLink' since it isn't a known property of 'a'.

Notes:

• Angular v6.0.0, Angular Material v 6.0.2, Angular CLI v6.0.0.
• but also verified with Angular v6.1.1 and Angular CLI v6.1.2.
• Node v10.8.0, npm v6.2.0, MacOS, Chrome v68.0.

[mhswork]

One of the ways I was able to solve this issue is:

Add "HttpClientModule" existing in '@angular/common/http' inside app.module.ts file and add "HttpCleint" existing in '@angular/common/http' inside the component/service typescript file wherein you are sending Http requests.

[Con607]

In the auth.guard.ts

@Injectable({
    providedIn: 'root',
})

[christiantigre]

I solved
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

imports: [
BrowserModule,
HttpModule,
HttpClientModule,
IonicModule.forRoot(MyApp)
],

for mi

[noameini]

Problem fixed !
Thank you all !

[Jasa-Bcone]

Importing both HttpModule and HttpClientModule fixes the problem.

import { HttpClientModule } from '@angular/common/http'; import { HttpModule } from '@angular/http';

if we are using {Http ,Headers, or anything } from '@angular/http'; in app.compontent.ts file or app.service.ts file or any otherfile.ts then we have to add HttpModule in app.module.ts before using these in service.ts file or component.ts file

[macyun]

not working for me..

[macyun]

angular-cli version is too high, Problem fixed

[akrun143]

angular-cli version is too high, Problem fixed

how did you fix it

[macyun]

angular-cli version is too high, Problem fixed

how did you fix it

Reduce the @angular/cli version to 6.2.8

[MarcioBdeveloper]

the correct amount is { Http } from '@angular/http'; in Providers

[Elite40]

I'm using ionic version 3 and the following solution worked for me:

Inside app_module.ts add: import { HttpClientModule } from '@angular/common/http';

Then add that to your imports array, like so:
imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpClientModule ],

Thanks to #20339 (comment)

[DaveOdden]

I ended up importing HttpClientModule and the auth-guard file into app.module.ts, supplied the auth guard dependency in the providers array, and the HttpClientModule into the imports array.

import { HttpClientModule } from '@angular/common/http';
import { AuthGuardService } from './app.auth-guard.service';

[...]

@NgModule({
  declarations: [...],
  imports: [ HttpClientModule, ... ],
  providers: [ AuthGuardService, AuthService, {
    provide: AuthServiceConfig,
    useFactory: getAuthServiceConfigs,
  }],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})

note: I did not need to downgrade @angular/cli

[diegodelfin7]

Thanks . I had same issue but it got fixed

[ghulamakbar14]

I have same issue but it is not fixed.
My files are:

app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

imports: [
...
HttpClientModule,
HttpModule
]

package.json

"devDependencies": {
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "~0.12.3",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "7.2.4",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "^7.2.6",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.4.0",
"@ionic/lab": "1.0.21",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.12.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},

[josemorenoaguilera]

This work for me:
at the app.module.ts
import { HttpModule } from '@angular/http';

in @NgModule import HttpModule and works!

[oscarhandsome]

For me helped:
import {HttpClientModule} from '@angular/common/http';
to imports - HttpClientModule
in the app.module.ts

[johnedvard]

Remember that Pipes also needs to be in the providers' array. I got the error when I had my Pipes in a shared module, exporting them, but forgot to add them as providers.
providers: [MyPipe]

[vijayamurugan]

The solution is simple that you might be missing services under providers array. When you run in devlopment mode you will be able exactly identify the missing service under providers array. When you run in production mode the error log doesn't show the exact missing service/s under providers.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}