HttpClient के लिए कोई प्रदाता नहीं

Question

कोणीय 4.4 से 5.0 में अपग्रेड करने और HttpModule और Http से HttpClientModule पर अपडेट करने के बाद मुझे यह त्रुटि मिलने लगी।

मैंने HttpModule को फिर से जोड़ा है यह सुनिश्चित करने के लिए कि यह कुछ निर्भरता के कारण नहीं है लेकिन यह समस्या को हल नहीं करता है

App.module में, मेरे पास सभी सही तरीके से सेट हैं

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

मुझे नहीं पता कि यह त्रुटि कहां से आ रही है, या मुझे इस बारे में कोई सुराग नहीं है कि इसे कैसे प्राप्त किया जाए। मेरे पास एक चेतावनी भी है (इसे नीचे भी डालें) शायद इससे संबंधित हो।

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)

चेतावनी संदेश:

./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: No provider for 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];
}

Comments

क्या आप कोणीय 2-jwt का उपयोग कर रहे हैं?

— सजेतीहरण

stackoverflow.com/a/45129865/7018464

— डेविड मॉर्च

क्या यह कोणीय-क्ली परियोजना है? क्या आप कृपया अपना पैकेज जोड़ सकते हैं।

— Json

नहीं, इसका एक .कोर 2.0 प्रोजेक्ट और यह कोणीय 5 और httpclientmodule अपग्रेड तक काम कर रहा था। और नीचे दिए गए लिंक भी उपरोक्त उत्तर के साथ समान हैं, लेकिन यह मदद नहीं करता है क्योंकि httpclient पहले से ही निर्माणकर्ताओं में है जहां इसका उपयोग किया गया है।

— हिमेट येलकिन

नहीं इसकी कोई डुप्लिकेट नहीं है वे अलग हैं और इसका जवाब पहले से ही मेरी तरफ से सही है और एक ही समस्या होती है यहां तक ​​कि मेरे पास एक परीक्षण फ़ाइल है और एक परीक्षण फ़ाइल के बिना

— हिमेट येलेकिन

Answer 1

इस समस्या को हल करने के HttpClientलिए HTTP पर दूरस्थ सर्वर के साथ संचार के लिए कोणीय का तंत्र है।

HttpClientएप्लिकेशन में हर जगह उपलब्ध कराने के लिए ,

1. रूट खोलें AppModule,

2. आयात HttpClientModuleसे @angular/common/http,

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

3. इसे @NgModule.importsसरणी में जोड़ें ।

   imports:[HttpClientModule, ]

Comments

धन्यवाद! आपने मुझे उस मुद्दे पर अधिक समय बिताने से बचाया। थम्स अप!

— सैक्सोफॉनिस्ट

इसने मेरे लिए इसे ठीक कर दिया। मैंने दुर्घटना से घोषणाओं में अपना योगदान दिया था।

— कैच 22

उप मॉड्यूल का उपयोग करते समय काम नहीं करता है।

— user3044394

इसे केवल app.module में आयात करें, और कहीं नहीं, उप मॉड्यूल में नहीं

— वरदान त्यागी

बहुत बुरा है कि ओपी ने इसे स्वीकार करने के लिए एक सेकंड नहीं लिया है ...

— रोमियो सिएरा

Answer 2

आपने अपने मॉड्यूल में प्रदाता नहीं दिए हैं:

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

टेस्ट में HttpClient का उपयोग करना

"HttpClient के लिए कोई प्रदाता नहीं" त्रुटि होने पर आपको HttpClientTestingModuleटेस्टबेड कॉन्फ़िगरेशन में जोड़ने की आवश्यकता होगी ng test:

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

Comments

नहीं, यह प्रमाणित नहीं है कि httpclientmodule को प्रदाताओं की सूची में जोड़ा जाना चाहिए। लेकिन वैसे भी, मैंने आपके उत्तर को सुनिश्चित करने की कोशिश की, लेकिन जैसा कि उम्मीद थी कि प्रदाताओं की सूची में इसे जोड़ने के बाद भी वही त्रुटि जारी है।

— हिमतेल येलकिन

मुझे लगता है कि "HttpClientModule" को आयातों में जोड़ा जाना चाहिए, प्रदाताओं से नहीं

