SampleService using HttpClient results in 'No provider for Injector!' error for HttpHandler

[sfmx]

I generated a new module using yo and modified the SampleService to include HttpClient (module source code here...). Then ran 'npm link' from the dist directory.

I then created a new angular app (client source code here...), linked to the generated module locally using the command 'npm link sturgeon' and added references to the SampleService implemented in the module from the client.

When I try to run the application using 'ng serve' I get the error 'No provider for Injector!' for HttpHandler. If I try to add HttpHandler and as indicated by the error message, and then the next error for NgZone, then I get 'Can't resolve all parameters for NgZone: (?).' So it looks like I'm going down the wrong path?

Could somebody please point me in the right direction and/or provide an example using HttpClient in the SampleService called from a separate client project which uses the service provided by the module?

Error: StaticInjectorError(AppModule)[HttpHandler -> Injector]: 
  StaticInjectorError(Platform: core)[HttpHandler -> Injector]: 
    NullInjectorError: No provider for Injector!
    at _NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1209)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1507)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1449)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1317)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1507)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1449)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1317)
    at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11052)
    at _createClass (webpack-internal:///../../../core/esm5/core.js:11091)
    at _createProviderInstance$1 (webpack-internal:///../../../core/esm5/core.js:11063)

[jvandemo]

There is no need to register SampleService in AppModule as a provider, because it is already registered in SampleModule.

Can you please try:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    SampleModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and export HttpClientModule in SampleModule using the exports key, so that HttpClientModule is automatically imported by any module that imports SampleModule:

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule
  ],
  declarations: [
    SampleComponent,
    SampleDirective,
    SamplePipe
  ],
  exports: [
    SampleComponent,
    SampleDirective,
    SamplePipe,
    HttpClientModule
  ],
})
export class SampleModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SampleModule,
      providers: [SampleService]
    };
  }
}

Thanks!!

[sfmx]

I made the changes you suggested but I was still getting the same error. First I tried syncing the minimum versions between the module and consumer application for @angular as the module was using 5.0.0 and my consumer application was using 5.2.0, this however did not resolve the issue. I then reverted to importing HttpModule from @angular/http and using Http instead of HttpClient. After this change I was able to run the client without errors so I reinstated HttpClient which also works if HttpModule is left as an import as well.

But when I attempted to actually use either Http or HttpClient rather than just the declaration in the constructor I was again seeing errors this time such as, ERROR TypeError: Cannot read property 'getCookie' of null.

In the end the issue I was facing was due to linking the module locally. It seems on windows 10 at least this gets in the way and causes the errors I was seeing. I resolved the problem by removing the links I created previously and copying the module directly into the node_modules folder in the client project.

[izifortune]

Hi @sfmx i will close the issue, feel free to reopen if this happens agains

[jvandemo]

@izifortune — Thank you 🏆

[eriktodx]

I can't believe @sfmx solution actually works. I was linking my local library to my app and kept getting the above error.

Now instead of linking I copied files inside node_modules/my_lib and the error is gone.

[timemachine3030]

Had this same issue on Mac 10.13. npm link is is a no-go for ng packages.

I have instead added a cp -r to the end of my build script for the package.

[n8k]

Just wanted to add my own experience fixing this:

I am using the Ionic CLI on Mac OS X 10.13 to manage creation of new services in an Ionic application. I created a new service with $ ionic g provider newprovider and received an error similar to the above NullInjectorError: No provider for newprovider!

I went into my editor, opened app.module.ts and although ionic CLI had already updated the import and the providers section, I made no changes and simply saved the document. Then it worked.

[jvandemo]

Thank you, @cxminer, @timemachine3030 and @n8k for your input, much appreciated! 👍

[DhiaEddineSaidi]

@sfmx does this problem happen with ng serve --aot ?

[deepthan]

I have encountered the same mistake, is there any effective solution?

[deepthan]

@sfmx

[facundocoto]

I have a similar problem. In this post you can replicate the error. If someone helps me I would appreciate it very much. Thanks

