angular - headers - No hay proveedor para HttpClient
no provider for httpclient angular 6 (12)
En la página angular de Github, este problema se discutió y se encontró una solución. https://github.com/angular/angular/issues/20355
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];
}
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 { }
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
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.
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
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,
-
abra el
AppModule
raíz, -
importa el
HttpClientModule
desde@angular/common/http
, -
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, ]
Solo importe el
HttpModule
y el
HttpClientModule
únicamente:
import { HttpModule } from ''@angular/http'';
import { HttpClientModule } from ''@angular/common/http'';
No es necesario el
HttpClient
.
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]
}));
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.
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
],
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";
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.