angular - headers - No hay proveedor para HttpClient

no provider for httpclient angular 6

Question

Después de actualizar de angular 4.4 a 5.0 y después de actualizar todos los HttpModule y Http a HttpClientModule, comencé a recibir este error.

También agregué HttpModule nuevamente para asegurarme de que no se deba a alguna dependencia, pero no resuelve el problema

en app.module, tengo todo configurado correctamente

import { HttpModule } from ''@angular/http'';
import { HttpClientModule, HttpClient } from ''@angular/common/http'';
.
.
.
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
HttpModule,
BrowserAnimationsModule,
FormsModule,
AppRoutingModule,
.
.
.

No sé de dónde viene este error, o no tengo idea de cómo obtenerlo. También tengo una advertencia (póngala a continuación también) tal vez esté relacionada.

Error: StaticInjectorError[HttpClient]:
StaticInjectorError[HttpClient]:
NullInjectorError: No provider for HttpClient!
at _NullInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5665)
at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953)
at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895)
at StaticInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5766)
at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953)
at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895)
at StaticInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5766)
at resolveNgModuleDep (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15328)
at _createClass (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15373)
at _createProviderInstance$1 (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15339)

Mensaje de advertencia:

./node_modules/@angular/Common/esm5/http.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:/XXX/node_modules/@angular/Common/esm5/http.js
Used by 21 module(s), i. e.
D:/XXX/node_modules/awesome-typescript-loader/dist/entry.js?silent=true!D:/XXX/node_modules/angular2-template-loader/index.js!D:/XXX/ClientApp/app/services/notification-endpoint.service.ts
* D:/XXX/node_modules/@angular/common/esm5/http.js
Used by 1 module(s), i. e.
D:/XXX/node_modules/awesome-typescript-loader/dist/entry.js?silent=true!D:/XXX/node_modules/angular2-template-loader/index.js!D:/XXX/ClientApp/app/app.module.ts
@ ./node_modules/@angular/Common/esm5/http.js
@ ./ClientApp/app/services/notification-endpoint.service.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/boot.browser.ts
@ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

Comportamiento actual

StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: No provider for HttpClient!

Ambiente

Angular version: 5.0.0 and 5.0.1 (also 5.1 beta)
Browser:
- all
For Tooling issues:
- Node version: 8.5.0
- Platform: windows

{
"name": "X",
"version": "1.0.0",
"description": "X",
"author": {
"name": "X X",
"email": "XX",
"url": "X"
},
"homepage": "X",
"dependencies": {
"@angular/animations": "^5.1.0-beta.0",
"@angular/common": "^5.1.0-beta.0",
"@angular/compiler": "^5.1.0-beta.0",
"@angular/compiler-cli": "^5.1.0-beta.0",
"@angular/core": "^5.1.0-beta.0",
"@angular/forms": "^5.1.0-beta.0",
"@angular/http": "^5.1.0-beta.0",
"@angular/platform-browser": "^5.1.0-beta.0",
"@angular/platform-browser-dynamic": "^5.1.0-beta.0",
"@angular/platform-server": "^5.1.0-beta.0",
"@angular/router": "^5.1.0-beta.0",
"@ngtools/webpack": "^1.8.0",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0",
"@swimlane/ngx-datatable": "^11.0.3",
"@types/jquery": "^3.2.16",
"@types/webpack-env": "^1.13.2",
"angular2-template-loader": "^0.6.2",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "^3.3.0",
"bootstrap": "^3.3.7",
"bootstrap-datepicker": "^1.7.1",
"bootstrap-select": "^1.12.4",
"bootstrap-toggle": "^2.2.2",
"bootstrap-vertical-tabs": "^1.2.2",
"chart.js": "^2.7.1",
"core-js": "^2.5.1",
"css": "^2.2.1",
"css-loader": "^0.28.7",
"event-source-polyfill": "^0.0.11",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.7",
"ng2-charts": "^1.6.0",
"ng2-toasty": "^4.0.3",
"ngx-bootstrap": "^2.0.0-beta.8",
"node-sass": "^4.6.0",
"popper.js": "^1.12.6",
"raw-loader": "^0.5.1",
"rxjs": "^5.5.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"typescript": "^2.6.1",
"url-loader": "^0.6.2",
"web-animations-js": "^2.3.1",
"webpack": "^3.8.1",
"webpack-hot-middleware": "^2.20.0",
"webpack-merge": "^4.1.1",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@types/chai": "^4.0.4",
"@types/jasmine": "^2.6.3",
"chai": "^4.1.2",
"jasmine-core": "^2.8.0",
"karma": "^1.7.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-webpack": "^2.0.5"
},
"scripts": {
"dev-build": "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js",
"test": "karma start ClientApp/test/karma.conf.js"
}
}

