Kein Anbieter für HttpClient

Nach dem Upgrade von Angular 4.4 auf 5.0 und nach dem Aktualisieren aller HttpModule und Http auf HttpClientModule wurde dieser Fehler angezeigt.

Ich habe auch HttpModule erneut hinzugefügt, um sicherzugehen, dass es nicht an einer Abhängigkeit liegt, aber das Problem dadurch nicht behoben wird

In app.module habe ich alles richtig eingestellt

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

Ich weiß nicht, woher dieser Fehler kommt, oder ich habe keine Ahnung, wie ich in ihn eindringen kann. Ich habe auch eine Warnung (setzen Sie es auch unten), vielleicht ist es verwandt.

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)

Warnmeldung:

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

Aktuelles Verhalten

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

Umgebung

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

Um dieses Problem zu beheben, muss HttpClientAngular über HTTP mit einem Remote-Server kommunizieren.

Um HttpClientüberall in der App verfügbar zu machen ,

1. öffne die Wurzel AppModule,

2. importieren Sie die HttpClientModulevon @angular/common/http,

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

3. Fügen Sie es dem @NgModule.importsArray hinzu.

   imports:[HttpClientModule, ]

Sie haben in Ihrem Modul keine Anbieter angegeben:

<strike>import { HttpModule } from '@angular/http';</strike>
import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [ HttpClientModule, ... ]
  // ...
})
export class MyModule { /* ... */ }

Verwenden von HttpClient in Tests

Sie müssen die HttpClientTestingModulezur TestBed-Konfiguration hinzufügen , wenn Sie ng testden Fehler "Kein Anbieter für HttpClient" ausführen und erhalten:

// Http testing module and mocking controller
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

// Other imports
import { TestBed } from '@angular/core/testing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

describe('HttpClient testing', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

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

    // Inject the http service and test controller for each test
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  it('works', () => {
  });
});

Sie erhalten eine Fehlermeldung für HttpClient, daher fehlt Ihnen HttpClientModule.

Sie sollten es wie folgt in die Datei app.module.ts importieren -

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

und erwähne es im NgModule Decorator so -

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

Wenn dies überhaupt nicht funktioniert, löschen Sie die Cookies des Browsers und starten Sie Ihren Server neu. Hoffentlich funktioniert es, ich habe den gleichen Fehler bekommen.

Ich hatte das gleiche Problem. Nach dem Durchsuchen und Kämpfen mit dem Problem fand die folgende Lösung

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

imports: [
  HttpModule,
  HttpClientModule
]

Importieren Sie HttpModuleund HttpClientModulein app.module.ts und fügen Sie die Importe wie oben erwähnt hinzu.

Ich hatte auch ein ähnliches Problem, indem ich die folgenden Änderungen vorgenommen habe. Es hat bei mir funktioniert

In app.modules.ts

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

und in der entsprechenden Serviceklasse

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

Der Konstruktor sollte wie folgt aussehen

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

In der Testdatei

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

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

Ich hatte das gleiche Problem. Das Lustige war, dass ich zwei Projekte gleichzeitig geöffnet hatte. Ich habe die falschen app.modules.ts-Dateien geändert.

Überprüfen Sie dies zuerst.

Fügen Sie nach dieser Änderung den folgenden Code zur Datei app.module.ts hinzu

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

Fügen Sie anschließend dem Import-Array in der Datei app.module.ts Folgendes hinzu

  imports: [
    HttpClientModule,....
  ],

Jetzt solltest du in Ordnung sein!

Ich habe diesen Fehler erhalten, nachdem ich einen Dienst injiziert habe, der HTTPClient in eine Klasse verwendet hat. Die Klasse wurde erneut im Dienst verwendet, sodass eine zirkuläre Abhängigkeit erstellt wurde. Ich konnte die App mit Warnungen kompilieren, aber in der Browserkonsole ist der Fehler aufgetreten

"Kein Anbieter für HttpClient! (MyService -> HttpClient)"

und es brach die App.

Das funktioniert:

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(

  ){}
}

Dies bricht die App

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

Nach dem Injizieren von MyService in MyClass wurde die zirkuläre Abhängigkeitswarnung angezeigt. Die CLI wurde trotzdem mit dieser Warnung kompiliert, aber die App funktionierte nicht mehr und der Fehler wurde in der Browserkonsole angezeigt. In meinem Fall hatte es also nichts mit @NgModule zu tun, sondern mit zirkulären Abhängigkeiten. Ich empfehle, die Groß- und Kleinschreibung zu beachten, wenn Ihr Problem weiterhin besteht.

Ich hatte das gleiche Problem, dann habe ich in meiner app.module.ts die Datei auf diese Weise aktualisiert.

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

und in der gleichen Datei (app.module.ts) in meinem @ NgModule imports [] Array habe ich so geschrieben,

HttpModule,
HttpClientModule

Ich fand ein schlankeres Problem. Bitte importieren Sie das HttpClientModule wie folgt in Ihre Datei app.module.ts:

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

Auf der eckigen Github-Seite wurde dieses Problem diskutiert und eine Lösung gefunden. https://github.com/angular/angular/issues/20355

Hinzufügen HttpModuleund HttpClientModulesowohl bei Importen als auch bei Anbietern in app.module.ts wurde das Problem behoben. Importe ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

Importieren Sie einfach das HttpModuleund das HttpClientModuleeinzige:

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

Keine Notwendigkeit für die HttpClient.

Ich hatte ein ähnliches Problem. Für mich bestand das Update darin, HttpModule vor dem HttpClient-Modul zu importieren:

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

In meinem Fall trat der Fehler auf, wenn ein Dienst von einem Winkelmodul in einem npm-Paket verwendet wurde, für das der Dienst injiziert werden muss HttpClient. Bei der Installation des npm-Pakets wurde node_modulesaufgrund der Versionskonfliktbehandlung von npm ( engi-sdk-clientist das Modul, das den Dienst enthält) ein doppeltes Verzeichnis im Paketverzeichnis erstellt :

Offensichtlich wird die Abhängigkeit von HttpClientnicht korrekt aufgelöst, da die Speicherorte, die HttpClientModulein den Dienst injiziert wurden (sich im doppelten node_modulesVerzeichnis befinden) und die, in app.moduledie injiziert wurde (die richtigen)node_modules ) nicht übereinstimmen.

Ich hatte diesen Fehler auch in anderen Setups, die node_modulesaufgrund eines Fehlers ein doppeltes Verzeichnis enthieltennpm install Aufrufs .

Dieses fehlerhafte Setup führt auch zu der beschriebenen Laufzeitausnahme No provider for HttpClient!.

TL; DR; Suchen Sie nach doppelten node_modulesVerzeichnissen, wenn keine der anderen Lösungen funktioniert!

In meinem Fall habe ich festgestellt, dass es funktioniert hat, nachdem ich die App neu erstellt habe.

Ich hatte das HttpClientModulewie in den vorherigen Beiträgen angegeben importiert , aber ich bekam immer noch den Fehler. Ich habe den Server gestoppt, die App ( ng serve) neu erstellt und es hat funktioniert.

In meinem Fall habe ich einen Dienst in einem Untermodul verwendet (NICHT das Root-AppModule), und das HttpClientModule wurde nur in das Modul importiert.

Daher muss ich den Standardbereich des Dienstes ändern, indem ich im @Injectable-Dekorator 'Bereitgestellt' in 'Beliebig' ändere.

Wenn Sie zum Generieren des Dienstes angle-cli verwenden, wurde standardmäßig "Bereitgestellt" auf "Root" gesetzt.

Hoffe das hilft.