[petercunha]

@deepthan @facundocoto

If adding the HttpClientModule to your imports still doesn't fix it, you can try building with: ng build --prod

This fixed it for me.

[gersonmontenegro]

for me, I just put HttpClient, instead HttpClientModule in my app.module.ts and started to work.

[chesminsky]

i m facing the same issue. in my case , solved by copying dist folder into app node_modules instead of npm link . what s wrong with this npm link, can anyone explain ?

[default-writer]

In my case, the issue was the same, additionally

` WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js 4997:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ../workspace/node_modules/@angular/core/fesm5/core.js 5009:15-102 Critical dependency: the request of a dependency is an expression `

So, in browser, I got exacly the same error when node_modules was cached on server between build sessions, so I removed it completely and rebuild the app with fresh download each time I rebuild the fontend app, and the error has gone. So do not save the state of the node_modules folder and rebuild all deps from scratch. That may help in a future.

[Juanpam]

I'm still getting this error. I'm trying to build a common module that uses the HttpClient to log in the user into an Ionic app since there are multiple apps that use the same login. So far I've been copying and pasting the code but it's not a maintainable solution.

This is the error I'm getting. I would not like to copy my library in /node_modules since it's still a copy/paste solution.

This is the error I'm getting: ERROR Error: StaticInjectorError(AppModule)[HttpHandler -> Injector]: StaticInjectorError(Platform: core)[HttpHandler -> Injector]: NullInjectorError: No provider for Injector! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141) at resolveNgModuleDep (core.js:8369) at _createClass (core.js:8416) at _createProviderInstance (core.js:8386)

[ggradnig]

For those who are still facing the issue: add the following configuration to the consumer application angular.json at projects/*/architect/build/options :

"preserveSymlinks": true

This resolved the issue on Windows 10.

[RaviKiranM900]

please import the HttpClientModule from '@angular/common/http' and also mention HttpClientModule in @NgModule imports, this will solve this problem.

[dummdidumm]

This stackoverflow-post helped me solve my problem: https://stackoverflow.com/questions/51614615/angular-6-7-the-result-of-a-dependency-is-an-expression

Summary: You need to run npm pack and reference the tgz file inside you package.json.

[celvin]

upgrade to ng 9, resolved it.

https://next.angular.io/guide/updating-to-version-9#ivy-features-and-compatibility

[kaos2404]

For those who are still facing the issue: add the following configuration to the consumer application angular.json at projects/*/architect/build/options :

"preserveSymlinks": true

This resolved the issue on Windows 10.

This actually solved it! thanks

[Kolizzz]

For those who are still facing the issue: add the following configuration to the consumer application angular.json at projects/*/architect/build/options :

"preserveSymlinks": true

This resolved the issue on Windows 10.

After 3 days researching, this solve my problem too. @ggradnig you a start, thx!

[schematical]

For those who are still facing the issue: add the following configuration to the consumer application angular.json at projects/*/architect/build/options :

"preserveSymlinks": true

This resolved the issue on Windows 10.

I tried adding this and I get the following(on Windows 10):

>ng build
Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(preserveSymlinks).

Looks like it doesn't like that property. Any ideas?

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 10.1.7
Node: 12.13.1
OS: win32 x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      10.1.7
@angular/cli                    10.1.7
@schematics/angular             10.1.7
@schematics/update              0.1001.7
ng-packagr                      10.1.2
rxjs                            6.6.3
typescript                      4.0.5

dependancies:

 "@angular/animations": "~10.1.3",
    "@angular/common": "~10.1.3",
    "@angular/compiler": "~10.1.3",
    "@angular/core": "~10.1.3",
    "@angular/forms": "~10.1.3",
    "@angular/platform-browser": "~10.1.3",
    "@angular/platform-browser-dynamic": "~10.1.3",
    "@angular/router": "~10.1.3",

devDependancies:

 "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.7",
    "@angular/cli": "~10.1.3",
    "@angular/compiler-cli": "~10.1.3",

Any help would be awesome!