HttpClient için sağlayıcı yok

Açısal 4.4'ten 5.0'a yükselttikten ve tüm HttpModule ve Http'yi HttpClientModule'e güncelledikten sonra bu hatayı almaya başladım.

Ayrıca bazı bağımlılık nedeniyle olmadığından emin olmak için HttpModule'u tekrar ekledim, ancak sorunu çözmedi

App.module'da hepsini doğru şekilde ayarladım

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

Bu hatanın nereden geldiğini bilmiyorum ya da nasıl içtiğine dair hiçbir fikrim yok. Ben de onunla ilgili bir uyarı (aşağıya da koymak) belki var.

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)

Uyarı mesajı:

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

Mevcut davranış

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

çevre

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

Bu sorunu çözmek HttpClientiçin Angular'ın HTTP üzerinden uzak bir sunucuyla iletişim kurma mekanizmasıdır.

HttpClientUygulamanın her yerinde kullanılabilir olmasını sağlamak için,

1. kökü açın AppModule,

2. içe HttpClientModuledan @angular/common/http,

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

3. @NgModule.importsdiziye ekleyin .

   imports:[HttpClientModule, ]

Modülünüzde sağlayıcı sağlamadınız:

<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 { /* ... */ }

Testlerde HttpClient Kullanımı

HttpClientTestingModuleÇalışırken ng testve "HttpClient için sağlayıcı yok" hatasını alırken TestBed yapılandırmasına eklemeniz gerekir :

// 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', () => {
  });
});

HttpClient için hata alıyorsanız, bunun için HttpClientModule eksik.

Bunun gibi app.module.ts dosyasına aktarmalısınız -

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

ve NgModule Dekoratörü'nde şöyle bahsedin -

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

Bu işe yaramazsa, tarayıcının çerezlerini temizlemeyi ve sunucunuzu yeniden başlatmayı deneyin. Umarım işe yarayabilir, aynı hatayı alıyordum.

Ben de aynı sorunu yaşadım. Taramadan sonra ve sorunla mücadele ettikten sonra aşağıdaki çözümü buldum

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

imports: [
  HttpModule,
  HttpClientModule
]

App.module.ts dosyasını içe aktarın HttpModuleve HttpClientModuleyukarıda belirtildiği gibi içe aktarın .

Ben de aşağıdaki değişiklikleri yaparak benzer bir sorunla karşı karşıya kaldım, bu benim için çalıştı

App.modules.ts içinde

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

ve ilgili servis sınıfında

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

yapıcı aşağıdaki gibi görünmelidir

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

Test dosyasında

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

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

Aynı sorunla karşı karşıya kaldım, komik olan iki projenin aynı anda açılmış olmasıydı, yanlış app.modules.ts dosyalarını değiştirdim.

İlk olarak, kontrol edin.

Bu değişiklikten sonra app.module.ts dosyasına aşağıdaki kodu ekleyin

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

Bundan sonra app.module.ts dosyasındaki imports dizisine aşağıdakileri ekleyin

  imports: [
    HttpClientModule,....
  ],

Şimdi iyi olmalısın!

HTTPClient bir sınıfa kullanılan bir hizmet enjekte sonra bu hatayı aldım. Sınıf yine hizmette kullanıldı, bu yüzden dairesel bir bağımlılık yarattı. Uygulamayı uyarılarla derleyebilirim, ancak tarayıcı konsolunda hata oluştu

"HttpClient için sağlayıcı yok! (MyService -> HttpClient)"

ve uygulamayı kırdı.

Bu çalışıyor:

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(

  ){}
}

Bu uygulamayı sonlandırıyor

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

MyService'i MyClass'a enjekte ettikten sonra dairesel bağımlılık uyarısı aldım. CLI yine de bu uyarı ile derlendi, ancak uygulama artık çalışmadı ve hata tarayıcı konsolunda verildi. Yani benim durumumda @NgModule ile bir şey yapmak zorunda değildi ama dairesel bağımlılıklar vardı. Sorununuz devam ediyorsa, büyük / küçük harfe duyarlı adlandırma uyarılarını çözmenizi öneririz.

Aynı sorunla karşılaşıyordum, sonra app.module.ts dosyamı bu şekilde güncelledim,

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

ve aynı dosyada (app.module.ts) benim de @NgModule ithalatı [] dizi Ben, bu şekilde yazdım

HttpModule,
HttpClientModule

Slimier problemi buldum. Lütfen app.module.ts dosyanızdaki HttpClientModule dosyasını aşağıdaki gibi içe aktarın:

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

Açısal github sayfasında bu sorun tartışıldı ve çözüm bulundu. https://github.com/angular/angular/issues/20355

Add HttpModuleve HttpClientModuleapp.module.ts hem ithalatçı ve sağlayıcılarda sorunu çözdü. ithalat ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

Sadece HttpModuleve sadece içe aktarın HttpClientModule:

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

Gerek yok HttpClient.

Benzer bir sorun yaşadım. Benim için düzeltme, HttpClient Modülünden önce HttpModule'u içe aktarmaktı:

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

Benim durumumda, bir npm paketinde bulunan ve hizmetin enjeksiyon gerektirdiği bir açısal modülden bir hizmet kullanılırken hata oluştu HttpClient. Npm paketini yüklerken, npm'in sürüm çakışması işlenmesinode_modules nedeniyle paket dizininin içinde yinelenen bir dizin oluşturuldu ( hizmeti içeren modüldür):engi-sdk-client

Açıkçası, bağımlılık için HttpClientyerler olarak doğru çözülmediği HttpClientModule(yinelenen can hizmete enjekte node_modulesdizinde) ve bir enjekte app.moduledoğru (node_modules ) eşleşmediğinden .

Ayrıca bu hata node_modulesyanlış nedeniyle yinelenen bir dizin içeren diğer kurulumlarda yaşadımnpm install çağrı .

Bu hatalı kurulum da açıklanan çalışma zamanı özel durumuna neden olur No provider for HttpClient!.

TL; DR; node_modulesDiğer çözümlerin hiçbiri işe yaramıyorsa, yinelenen dizinleri kontrol edin !

Benim durumumda çalıştı uygulaması yeniden bir kez buldum.

HttpClientModuleÖnceki yazılarda belirtildiği gibi içe aktarmıştım ama hala hatayı alıyordum. Sunucuyu durdurdum, uygulamayı yeniden oluşturdum ( ng serve) ve işe yaradı.

Benim durumumda, bir alt modülde (kök AppModule değil) bir hizmet kullanıyordum ve HttpClientModule yalnızca modülde içe aktarıldı.

Bu nedenle, @Injectable dekoratörünün 'givenIn' değerini 'any' olarak değiştirerek hizmetin varsayılan kapsamını değiştirmem gerekiyor.

Varsayılan olarak, hizmeti oluşturmak için açısal-cli kullanırsanız, 'sağlananIn' 'kök' olarak ayarlanmıştır.

Bu yardımcı olur umarım.