webpack.config.js

const path = require(''path'');
const webpack = require(''webpack'');
const merge = require(''webpack-merge'');
const AotPlugin = require(''@ngtools/webpack'').AotPlugin;
const CheckerPlugin = require(''awesome-typescript-loader'').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [''.js'', ''.ts''] },
output: {
filename: ''[name].js'',
publicPath: ''dist/'' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: //.ts$/, use: isDevBuild ? [''awesome-typescript-loader?silent=true'', ''angular2-template-loader''] : ''@ngtools/webpack'' },
{ test: //.html$/, use: ''html-loader?minimize=false'' },
{ test: //.css$/, use: [''to-string-loader'', isDevBuild ? ''css-loader'' : ''css-loader?minimize''] },
{ test: //.scss$/, use: [''to-string-loader'', isDevBuild ? ''css-loader'' : ''css-loader?minimize'', ''sass-loader''] },
{ test: //.(png|jpg|jpeg|gif|svg)$/, use: ''url-loader?limit=25000'' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = ''./wwwroot/dist'';
const clientBundleConfig = merge(sharedConfig, {
entry: { ''main-client'': ''./ClientApp/boot.browser.ts'' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require(''./wwwroot/dist/vendor-manifest.json'')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: ''[file].map'', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, ''[resourcePath]'') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: ''./tsconfig.json'',
entryModule: path.join(__dirname, ''ClientApp/app/app.module#AppModule'')
})
])
});
return [clientBundleConfig];
};

webpack.config.vendor.js

const path = require(''path'');
const webpack = require(''webpack'');
const ExtractTextPlugin = require(''extract-text-webpack-plugin'');
const merge = require(''webpack-merge'');
const treeShakableModules = [
''@angular/animations'',
''@angular/common'',
''@angular/compiler'',
''@angular/core'',
''@angular/forms'',
''@angular/http'',
''@angular/platform-browser'',
''@angular/platform-browser-dynamic'',
''@angular/router'',
''zone.js'',
];
const nonTreeShakableModules = [
''bootstrap'',
''core-js/client/shim'',
''web-animations-js'',
''event-source-polyfill'',
''jquery'',
''@swimlane/ngx-datatable/release/assets/icons.css'',
''ng2-toasty'',
''ng2-toasty/bundles/style-bootstrap.css'',
''ng2-charts'',
''ngx-bootstrap/modal'',
''ngx-bootstrap/tooltip'',
''ngx-bootstrap/popover'',
''ngx-bootstrap/dropdown'',
''ngx-bootstrap/carousel'',
''bootstrap-vertical-tabs/bootstrap.vertical-tabs.css'',
''bootstrap-toggle/css/bootstrap-toggle.css'',
''bootstrap-toggle/js/bootstrap-toggle.js'',
''bootstrap-select/dist/css/bootstrap-select.css'',
''bootstrap-select/dist/js/bootstrap-select.js'',
''bootstrap-datepicker/dist/css/bootstrap-datepicker3.css'',
''font-awesome/css/font-awesome.css''
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin(''vendor.css'');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [''.js''] },
module: {
rules: [
{ test: //.(gif|png|woff|woff2|eot|ttf|svg)(/?|$)/, use: ''url-loader?limit=100000'' }
]
},
output: {
publicPath: ''dist/'',
filename: ''[name].js'',
library: ''[name]_[hash]''
},
plugins: [
new webpack.ProvidePlugin({ $: ''jquery'', jQuery: ''jquery'' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(//@angular/b.*/b(bundles|linker)/, path.join(__dirname, ''./ClientApp'')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(//|//)core(//|//)@angular/, path.join(__dirname, ''./ClientApp'')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, ''wwwroot'', ''dist'') },
module: {
rules: [
{ test: //.css(/?|$)/, use: extractCSS.extract({ use: isDevBuild ? ''css-loader'' : ''css-loader?minimize'' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, ''wwwroot'', ''dist'', ''[name]-manifest.json''),
name: ''[name]_[hash]''
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
return [clientBundleConfig];
}

Answer 1

En la página angular de Github, este problema se discutió y se encontró una solución. https://github.com/angular/angular/issues/20355

Answer 2

Encontré un problema más delgado. Importe el HttpClientModule en su archivo app.module.ts de la siguiente manera:

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import { HttpClientModule } from ''@angular/common/http'';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

Estaba enfrentando el mismo problema, luego en mi app.module.ts actualizo el archivo de esta manera,

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

y en el mismo archivo (app.module.ts) en mi matriz @NgModule imports [] escribí de esta manera,

HttpModule,
HttpClientModule

Answer 4

Me convertí en este error después de inyectar un servicio que utilizaba HTTPClient en una clase. La clase se utilizó nuevamente en el servicio, por lo que creó una dependencia circular. Podría compilar la aplicación con advertencias, pero en la consola del navegador se produjo el error

"¡No hay proveedor para HttpClient! (MyService -> HttpClient)"

y rompió la aplicación

Esto funciona:

import { HttpClient, HttpClientModule, HttpHeaders } from ''@angular/common/http'';
import { MyClass } from "../classes/my.class";
@Injectable()
export class MyService {
constructor(
private http: HttpClient
){
// do something with myClass Instances
}
}
.
.
.
export class MenuItem {
constructor(
){}
}

Esto rompe la aplicación

import { HttpClient, HttpClientModule, HttpHeaders } from ''@angular/common/http'';
import { MyClass } from "../classes/my.class";
@Injectable()
export class MyService {
constructor(
private http: HttpClient
){
// do something with myClass Instances
}
}
.
.
.
import { MyService } from ''../services/my.service'';
export class MyClass {
constructor(
let injector = ReflectiveInjector.resolveAndCreate([MyService]);
this.myService = injector.get(MyService);
){}
}

Después de inyectar MyService en MyClass, recibí la advertencia de dependencia circular. CLI se compiló de todos modos con esta advertencia, pero la aplicación ya no funcionaba y el error se dio en la consola del navegador. Entonces, en mi caso, no tuvo que hacer nada con @NgModule sino con dependencias circulares. Recomiendo resolver las advertencias de nomenclatura entre mayúsculas y minúsculas si el problema persiste.

Answer 5

No ha proporcionado proveedores en su módulo;

importar {HttpModule} desde ''@ angular / http'';

 import { HttpClientModule, HttpClient } from ''@angular/common/http'';
.
.
.
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
FormsModule,
AppRoutingModule
],
providers: [ HttpClientModule, ... ]

http://blog.ninja-squad.com/2017/07/17/http-client-module/

Saludos

Answer 6

Para resolver este problema, HttpClient es el mecanismo de Angular para comunicarse con un servidor remoto a través de HTTP.

Para que HttpClient esté disponible en todas partes de la aplicación,

1. abra el AppModule raíz,

2. importa el HttpClientModule desde @angular/common/http ,

3. agréguelo a la matriz @NgModule.imports .

Agregue lo siguiente a app.module.ts:

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

Después de eso, agregue en la sección de imports:[HttpClientModule, ] como imports:[HttpClientModule, ]

Answer 7

Solo importe el HttpModule y el HttpClientModule únicamente:

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

No es necesario el HttpClient .

Answer 8

También enfrenté un problema similar al hacer los cambios a continuación, funcionó para mí

En app.modules.ts

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

y en la clase de servicio correspondiente

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

el constructor debería verse como a continuación

constructor(private http: HttpClient, private xyz: xyzService) {}

En archivo de prueba

import { HttpClientTestingModule } from ''@angular/common/http/testing''
beforeEach(() => TestBed.configureTestingModule({
imports: [HttpClientTestingModule]
}));

Answer 9

Tuve el mismo problema Después de navegar y luchar con el problema, encontré la solución a continuación

import { HttpModule } from ''@angular/http'';
import { HttpClientModule } from ''@angular/common/http'';
imports: [
HttpModule,
HttpClientModule
]

Importe HttpModule y HttpClientModule en app.module.ts y agréguelo a las importaciones como se mencionó anteriormente.

Answer 10

Tuve un problema similar Para mí, la solución fue importar HttpModule antes del Módulo HttpClient:

import { HttpModule } from ''@angular/http'';
import { HttpClientModule } from ''@angular/common/http'';
.
.
.
imports: [
BrowserModule,
HttpModule,
HttpClientModule
],

Answer 11

agregar HttpModule y HttpClientModule tanto en importaciones como en proveedores en app.module.ts resolvió el problema. importaciones -> import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http"; import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

Answer 12

está recibiendo un error para HttpClient, por lo tanto, falta HttpClientModule para eso.

deberías importarlo en el archivo app.module.ts como este:

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

y mencionarlo en el NgModule Decorator así:

@NgModule({
...
imports:[ HttpClientModule ]
...
})

Si esto no funciona, intente borrar las cookies del navegador e intente reiniciar su servidor. Espero que funcione, estaba recibiendo el mismo error.