Setelah upgrade dari sudut 4.4 5.0 dan setelah memperbarui semua HttpModule dan Http untuk HttpClientModule saya mulai mendapatkan kesalahan ini.
Saya juga menambahkan HttpModule lagi untuk memastikan tidak karena beberapa ketergantungan tapi itu doesn't memecahkan masalah
Di aplikasi.modul, saya memiliki semua diatur dengan benar
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
.
.
.
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
HttpModule,
BrowserAnimationsModule,
FormsModule,
AppRoutingModule,
.
.
.
Saya don't tahu di mana kesalahan ini akan datang, atau saya tidak memiliki petunjuk bagaimana untuk mendapatkan batin itu. Saya juga memiliki peringatan (taruh di bawah juga) mungkin 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
StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: Tidak ada penyedia untuk HttpClient!
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];
}
Untuk mengatasi masalah ini HttpClient
adalah Sudut's mekanisme untuk berkomunikasi dengan remote server melalui HTTP.
Untuk membuat HttpClient
tersedia di mana saja di aplikasi,
buka root AppModule
,
impor HttpClientModule
dari @sudut/umum/http
,
tambahkan ke @NgModule.impor
array.
Tambahkan baris berikut ke aplikasi.modul.ts:
import { HttpClientModule } from '@angular/common/http';
Setelah itu tambahkan di bagian impor seperti impor:[HttpClientModule, ]`
Anda belum disediakan 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 { /* ... */ }
Anda akan perlu untuk menambahkan HttpClientTestingModule
untuk TestBed konfigurasi saat menjalankan ng test
dan mendapatkan "Tidak ada penyedia untuk HttpClient" kesalahan:
// 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', () => {
});
});
Anda mendapatkan kesalahan untuk HttpClient jadi, anda yang hilang HttpClientModule untuk itu.
Anda harus impor dalam aplikasi.modul.ts file seperti ini -
import { HttpClientModule } from '@angular/common/http';
dan menyebutkan dalam NgModule Dekorator seperti ini -
@NgModule({
...
imports:[ HttpClientModule ]
...
})
Jika ini bahkan doesn't bekerja mencoba membersihkan cookie browser dan coba restart server anda. Mudah-mudahan bisa bekerja, saya mendapatkan kesalahan yang sama.
Aku punya masalah yang sama. Setelah browsing dan berjuang dengan masalah menemukan solusi di bawah ini
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
imports: [
HttpModule,
HttpClientModule
]
Impor HttpModule
dan HttpClientModule
di app.modul.ts dan tambahkan ke dalam impor seperti yang disebutkan di atas.
Saya juga menghadapi masalah yang sama dengan melakukan hal di bawah ini perubahan, itu bekerja untuk saya
Di aplikasi.modul.ts
import {HttpClientModule} from '@angular/common/http'
dan di kelas layanan yang sesuai
import { HttpClient } from '@angular/common/http'
constructor akan terlihat seperti di bawah ini
constructor(private http: HttpClient, private xyz: xyzService) {}
Dalam tes berkas
import { HttpClientTestingModule } from '@angular/common/http/testing'
beforeEach(() => TestBed.configureTestingModule({
imports: [HttpClientTestingModule]
}));
Saya menjadi kesalahan ini setelah menyuntikkan sebuah Layanan yang digunakan HTTPClient ke kelas. Kelas ini digunakan lagi dalam pelayanan, sehingga menciptakan ketergantungan melingkar. Aku bisa menyusun aplikasi dengan peringatan, tapi di konsol browser kesalahan terjadi
"Tidak ada penyedia untuk HttpClient! (MyService -> HttpClient)"
dan itu pecah app.
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 istirahat 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 aku punya ketergantungan melingkar peringatan. CLI disusun pula dengan peringatan ini, tetapi aplikasi tidak bekerja lagi dan kesalahan itu diberikan di konsol browser. Jadi dalam kasus saya itu tidak't harus melakukan apa-apa dengan @NgModule tapi dengan dependensi melingkar. Saya sarankan untuk memecahkan kasus sensitif penamaan peringatan jika masalah anda masih ada.
Saya menghadapi masalah yang sama, hal yang lucu adalah saya memiliki dua proyek dibuka secara bersamaan, saya telah mengubah aplikasi yang salah.modul.file ts.
Pertama, periksa bahwa.
Setelah perubahan itu tambahkan kode berikut ke app.modul.ts file
import { HttpClientModule } from '@angular/common/http';
Setelah itu tambahkan kode berikut untuk impor menginap di app.modul.ts file
imports: [
HttpClientModule,....
],
Sekarang anda harus ok!
Saya menemukan slimier masalah. Mohon impor HttpClientModule di aplikasi anda.modul.ts file 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 { }
Tambahkan HttpModule
dan HttpClientModule
di kedua impor dan penyedia dalam aplikasi.modul.ts memecahkan masalah.
impor -> impor {HttpModule} dari "@sudut/http"; impor {HttpClientModule} dari "@sudut/umum/http";
Aku punya masalah yang sama. Bagi saya perbaikan itu untuk mengimpor HttpModule sebelum HttpClient Modul:
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
.
.
.
imports: [
BrowserModule,
HttpModule,
HttpClientModule
],
Saya menghadapi masalah yang sama, maka saya app.modul.ts aku diperbarui file dengan cara ini,
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
dan di file yang sama (app.modul.ts) ku @NgModule impor[]array aku menulis dengan cara ini,
HttpModule,
HttpClientModule