Tidak ada penyedia untuk HttpClient


364

Setelah memutakhirkan dari sudut 4.4 ke 5.0 dan setelah memperbarui semua HttpModule dan Http ke HttpClientModule saya mulai mendapatkan kesalahan ini.

Saya juga menambahkan HttpModule lagi untuk memastikan itu bukan karena ketergantungan tetapi tidak menyelesaikan masalah

Di app.module, saya sudah mengatur semuanya dengan benar

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

Saya tidak tahu dari mana datangnya kesalahan ini, atau saya tidak tahu bagaimana cara memperbaikinya. Saya juga punya peringatan (letakkan di bawah juga) mungkin itu terkait.

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)

Pesan peringatan:

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

Perilaku saat ini

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

Lingkungan Hidup

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

apakah Anda menggunakan angular2-jwt?
Sajeetharan


apakah ini proyek sudut-cli? bisa tolong tambahkan package.json
Jota.Toledo

1
Tidak, ini adalah proyek .core 2.0 dan bekerja hingga sudut 5 dan peningkatan httpclientmodule. Dan tautan di bawah ini juga sama dengan jawaban di atas tetapi tidak membantu karena httpclient sudah ada dalam konstruktor yang digunakan.
Himmet Yelekin

1
Tidak, ini bukan duplikat, mereka berbeda dan jawabannya sudah benar di sisi saya dan masalah yang sama terjadi bahkan saya memiliki file tes dan tanpa file tes
Himmet Yelekin

Jawaban:


661

Untuk mengatasi masalah ini HttpClientadalah mekanisme Angular untuk berkomunikasi dengan server jauh melalui HTTP.

Agar HttpClienttersedia di mana saja di aplikasi,

  1. buka root AppModule,

  2. mengimpor HttpClientModuledari @angular/common/http,

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

  3. tambahkan ke @NgModule.importsarray.

    imports:[HttpClientModule, ]


1
Terima kasih! Anda menyelamatkan saya dari menghabiskan lebih banyak waktu untuk masalah itu. Jempolan!
Saxophonist

Ini memperbaikinya untuk saya. Saya telah menempatkan milik saya di deklarasi secara tidak sengaja.
tangkap 22

5
tidak berfungsi saat menggunakan sub modul.
user3044394

1
Impor hanya di app.module, dan tidak di tempat lain, tidak dalam sub modul
Vardaan Tyagi

1
Sayang sekali bahwa OP belum mengambil satu detik untuk menerima ini sebagai jawabannya ...
Romeo Sierra

140

Anda belum menyediakan penyedia dalam modul Anda:

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

Menggunakan HttpClient dalam Tes

Anda harus menambahkan HttpClientTestingModuleke konfigurasi TestBed saat menjalankan ng testdan mendapatkan kesalahan "Tidak ada penyedia untuk 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', () => {
  });
});

3
tidak, ini tidak mendokumentasikan bahwa httpclientmodule harus ditambahkan ke daftar penyedia. Tapi bagaimanapun, saya mencoba jawaban Anda juga untuk memastikan tetapi seperti yang diharapkan kesalahan yang sama berlanjut setelah menambahkannya ke daftar penyedia.
Himmet Yelekin

17
Saya kira "HttpClientModule" harus ditambahkan ke impor, bukan penyedia
Musa Haidari

30
Saya harus menambahkan imports: [HttpClientTestingModule]ke saya TestBed.configureTestingModuleuntuk menyingkirkan kesalahan ini dalam tes .
Yaroslav Stavnichiy

Komentar @YaroslavStavnichiy adalah jawaban untuk masalah saya dengan ini di Jasmine.
E. Maggini

10
import {HttpClientTestingModule, HttpTestingController} dari '@ angular / common / http / testing';
NitinSingh

44

Anda mendapatkan kesalahan untuk HttpClient jadi, Anda kehilangan HttpClientModule untuk itu.

Anda harus mengimpornya di file app.module.ts seperti ini -

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

dan sebutkan di Dekorator NgModule seperti ini -

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

Jika ini bahkan tidak berhasil, coba hapus cookie dari browser dan coba mulai ulang server Anda. Semoga ini berhasil, saya mendapatkan kesalahan yang sama.


Menambahkan HttpClientModule ke impor memecahkan masalah, karena nilainya tidak digunakan, Terima kasih @Vivek kushwaha
vidur punj

27

Saya memiliki masalah yang sama. Setelah menjelajahi dan berjuang dengan masalah, temukan solusi di bawah ini

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

imports: [
  HttpModule,
  HttpClientModule
]

Impor HttpModuledan HttpClientModuledi app.module.ts dan tambahkan ke impor seperti yang disebutkan di atas.


6
menggunakan HttpModule (usang) dan HttpClientModule (menggantikan HttpModule) tidak masuk akal
themenace

2
Iya. Cukup impor HttpClientModule.
Nir Lanka

19

Saya juga menghadapi masalah serupa dengan melakukan perubahan di bawah, itu berhasil untuk saya

Di app.modules.ts

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

dan di kelas layanan yang sesuai

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

