Importing both HttpModule and HttpClientModule fixes the problem.

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

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

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

still not working for me

also not working for me , same error

same here

Not working for me

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

Have the same issue :(

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

Same error , Not working for me too

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

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

Problem fixed!! HUHU

@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

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

@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
]

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

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

@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. :(

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

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.

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

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

@amitkprajapati import HttpClientModule in app.module.ts

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

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.

• In my case, I tried to register with the ' Effect ' without importing ' FreezerService ' from the 'core module' that manages the service module.

add FreezerService into providers array of app.module.ts

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

@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 !

Not working with any of the solutions.

FILES -----

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

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
.

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

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

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

these error occur when we use feature module just add

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

Thanks @jersonjohn your suggestions helped :)

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

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

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.

ionic serve ... again

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

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

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

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

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
]
})

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

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

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

Thanks @mushinz

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

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: []

Thanks @T-candy,
it worked for me.

just import HttpClientModule instead of HttpModule

ionic must changed handle name...

using ionic 3.x

iam using it to comnfigurre it with firebase.
after adding AngularFireDatabase to providders in app.module.ts the problem is solved.
:):)

All I did was add my service to providers array of app.module and it worked!

I also got this working by importing HttpModule from angular/[email protected] in app.module.ts

import { HttpModule } from '@angular/http';
@NgModule({
    imports: [
       ...,
       HttpModule,
       ...
})

That is because we have not injected our services in app module.

We have to pass our service at 2 places in app.module.ts
importing the service
added them in providers

import {ConfigService} from './providers/config.service';

....
providers: [ConfigService],
...

This error was caused by introducing angular2-cookie for me. It works during "ng serve", but not "ng build --prod". Solution was simply removing it from the project. Didn't really use it anyways.

I solve this by following two steps:

import { BrowserModule } from '@angular/platform-browser';
...
imports: [
BrowserModule,
]

Just verify Your Code with below one:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";

@NgModule({

declarations: [
.....
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
.....
],
bootstrap: [AppComponent]
})

the above Code resolve the issue

in app module
import { FormsModule } from '@angular/forms';
import { Http, HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http'

in NgModules imports
HttpModule,
HttpClientModule,
FormsModule,

and it worked for me

Use HttpModule as the provider instead of Http. It will register all its services.

I spend a lot of time trying to figure out this error and tried all suggestions and non of them worked in my code. The solution for me was adding the service to providers in app.module.ts
providers: [
ClientService
],

Fixed by Change in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpClientModule } from '@angular/common/http';

import { MyApp } from './app.component';

import { UsersPage } from '../pages/users/users';
import { ReposPage } from '../pages/repos/repos';
import { OrganisationsPage } from '../pages/organisations/organisations';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { GithubUsersProvider } from '../providers/github-users/github-users';
import { PeopleServiceProvider } from '../providers/people-service/people-service';

@NgModule({
declarations: [
MyApp,
UsersPage,
ReposPage,
OrganisationsPage
],
imports: [
HttpClientModule,
BrowserModule,
IonicModule.forRoot(MyApp),

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
UsersPage,
ReposPage,
OrganisationsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
GithubUsersProvider,
PeopleServiceProvider
]
})
export class AppModule {}

Provider - service -file

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

import { User } from '../../models/user';

@Injectable()
export class GithubUsersProvider {

githubApiUrl = 'https://api.github.com';
constructor(private http: HttpClient) {
console.log('Hello GithubUsersProvider Provider');
}

load(): Observable return this.http.get(${this.githubApiUrl}/users)
.map(res => }

}

Add HttpClientModule instead

I got rid of "angular2-cookie/core" and wrote 2 functions to get and set cookies, problem solved

If in authservice you used { Http } from '@angular/http',
then change it to { HttpClient } from '@angular/common/http'
and in constructor of authservice change parameter type from Http to HttpClient

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':

@MehdiZohrevnd what should be version 6 ?

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

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!

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)

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

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}

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

this worked for me

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

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.

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.

In the auth.guard.ts

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

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

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

for mi

Problem fixed !
Thank you all !

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

not working for me..

angular-cli version is too high, Problem fixed

angular-cli version is too high, Problem fixed

how did you fix it

angular-cli version is too high, Problem fixed

how did you fix it

Reduce the @angular/cli version to 6.2.8

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

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 https://github.com/angular/angular/issues/20339#issuecomment-353837569

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

Thanks . I had same issue but it got fixed

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

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

imports: [
...
HttpClientModule,
HttpModule
]

1. 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"
   },

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

in @NgModule import HttpModule and works!

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

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]

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.

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