Không có nhà cung cấp nào cho httpClient

Sau khi nâng cấp từ góc 4.4 lên 5.0 và sau khi cập nhật tất cả các HTTPModule và http lên httpClientModule, tôi bắt đầu gặp lỗi này.

Tôi cũng đã thêm httpModule một lần nữa để chắc chắn rằng nó không phải do một số phụ thuộc nhưng nó không giải quyết được vấn đề

Trong app.module, tôi đã thiết lập tất cả chính xác

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

Tôi không biết lỗi này đến từ đâu, hoặc tôi không biết làm thế nào để có được bên trong của nó. Tôi cũng có một cảnh báo (đặt nó bên dưới quá) có thể liên quan của nó.

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)

Tin nhắn cảnh báo:

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

Hành vi hiện tại

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

Môi trường

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

Để giải quyết vấn đề HttpClientnày là cơ chế của Angular để liên lạc với máy chủ từ xa qua HTTP.

Để HttpClientcó sẵn ở mọi nơi trong ứng dụng,

1. mở gốc AppModule,

2. nhập khẩu HttpClientModuletừ @angular/common/http,

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

3. thêm nó vào @NgModule.importsmảng

   imports:[HttpClientModule, ]

Bạn chưa cung cấp nhà cung cấp trong mô-đun của mình:

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

Sử dụng httpClient trong các thử nghiệm

Bạn sẽ cần thêm HttpClientTestingModulecấu hình TestBed khi chạy ng testvà gặp lỗi "Không có nhà cung cấp cho HttpClient":

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

Bạn đang gặp lỗi đối với HttpClient, vì vậy, bạn đang thiếu HTTPClientModule.

Bạn nên nhập nó trong tệp app.module.ts như thế này -

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

và đề cập đến nó trong NgModule Decorator như thế này -

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

Nếu điều này thậm chí không hoạt động, hãy thử xóa cookie của trình duyệt và thử khởi động lại máy chủ của bạn. Hy vọng nó có thể hoạt động, tôi đã nhận được cùng một lỗi.

Tôi đã có vấn đề tương tự. Sau khi duyệt và đấu tranh với vấn đề tìm thấy giải pháp dưới đây

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

imports: [
  HttpModule,
  HttpClientModule
]

Nhập HttpModulevà HttpClientModuletrong app.module.ts và thêm vào các mục nhập như đã đề cập ở trên.

Tôi cũng đã đối mặt với vấn đề tương tự bằng cách thực hiện các thay đổi dưới đây, nó đã làm việc cho tôi

Trong app.modules.ts

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

và trong lớp dịch vụ tương ứng

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

constructor sẽ trông như dưới đây

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

Trong tập tin thử nghiệm

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

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

Tôi đã phải đối mặt với cùng một vấn đề, điều buồn cười là tôi đã mở hai dự án cùng một lúc, tôi đã thay đổi các tệp app.modules.ts sai.

Đầu tiên, hãy kiểm tra xem.

Sau khi thay đổi, thêm mã sau vào tệp app.module.ts

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

Sau đó, thêm phần sau vào mảng nhập trong tệp app.module.ts

  imports: [
    HttpClientModule,....
  ],

Bây giờ bạn sẽ ổn thôi!

Tôi đã gặp lỗi này sau khi tiêm Dịch vụ sử dụng HTTPClient vào một lớp. Lớp này một lần nữa được sử dụng trong dịch vụ, vì vậy nó tạo ra một phụ thuộc vòng tròn. Tôi có thể biên dịch ứng dụng với các cảnh báo, nhưng trong bảng điều khiển trình duyệt đã xảy ra lỗi

"Không có nhà cung cấp nào cho HttpClient! (MyService -> HttpClient)"

và nó đã phá vỡ ứng dụng.

Những công việc này:

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(

  ){}
}

Điều này phá vỡ ứng dụng

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

Sau khi tiêm MyService vào MyClass, tôi nhận được cảnh báo phụ thuộc vòng tròn. CLI dù sao cũng đã biên dịch với cảnh báo này nhưng ứng dụng không hoạt động nữa và lỗi được đưa ra trong bảng điều khiển trình duyệt. Vì vậy, trong trường hợp của tôi, nó đã không phải làm bất cứ điều gì với @NgModule nhưng với sự phụ thuộc vòng tròn. Tôi khuyên bạn nên giải quyết các cảnh báo đặt tên nhạy cảm trong trường hợp nếu vấn đề của bạn vẫn còn tồn tại.

Tôi đã phải đối mặt với cùng một vấn đề, sau đó trong app.module.ts tôi đã cập nhật tệp theo cách này,

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

và trong cùng một tệp (app.module.ts) trong mảng nhập khẩu @NgModule [] của tôi, tôi đã viết theo cách này,

HttpModule,
HttpClientModule

Tôi thấy vấn đề mỏng hơn. Vui lòng nhập tệp httpClientModule trong tệp app.module.ts của bạn như sau:

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

Trong trang github góc, vấn đề này đã được thảo luận và tìm ra giải pháp. https://github.com/angular/angular/issues/20355

Thêm HttpModulevà HttpClientModuletrong cả nhập khẩu và nhà cung cấp trong app.module.ts đã giải quyết vấn đề. nhập khẩu ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

Chỉ cần nhập HttpModulevà HttpClientModuleduy nhất:

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

Không cần cho HttpClient.

Tôi đã có vấn đề tương tự. Đối với tôi, cách khắc phục là nhập httpModule trước Mô-đun httpClient:

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

Trong trường hợp của tôi, lỗi xảy ra khi sử dụng dịch vụ từ mô-đun góc nằm trong gói npm, trong đó dịch vụ yêu cầu tiêm HttpClient. Khi cài đặt gói npm, một node_modulesthư mục trùng lặp đã được tạo bên trong thư mục gói do xử lý xung đột phiên bản của npm ( engi-sdk-clientlà mô-đun chứa dịch vụ):

Rõ ràng, sự phụ thuộc vào HttpClientkhông được giải quyết một cách chính xác, vì các vị trí HttpClientModuleđược đưa vào dịch vụ (nằm trong node_modulesthư mục trùng lặp ) và vị trí được chèn vào app.module(chính xácnode_modules ) không khớp.

Tôi cũng đã gặp lỗi này trong các thiết lập khác có chứa một node_modulesthư mục trùng lặp do một npm installcuộc gọi sai .

Thiết lập bị lỗi này cũng dẫn đến ngoại lệ thời gian chạy được mô tả No provider for HttpClient!.

TL; DR; Kiểm tra các node_modulesthư mục trùng lặp , nếu không có giải pháp nào khác hoạt động!

Trong trường hợp của tôi, tôi đã tìm thấy một khi tôi xây dựng lại ứng dụng.

Tôi đã nhập HttpClientModulenhư đã chỉ định trong các bài viết trước nhưng tôi vẫn nhận được lỗi. Tôi đã dừng máy chủ, xây dựng lại ứng dụng ( ng serve) và nó đã hoạt động.

Trong trường hợp của tôi, tôi đã sử dụng một dịch vụ trong một mô-đun phụ (KHÔNG phải là AppModule gốc) và httpClientModule chỉ được nhập trong mô-đun.

Vì vậy, tôi phải sửa đổi phạm vi mặc định của dịch vụ, bằng cách thay đổi 'cung cấp' thành 'bất kỳ' trong trình trang trí @Injectable.

Theo mặc định, nếu bạn sử dụng angular-cli để tạo dịch vụ, 'cung cấp' được đặt thành 'root'.

Hi vọng điêu nay co ich.