konstruktor akan terlihat seperti di bawah ini

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

Dalam file uji

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

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

Mengimpor HttpClientModule di app.module.ts tidak cukup untuk menyelesaikan masalah, tetapi saya tetap mendukung Anda untuk mengingatkan saya apa yang saya lewatkan.
Auguste

Mengimpor HttpClientTestingModule memecahkan masalah dalam spesifikasi
Ashokan Sivapragasam

12

Saya menghadapi masalah yang sama, lucunya saya memiliki dua proyek dibuka secara bersamaan, saya telah mengubah file app.modules.ts yang salah.

Pertama, periksa itu.

Setelah perubahan itu tambahkan kode berikut ke file app.module.ts

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

Setelah itu tambahkan yang berikut ke array impor di file app.module.ts

  imports: [
    HttpClientModule,....
  ],

Sekarang kamu harus baik-baik saja!


9

Saya mendapatkan kesalahan ini setelah menyuntikkan Layanan yang menggunakan HTTPClient ke dalam kelas. Kelas itu lagi digunakan dalam layanan, sehingga menciptakan ketergantungan melingkar. Saya bisa mengkompilasi aplikasi dengan peringatan, tetapi di konsol browser kesalahan terjadi

"Tidak ada penyedia untuk HttpClient! (MyService -> HttpClient)"

dan itu merusak aplikasi.

Ini bekerja:

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(

  ){}
}

Ini merusak aplikasi

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

Setelah menyuntikkan MyService di MyClass saya mendapat peringatan ketergantungan melingkar. CLI tetap dikompilasi dengan peringatan ini tetapi aplikasi tidak berfungsi lagi dan kesalahan diberikan di konsol browser. Jadi dalam kasus saya itu tidak harus melakukan apa pun dengan @NgModule tetapi dengan dependensi melingkar. Saya sarankan untuk menyelesaikan peringatan penamaan yang sensitif terhadap kasus jika masalah Anda masih ada.


8

Saya menghadapi masalah yang sama, kemudian di app.module.ts saya memperbarui file dengan cara ini,

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

dan di file yang sama (app.module.ts) di file saya array @NgModule impor [] saya menulis seperti ini,

HttpModule,
HttpClientModule

6

Saya menemukan masalah lebih ramping. Silakan impor HttpClientModule di file app.module.ts Anda sebagai berikut:

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


4

Tambahkan HttpModuledan HttpClientModuleimpor dan penyedia di app.module.ts memecahkan masalah. impor ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";


Saya memiliki problema yang sama. Saya melihat di App_modules dan saya tidak memiliki direktori http di path @angular -> umum saya menjalankan "npm update" Saya bekerja dengan Windows 8.i, nodejs versión 9.7.1. Saya sedang membaca buku Valerio de Sanctis ... apa itu? Terima kasih
Diego

jalankan saja 'npm i' dengan mode administrator.
sumit mehra

3

Cukup impor HttpModuledan HttpClientModulesatu - satunya:

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

Tidak perlu untuk HttpClient.


3

Saya punya masalah serupa. Bagi saya perbaikannya adalah mengimpor HttpModule sebelum HttpClient Module:

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

1

Dalam kasus saya, kesalahan terjadi ketika menggunakan layanan dari modul sudut yang terletak di paket npm, di mana layanan memerlukan injeksi HttpClient. Saat memasang paket npm, node_modulesdirektori duplikat dibuat di dalam direktori paket karena penanganan konflik versi dari npm ( engi-sdk-clientadalah modul yang berisi layanan):

masukkan deskripsi gambar di sini

Jelas, ketergantungan untuk HttpClienttidak diselesaikan dengan benar, karena lokasi yang HttpClientModuledisuntikkan ke layanan (tinggal di node_modulesdirektori duplikat ) dan yang disuntikkan di app.module(yang benarnode_modules ) tidak cocok.

Saya juga mengalami kesalahan ini dalam pengaturan lain yang berisi node_modulesdirektori duplikat karena npm installpanggilan yang salah .

Pengaturan yang rusak ini juga mengarah ke pengecualian runtime yang dijelaskan No provider for HttpClient!.

TL; DR; Periksa node_modulesdirektori duplikat , jika tidak ada solusi lain yang berfungsi!


0

Dalam kasus saya, saya menemukan begitu saya membangun kembali aplikasi itu berfungsi.

Saya telah mengimpor HttpClientModuleseperti yang ditentukan dalam posting sebelumnya tetapi saya masih mendapatkan kesalahan. Saya menghentikan server, membangun kembali aplikasi ( ng serve) dan itu berhasil.


0

Dalam kasus saya, saya menggunakan layanan dalam sub modul (BUKAN root AppModule), dan HttpClientModule hanya diimpor dalam modul.

Jadi saya harus memodifikasi ruang lingkup standar layanan, dengan mengubah 'asalkan' menjadi 'apa pun' di dekorator @Injectable.

Secara default, jika Anda menggunakan angular-cli untuk menghasilkan layanan, 'yang disediakan' diatur ke 'root'.

Semoga ini membantu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.