— मुसा हैदरी

परीक्षणों में इस त्रुटि से छुटकारा पाने के imports: [HttpClientTestingModule]लिए मुझे अपने साथ जोड़ना पड़ा । TestBed.configureTestingModule

— यारोस्लाव स्टवानिच

@YaroslavStavnichiy टिप्पणी जैस्मीन में इसके साथ मेरी समस्या का जवाब था।

— ई। मगिनी

'{कोणीय / आम / http / परीक्षण' से आयात {HttpClientTestingModule, HttpTestingController};

— नितिनसिंह

Answer 3

आपको HttpClient के लिए त्रुटि मिल रही है, तो आप उसके लिए HttpClientModule याद कर रहे हैं।

आपको इसे app.module.ts फ़ाइल में इस तरह आयात करना चाहिए -

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

और यह इस तरह NgModule डेकोरेटर में उल्लेख -

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

यदि यह भी ब्राउज़र के कुकीज़ को साफ़ करने का प्रयास नहीं करता है और आपके सर्वर को पुनः आरंभ करने का प्रयास करता है। उम्मीद है कि यह काम कर सकता है, मुझे वही त्रुटि मिल रही थी।

Comments

आयात में HttpClientModule को जोड़ने से समस्या हल हो गई, क्योंकि इसके मूल्य का उपयोग नहीं किया गया था, धन्यवाद @Vivek कुशवाहा

— vidur punj

Answer 4

मेरा भी यही मुद्दा था। ब्राउज़िंग और समस्या से जूझने के बाद नीचे दिए गए समाधान को पाया

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

imports: [
  HttpModule,
  HttpClientModule
]

आयात HttpModuleऔर HttpClientModuleapp.module.ts में और ऊपर उल्लिखित आयातों में जोड़ें।

Comments

HttpModule (पदावनत) और HttpClientModule (HttpModule की जगह) का उपयोग करने का कोई मतलब नहीं है

— थीम

हाँ। बस HttpClientModule आयात करें।

— निरान

Answer 5

मैं भी नीचे परिवर्तन करके इसी तरह के मुद्दे का सामना कर रहा था, इसने मेरे लिए काम किया

App.modules.ts में

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

और इसी सेवा वर्ग में

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

निर्माता को नीचे जैसा दिखना चाहिए

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

परीक्षण फ़ाइल में

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

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

Comments

App.module.ts पर HttpClientModule का आयात करना समस्या को हल करने के लिए पर्याप्त नहीं है, लेकिन मैं आपको वैसे भी याद दिलाता हूं, जो मुझे याद आया।

— अगस्टे

HttpClientTestingModule का आयात करने से चश्मा में समस्या हल हो गई

— अशोकन शिवप्रगाम

Answer 6

मैं एक ही मुद्दे का सामना कर रहा था, मजेदार बात यह थी कि मैंने एक साथ दो प्रोजेक्ट खोले थे, मैंने गलत app.modules.ts फ़ाइलों को बदल दिया है।

सबसे पहले, कि जाँच करें।

उस परिवर्तन के बाद app.module.ts फ़ाइल में निम्न कोड जोड़ें

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

उसके बाद app.module.ts फ़ाइल में निम्न आयात सरणी में जोड़ें

  imports: [
    HttpClientModule,....
  ],

अब आपको ठीक होना चाहिए!

Answer 7

एक सेवा को इंजेक्ट करने के बाद मुझे यह त्रुटि हो गई जिसने HTTPClient को एक कक्षा में उपयोग किया। वर्ग को फिर से सेवा में उपयोग किया गया, इसलिए इसने एक परिपत्र निर्भरता पैदा की। मैं चेतावनी के साथ एप्लिकेशन को संकलित कर सकता हूं, लेकिन ब्राउज़र कंसोल में त्रुटि हुई

"HttpClient के लिए कोई प्रदाता नहीं! (MyService -> HttpClient)"

और इसने ऐप को तोड़ दिया।

यह काम:

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(

  ){}
}

इससे ऐप टूट जाता है

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

