web-dev-qa-db-fra.com

Aucun fournisseur pour HttpClient

Après la mise à niveau d'angulaire 4.4 à 5.0 et après la mise à jour de tous les HttpModule et Http vers HttpClientModule, j'ai commencé à avoir cette erreur. 

J'ai également ajouté à nouveau HttpModule pour être sûr que ce n'est pas dû à une dépendance, mais cela ne résout pas le problème.

dans app.module, j'ai tout réglé correctement



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

Je ne sais pas d'où vient cette erreur, ou je n'ai aucune idée de la façon de l'intérioriser. J'ai aussi un avertissement (le mettre ci-dessous aussi) peut-être son connexe.



    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)

Message d'alerte:



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

Comportement actuel

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

Environnement


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];
    }
angular
153
Himmet Yelekin

Pour résoudre ce problème, HttpClient est le mécanisme utilisé par Angular pour communiquer avec un serveur distant via HTTP.

Pour rendre HttpClient disponible partout dans l'application,

  1. ouvrez la racine AppModule,

  2. importer la HttpClientModule de @angular/common/http,

  3. ajoutez-le au tableau @NgModule.imports.

Ajoutez les éléments suivants à app.module.ts:

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

Après cela, ajoutez dans la section d'importation comme imports:[HttpClientModule, ]

319
Manish

Vous n'avez pas fourni de fournisseurs dans votre module;

importer {HttpModule} depuis '@ 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/

Cordialement

91
kmp

vous obtenez une erreur pour HttpClient donc, il vous manque HttpClientModule pour cela.

vous devriez l'importer dans le fichier app.module.ts comme ceci -

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

et en parler dans le décorateur NgModule comme ceci -

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

si cela ne fonctionne pas, essayez d'effacer les cookies du navigateur et essayez de redémarrer votre serveur. J'espère que cela fonctionnera peut-être, je reçois la même erreur.

26
Vivek kushwaha

J'ai eu le même problème. Après avoir parcouru et lutté avec le problème trouvé la solution ci-dessous 

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

imports: [
  HttpModule,
  HttpClientModule
]

Importez HttpModule et HttpClientModule dans app.module.ts et ajoutez-les aux importations comme indiqué ci-dessus.

11
Abhilash Ranjan

Je suis devenu cette erreur après avoir injecté un service utilisant HTTPClient dans une classe. La classe a de nouveau été utilisée dans le service, elle a donc créé une dépendance circulaire. Je pourrais compiler l'application avec des avertissements, mais l'erreur survenue dans la console du navigateur 

"Aucun fournisseur pour HttpClient! (MyService -> HttpClient)"

et il a cassé l'application.

Cela marche:

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(

  ){}
}

Cela casse l'application

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);
  ){}
}

Après avoir injecté MyService dans MyClass, j'ai reçu un avertissement de dépendance circulaire. La CLI a quand même compilé avec cet avertissement, mais l'application ne fonctionne plus et l'erreur a été générée dans la console du navigateur. Donc, dans mon cas, il n’a rien eu à faire avec @NgModule mais avec des dépenencys circulaires. Je recommande de résoudre les avertissements de dénomination sensibles à la casse si votre problème existe toujours.

4
Nils Fett

J'ai trouvé le problème plus mince. Veuillez importer le HttpClientModule dans votre fichier app.module.ts comme suit:

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 { }
3
AngularJS Tutorials angularjst

Dans la page github angulaire, ce problème a été discuté et sa solution trouvée. https://github.com/angular/angular/issues/20355

3
ddagsan

Importez seulement la HttpModule et la HttpClientModule uniquement:

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

Pas besoin de la HttpClient.

2
Ebuka

add HttpModule et HttpClientModule dans les importations et les fournisseurs dans app.module.ts ont résolu le problème . imports -> import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

2
sumit mehra

J'ai eu le même problème. Pour moi, le correctif consistait à importer HttpModule avant le module HttpClient:

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

Je faisais face au même problème. Le plus drôle, c’est que j’ai ouvert deux projets simultanément, j’ai modifié les mauvais fichiers app.modules.ts.

D'abord, vérifiez ça.

Après cette modification, ajoutez le code suivant au fichier app.module.ts

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

après cela, ajoutez ce qui suit au tableau des importations dans le fichier app.module.ts

  imports: [
    HttpClientModule,....
  ],

Maintenant, ça devrait aller!

0
Achintha Isuru

Je faisais également face à un problème similaire en faisant les changements ci-dessous, cela a fonctionné pour moi

Dans app.modules.ts

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

et dans la classe de service correspondante

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

constructeur devrait ressembler à comme ci-dessous

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

Dans le fichier de test

import { HttpClientTestingModule } from '@angular/common/http/testing'

  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  }));
0
Ravishankar