angular / angular

Deliver web apps with confidence 🚀
https://angular.dev
MIT License
94.88k stars 24.76k forks source link

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

Closed humarkx closed 6 years ago

humarkx commented 6 years ago

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

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

humarkx commented 6 years ago

Importing both HttpModule and HttpClientModule fixes the problem.

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

vicb commented 6 years ago

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

SK-Agrawal commented 6 years ago

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

Heena-Vora commented 6 years ago

still not working for me

raghavjatin commented 6 years ago

also not working for me , same error

Moshiour027 commented 6 years ago

same here

Muhammad-Soban commented 6 years ago

Not working for me

crowster commented 6 years ago

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 commented 6 years ago

Have the same issue :(

danielszuk commented 6 years ago

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

jersonjohn commented 6 years ago

Same error , Not working for me too

mumairofficial commented 6 years ago

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

jersonjohn commented 6 years ago

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

Problem fixed!! HUHU

ilivestrong commented 6 years ago

@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 commented 6 years ago
capture
jersonjohn commented 6 years ago

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

jersonjohn commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

ilivestrong commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@amitkprajapati import HttpClientModule in app.module.ts

import { HttpClientModule } from '@angular/common/http'
///
@NgModule({
  imports: [ HttpClientModule ]
})
HolyMarsia commented 6 years ago

default

I had the same problem. in my app this issue I did it like this. step1. Check. app.Module.ts file inner import []

step2. Check the modules you created and see if any of the newly created files are unimported.

mumairofficial commented 6 years ago

add FreezerService into providers array of app.module.ts

EmRa228 commented 6 years ago

Stop ionic and rerun "ionic serve" to show real error message to you.

mamad1295 commented 6 years ago

@ilivestrong I got the same. Adding providers: [UserService] in my userListComponent fixed it.

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css'],
  providers: [UserService]
})

This component is imported by my user-module which itself is imported in app-module.

Hope it helps !

kverma17 commented 6 years ago

Not working with any of the solutions.

FILES ----- error system appmodulets homets packagejson

mumairofficial commented 6 years ago

@kverma17 add Camera to provider array in side of app.module.ts and donot forget to import it :)

I am not sure camera will work properly in browser but the error you have posted will go away.

jersonjohn commented 6 years ago

Sorry I am not accessing computers as travelling now

On Fri, Jan 19, 2018 at 4:13 PM, Muhammad Umair notifications@github.com wrote:

@kverma17 https://github.com/kverma17 add Camera to provider array in side of app.module.ts and donot forget to import it :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/20339#issuecomment-358895567, or mute the thread https://github.com/notifications/unsubscribe-auth/ALjmrWMbECJKExNU3ohhoDk0OjiBPymLks5tME6ygaJpZM4QZw3x .

SK-Agrawal commented 6 years ago

The above one is right .you should define the it in provider of app.module file .

On 19-Jan-2018 1:49 PM, "Jerson" notifications@github.com wrote:

Sorry I am not accessing computers as travelling now

On Fri, Jan 19, 2018 at 4:13 PM, Muhammad Umair notifications@github.com wrote:

@kverma17 https://github.com/kverma17 add Camera to provider array in side of app.module.ts and donot forget to import it :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/angular/angular/issues/20339#issuecomment-358895567 , or mute the thread https://github.com/notifications/unsubscribe-auth/ ALjmrWMbECJKExNU3ohhoDk0OjiBPymLks5tME6ygaJpZM4QZw3x .

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/20339#issuecomment-358896806, or mute the thread https://github.com/notifications/unsubscribe-auth/AWbXx5egA7PdAAz_D-twVRcGtjKxLYTYks5tMFAdgaJpZM4QZw3x .

devraj88 commented 6 years ago

You need provide your dataservices import ........... import { DataService } from '../dataservice';

@Component({ selector: '....... templateUrl: ........ styleUrls:......, providers: [DataService] })

miriiit commented 6 years ago

these error occur when we use feature module just add

RouterModule.forRoot({}) above the RouterModule.forFeature('Items',reducers)

nagarajbyndoor commented 6 years ago

Thanks @jersonjohn your suggestions helped :)

csharpspecialist commented 6 years ago

Make sure you are adding HttpModule and not just Http. That was my problem. Even adding Http would not fix my issue. I had to add HttpModule as shown in the next paragraph.

Add import { HttpModule } from '@angular/http'; in app.module.ts , which of course means that I had to add it to the imports array below as well.

If you Add import { Http } from '@angular/http'; in app.module.ts by itself then it will still show you an error...even if you add a reference to it in the imports array/list below.

The newest version of the CLI does not add this to your build when using npm if it is generating a new package for some reason. It must have previously done this but not any longer.

If you are trying to build this youtube series project then you will need to import HttpModule into your app.module.ts file!!! https://www.youtube.com/watch?v=pxv-0WeT44w

mumairofficial commented 6 years ago

Just for information ~HttpModule~ is deprecated in favor of HttpClientModule from @angular/common/http package; use the latest one to make upgrade easy :+1:

byassine52 commented 6 years ago

I had the same problem when I moved a property to a component inside constructor() parameters. It was solved when I moved it out back.

garycsebastian commented 6 years ago

ionic serve ... again

disujha commented 6 years ago

Apart from above solutions... I think removing the NavCtrl from service also helps. Seems there is conflict between NavCtrl of Component and Service/Provider

noameini commented 6 years ago

abc

geyma1311 commented 6 years ago

my solution was to add my service in the providers in my component.ts

chambahr commented 6 years ago

import { HttpModule } from '@angular/http'; and then add HttpModule to imports

,imports: [ HttpModule, BrowserModule, IonicModule.forRoot(MyApp), ], This fixes the problem for me. you can also import import { HttpClientModule } from '@angular/common/http'; for convenience sake

fmorc commented 6 years ago

You need to provide your service in the module where your component is being declared:

@NgModule({ imports: [ SharedModule, RouterModule.forChild([ { path: 'login', component: LoginComponent } ]) ], declarations: [ LoginComponent ], providers: [ AuthService ]

And then referencing it in your component and injecting in the constructor. Make sure your service has the Injectable decorator

duggu123 commented 6 years ago

Uncaught in promise error occurs when you did not import required dependency . I got error of Error: Uncaught (in promise): Error: StaticInjectorError[AngularFireAuth] so I import AngularFireDatabaseModule <---- for database AngularFireAuthModule <----for AngularAuth

import { AngularFireModule } from 'angularfire2'; // for AngularFireDatabase import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database'; // for AngularFireAuth import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFireAuth } from 'angularfire2/auth';

@NgModule({ imports: [ AngularFireModule.initializeApp({
authDomain: '...', databaseURL: '...', storageBucket: '...', messagingSenderId: '...' }),
AngularFireDatabaseModule,
AngularFireAuthModule
] })

T-candy commented 6 years ago

i solved this problem. at 'app.module.ts' add

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

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

qam12 commented 6 years ago

Thanks @mushinz

ProgrammingFuad commented 6 years ago

@jersonjohn thanks your guidance on adding services as a provider did the trick for me!

SadmiB commented 6 years ago

I got this error in Angular 5.2.7 and importing HttpClientModule to the app.module.ts solved the the problem, don't forget to add HttpClientModule to the imports: [] and don't forget the service provider too providers: []