MyClass में MyService को इंजेक्ट करने के बाद मुझे परिपत्र निर्भरता चेतावनी मिली। CLI को इस चेतावनी के साथ वैसे भी संकलित किया गया था लेकिन ऐप अब काम नहीं कर रहा था और ब्राउज़र कंसोल में त्रुटि दी गई थी। तो मेरे मामले में यह @NgModule के साथ लेकिन परिपत्र निर्भरता के साथ कुछ भी नहीं करना था। यदि आपकी समस्या अभी भी मौजूद है तो मैं केस के नामकरण की चेतावनी को हल करने की सलाह देता हूं।

Answer 8

मैं उसी समस्या का सामना कर रहा था, तब मेरे app.module.ts में मैंने फ़ाइल को इस तरह से अपडेट किया,

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

और उसी फ़ाइल में (app.module.ts) मेरे @NgModule आयात [] सरणी में मैंने इस तरह लिखा था,

HttpModule,
HttpClientModule

Answer 9

मुझे स्लीपर प्रॉब्लम मिली। कृपया अपने app.module.ts फ़ाइल में HttpClientModule को निम्नानुसार आयात करें:

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

Answer 10

कोणीय गितुब पृष्ठ में, इस समस्या पर चर्चा की गई और समाधान पाया गया। https://github.com/angular/angular/issues/20355

Comments

मैंने इस लिंक का उपयोग किया, wleite, s के बारे में टिप्पणी इस पेज के लिए यूनिट में इस समस्या के लिए यूनिट और एकीकरण परीक्षणों के साथ कोणीय 5

— FDC

Answer 11

App.module.ts में आयात और प्रदाताओं दोनों को जोड़ें HttpModuleऔर HttpClientModuleसमस्या हल करें। आयात ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

Comments

मुझे भी यही समस्या है। मैंने App_modules में देखा और मेरे पास पथ निर्देशिका नहीं है @angular -> आम मैं "npm अपडेट" चलाते हैं मैं विंडोज 8.i के साथ काम कर रहा हूं, नोडजस वर्जन 9.7.1। मैं Valerio de Sanctis पुस्तक पढ़ रहा हूं ... यह क्या हो सकता है? धन्यवाद

— डिएगो

बस व्यवस्थापक मोड के साथ 'npm i' चलाएं।

— मेहरा जूल

Answer 12

बस HttpModuleऔर HttpClientModuleकेवल आयात करें :

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

की कोई आवश्यकता नहीं है HttpClient।

Answer 13

मुझे भी ऐसी ही समस्या थी। मेरे लिए HttpClient मॉड्यूल से पहले HttpModule का आयात करना था:

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

Answer 14

मेरे मामले में, एक npm पैकेज में स्थित कोणीय मॉड्यूल से एक सेवा का उपयोग करते समय त्रुटि हुई, जहां सेवा के लिए इंजेक्शन की आवश्यकता होती है HttpClient। एनपीएम पैकेज स्थापित करते समय, एनपीएम के संस्करण संघर्ष से निपटने केnode_modules कारण पैकेज निर्देशिका के अंदर एक डुप्लिकेट निर्देशिका बनाई गई थी ( सेवा से युक्त मॉड्यूल है:engi-sdk-client

जाहिर है, निर्भरता को HttpClientसही तरीके से हल नहीं किया गया है, क्योंकि HttpClientModuleसेवा में इंजेक्शन के स्थान (डुप्लिकेट node_modulesनिर्देशिका में रहता है ) और एक में इंजेक्ट किया गया app.module(सही)node_modules ) मेल नहीं खाता है।

मैं भी node_modulesएक गलत के कारण एक डुप्लिकेट निर्देशिका युक्त अन्य setups में यह त्रुटि आई हैnpm install कॉल के ।

यह दोषपूर्ण सेटअप वर्णित रनटाइम अपवाद की ओर भी जाता है No provider for HttpClient!।

टी एल; डॉ; डुप्लिकेट node_modulesनिर्देशिकाओं के लिए जांचें , यदि कोई अन्य समाधान काम नहीं करता है!

Answer 15

मेरे मामले में मैंने एक बार काम करने वाले ऐप को फिर से बनाया।

मैंने HttpClientModuleपिछले पोस्टों में निर्दिष्ट के रूप में आयात किया था लेकिन मुझे अभी भी त्रुटि मिल रही थी। मैंने सर्वर बंद कर दिया, ऐप को फिर से बनाया ( ng serve) और इसने काम किया।