wake-up-neo.com

Kein Anbieter für HttpClient

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

Ich habe auch noch einmal HttpModule hinzugefügt, um sicher zu gehen, dass es nicht von einer gewissen Abhängigkeit abhängt, aber es löst das Problem nicht

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 hineinkommt. Ich habe auch eine Warnung (ich stelle es auch weiter unten dar), vielleicht hängt es damit zusammen.



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

Um dieses Problem zu beheben, ist HttpClient der Mechanismus von Angular für die Kommunikation mit einem Remote-Server über HTTP.

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

  1. öffne die Wurzel AppModule,

  2. HttpClientModule aus @angular/common/http importieren,

  3. fügen Sie es dem @NgModule.imports-Array hinzu.

Fügen Sie app.module.ts Folgendes hinzu:

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

Anschließend fügen Sie den Importbereich wie imports:[HttpClientModule, ] hinzu.

319
Manish

Sie haben keine Anbieter in Ihrem Modul bereitgestellt.

{HttpModule} von '@ angle/http' importieren;

    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/

Grüße

91
kmp

sie erhalten einen Fehler für HttpClient, sodass Sie HttpClientModule dafür nicht finden.

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 nicht funktioniert, löschen Sie die Cookies des Browsers und starten Sie den Server neu. Hoffentlich klappt es, ich habe den gleichen Fehler bekommen.

26
Vivek kushwaha

Ich hatte das gleiche Problem. Nach dem Browsen und dem Kämpfen mit Problemen fand sich die Lösung unten 

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

imports: [
  HttpModule,
  HttpClientModule
]

Importieren Sie HttpModule und HttpClientModule in app.module.ts und fügen Sie sie wie oben erwähnt zu den Importen hinzu.

11
Abhilash Ranjan

Ich wurde zu diesem Fehler, nachdem ich einen Service injiziert hatte, der HTTPClient in eine Klasse verwendete. Die Klasse wurde erneut im Service verwendet, sodass eine zirkuläre Abhängigkeit erstellt wurde. Ich könnte 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 Einfügen von MyService in MyClass erhielt ich die zirkuläre Abhängigkeitswarnung. CLI kompilierte trotzdem mit dieser Warnung, 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, aber mit kreisförmigen Depenencys. Ich empfehle, die Warnhinweise zu beachten, bei denen die Groß- und Kleinschreibung beachtet wird, falls das Problem weiterhin besteht.

4
Nils Fett

Ich habe ein schlankeres Problem gefunden. Importieren Sie das HttpClientModule wie folgt in Ihre app.module.ts -Datei:

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

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

3
ddagsan

Importieren Sie nur HttpModule und HttpClientModule:

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

HttpClient ist nicht erforderlich.

2
Ebuka

add HttpModule und HttpClientModule in Importen und Providern in app.module.ts hat das Problem gelöst . Importe -> import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

2
sumit mehra

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

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

ich hatte das gleiche Problem, dann in meinem app.module.ts Ich aktualisiere die Datei auf diese Weise,

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

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

HttpModule,
HttpClientModule
0
Wasey Raza

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

Überprüfen Sie zuerst das.

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 Folgendes zum Import-Array in der Datei app.module.ts hinzu

  imports: [
    HttpClientModule,....
  ],

Jetzt solltest du in Ordnung sein!

0
Achintha Isuru

Ich war auch mit einem ähnlichen Problem konfrontiert, indem ich die folgenden Änderungen durchführte. 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]
  }));
0
Ravishankar