HttpClient এর জন্য কোনও সরবরাহকারী নেই

Question

কৌণিক 4.4 থেকে 5.0 এ আপগ্রেড করার পরে এবং সমস্ত এইচটিটিপিডমডুল এবং এইচটিটিপি কে এইচটিপিপিএলেন্টমডুলিতে আপডেট করার পরে আমি এই ত্রুটি পেতে শুরু করি।

আমি কিছুটা নির্ভরতার কারণে না হলেও এটি সমস্যার সমাধান করে না তা নিশ্চিত হওয়ার জন্য আবার এইচটিটিপিডমডুল যুক্ত করেছি

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

— ডেভিড মারচ

এটি কি কৌণিক-ক্লাইপ প্রকল্প? আপনি দয়া করে আপনার প্যাকেজটি যোগ করতে পারেন

— জোনস

না, এটির একটি। 2.0 প্রকল্প এবং এটি কৌনিক 5 এবং httpclientmodule আপগ্রেড পর্যন্ত কাজ করে। এবং নীচের লিঙ্কটি উপরের উত্তরের সাথেও সমান তবে এটি সাহায্য করে না কারণ এটি ব্যবহৃত যেখানে আগে থেকেই প্রস্তুতকারক সেখানে httpclient রয়েছে।

— হিমমেট ইলেকিন

না এটির সদৃশ নয় তারা এগুলি পৃথক এবং এর উত্তরটি আমার পাশে ইতিমধ্যে সঠিক এবং একই সমস্যাটি ঘটেছিল এমনকি আমার একটি পরীক্ষা ফাইল আছে এবং একটি পরীক্ষা ফাইল ছাড়াই

— Himmet Yelekin

Answer 1

এই সমস্যা সমাধানের জন্য HttpClient করার জন্য এইচটিটিপি-র মাধ্যমে রিমোট সার্ভারের সাথে যোগাযোগের জন্য কৌণিকের প্রক্রিয়া।

HttpClientঅ্যাপ্লিকেশনটিতে যে কোনও জায়গায় উপলভ্য করতে ,

1. রুট খুলুন AppModule,

2. HttpClientModuleথেকে আমদানি করুন @angular/common/http,

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

3. @NgModule.importsঅ্যারে এ এটি যোগ করুন ।

   imports:[HttpClientModule, ]

Comments

ধন্যবাদ! আপনি এই ইস্যুতে বেশি সময় ব্যয় করে আমাকে বাঁচিয়েছেন। থাম্বস আপ!

— স্যাক্সোফোননিস্ট

এটি আমার জন্য এটি স্থির করে দিয়েছে। আমি দুর্ঘটনাক্রমে ঘোষণাপত্রে আমার কথা রেখেছি।

— ধরা

সাব মডিউলগুলি ব্যবহার করার সময় কাজ করে না।

— ব্যবহারকারী 3044394

এটা আমদানি করুন শুধুমাত্র app.module, এবং কোথাও, সাব মডিউল নেই

— Vardaan Tyagi

খুব খারাপ যে ওপি একটি উত্তর হিসাবে এটি গ্রহণ করতে একটি দ্বিতীয় গ্রহণ করেনি ...

— রোমিও সিয়েরা

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 এর জন্য কোনও সরবরাহকারী নয়" ত্রুটিটি 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 যুক্ত করা উচিত। তবে যাইহোক, আমি আপনার উত্তরটিও নিশ্চিত হওয়ার চেষ্টা করেছি তবে যেমনটি প্রত্যাশা করা হয়েছে তেমন সরবরাহকারী তালিকায় যুক্ত করার পরেও একই ত্রুটি অব্যাহত রয়েছে।

— হিমমেট ইলেকিন

আমার ধারণা, "এইচটিপিপি্লিয়েন্টমডুল" সরবরাহকারীদের নয়, আমদানিতে যুক্ত করা উচিত

— মুসা হায়দারী

পরীক্ষাগুলিতে এই ত্রুটি থেকে মুক্তি পেতে imports: [HttpClientTestingModule]আমাকে আমার যুক্ত করতে হয়েছিল । TestBed.configureTestingModule

— ইয়ারোস্লাভ স্টাভিনিচিয়

জেসমিনে আমার ইয়ারোস্লাভ স্টাভিনিচি মন্তব্যটি আমার সমস্যার উত্তর ছিল।

— ই। ম্যাগগিনি

আমদানি করুন @ '@ কৌণিক / সাধারণ / HTTP / টেস্টিং' থেকে tt এইচটিপিপিএলটিস্টেস্টিংমডুল, HTTPTestingController;

— নিতিনসিংহ

Answer 3

আপনি এইচটিটিপিপ্লায়েন্টের জন্য ত্রুটি পেয়ে যাচ্ছেন, সুতরাং আপনি তার জন্য এইচটিটিপিপ্লায়েন্টমডুল অনুপস্থিত।

আপনার এটিকে অ্যাপ্লিকেশন.মডিউল.টস ফাইলটিতে আমদানি করা উচিত -

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

এবং এটি এনজিএমডুল ডেকরেটারে এর মতো উল্লেখ করুন -

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

এটি এমনকি যদি কাজ না করে তবে ব্রাউজারের কুকিগুলি সাফ করার চেষ্টা করুন এবং আপনার সার্ভারটি পুনরায় চালু করার চেষ্টা করুন। আশা করি এটি কার্যকর হতে পারে, আমি একই ত্রুটি পেয়েছিলাম।

Comments

আমদানিতে এইচটিপিপ্লেইনডমডুল যুক্ত করা সমস্যার সমাধান করেছে, কারণ এর মানটি ব্যবহার করা হয়নি, ধন্যবাদ @ বিবেক কুশওয়াহা

— ২০'১৯

Answer 4

আমার একই সমস্যা ছিল। ব্রাউজিং এবং সমস্যার সাথে লড়াই করার পরে নীচের সমাধানটি খুঁজে পেয়েছি

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

imports: [
  HttpModule,
  HttpClientModule
]

আমদানি HttpModuleএবং HttpClientModuleapp.module.ts এ এবং উপরে উল্লিখিত মত আমদানিতে যুক্ত করুন।

Comments

HttpModule (অবহেলিত) এবং এইচটিটিপি ক্লায়েন্টমডিউল (এইচটিটিপি মডোলেস প্রতিস্থাপন করে) ব্যবহার করা কোনও অর্থবোধ করে না

— থিমেনেস

হ্যাঁ. কেবলমাত্র এইচটিটিপিপ্লায়েন্টমডিউল আমদানি করুন।

— নির লঙ্কা

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 এ এইচটিপিপিএলিয়েন্টমডিউল আমদানি করা যথেষ্ট নয়, তবে আমি কী মিস করেছি তা স্মরণ করিয়ে দেওয়ার জন্য আমি আপনাকে আপত্তি জানাই।

— আগস্ট

এইচটিপিপি্লিয়েন্টটিস্টিং মডেল আমদানি করে চশমাগুলিতে সমস্যাটি সমাধান করা

— অশোকন শিপ্রগ্রাসাম

Answer 6

আমি একই সমস্যার মুখোমুখি হয়েছি, মজার বিষয়টি ছিল আমার দুটি প্রকল্প একই সাথে খোলা হয়েছিল, আমি ভুল অ্যাপ্লিকেশনগুলি পরিবর্তন করেছি mod

প্রথমে এটি পরীক্ষা করে দেখুন।

পরিবর্তনের পরে নিম্নলিখিত কোড যুক্ত করুন app.module.ts ফাইলে যুক্ত করুন

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

এর পরে আমদানি অ্যারেতে নিম্নলিখিতটি যুক্ত করুন app.module.ts ফাইলে করুন

  imports: [
    HttpClientModule,....
  ],

এখন আপনি ঠিক করা উচিত!

Answer 7

আমি কোনও সার্ভিস ইনজেকশনের পরে এই ত্রুটি হয়েছি যা একটি ক্লাসে 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);
  ){}
}

মাই ক্লাসে মাই সার্ভিস ইনজেক্ট করার পরে আমি বিজ্ঞপ্তি নির্ভরতার সতর্কতা পেয়েছি। সিএলআই যাইহোক এই সতর্কতা দিয়ে সংকলিত হয়েছে কিন্তু অ্যাপটি আর কাজ করে না এবং ব্রাউজার কনসোলে ত্রুটি দেওয়া হয়েছিল। সুতরাং আমার ক্ষেত্রে এটি এনজিডমডুলের সাথে নয় তবে বিজ্ঞপ্তি নির্ভরতা সহ কিছুই করার ছিল না। আপনার সমস্যাটি যদি এখনও বিদ্যমান থাকে তবে কেস সংবেদনশীল নামকরণ সতর্কতাগুলি সমাধান করার পরামর্শ দিচ্ছি।

Answer 8

আমি একই সমস্যা সম্মুখীন ছিল তবে আমার এ, app.module.ts , আমি ফাইল এই ভাবে আপডেট

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

এবং আমার @ এনজিএমডিউল আমদানি [] অ্যারেতে একই ফাইল (app.module.ts) এ আমি এইভাবে লিখেছিলাম,

HttpModule,
HttpClientModule

Answer 9

আমি পাতলা সমস্যা পেয়েছি। নিম্নলিখিত হিসাবে আপনার app.module.ts ফাইলে এইচটিপিপি্লিয়েন্টমডিউল আমদানি করুন:

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

এঙ্গুলার 5

— এফডিসি

Answer 11

App.module.ts এ আমদানি এবং সরবরাহকারী উভয়ই যুক্ত করুন HttpModuleএবং HttpClientModuleসমস্যার সমাধান করেছেন। আমদানি ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

Comments

আমারও একই সমস্যা আছে। আমি অ্যাপ_মডিউলগুলিতে সন্ধান করেছি এবং আমার কাছে @angular -> সাধারণ আমি "এনপিএম আপডেট" চালানোর পথে কোনও ডিরেক্টরি নেই, আমি উইন্ডোজ ৮ আই, নোডেজ ভার্সন ৯. 9..১ এর সাথে কাজ করছি। আমি ভ্যালারিও দে সান্টিস বইটি পড়ছি ... এটি কী হতে পারে? ধন্যবাদ

— ডিয়েগো

অ্যাডমিনিস্ট্রেটর মোড দিয়ে কেবল 'এনপিএম আই' চালান।

— সামিট মেহরা

Answer 12

কেবলমাত্র HttpModuleএবং HttpClientModuleএকমাত্র আমদানি করুন :

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

কোন প্রয়োজন নেই HttpClient।

Answer 13

আমারও একই সমস্যা ছিল আমার জন্য ফিক্সটি এইচটিপিপিডিয়েন্ট মডিউলটির আগে এইচটিপিএমডিউল আমদানি করতে হয়েছিল:

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কোনও npm installকলের কারণে ডুপ্লিকেট ডিরেক্টরি থাকা অন্য সেটআপগুলিতেও আমার এই ত্রুটি ছিল ।

এই ত্রুটিযুক্ত সেটআপটি বর্ণিত রানটাইম ব্যতিক্রমের দিকেও নিয়ে যায় No provider for HttpClient!।

টি এল; ডিআর; সদৃশ node_modulesডিরেক্টরিগুলির জন্য পরীক্ষা করুন , যদি অন্য কোনও সমাধানের কাজ না হয়!

Answer 15

আমার ক্ষেত্রে আমি একবার এটি অ্যাপ্লিকেশনটি পুনরায় তৈরি করেছিলাম found

আমি HttpClientModuleআগের পোস্টগুলিতে উল্লিখিত হিসাবে আমদানি করেছি তবে আমি এখনও ত্রুটি পাচ্ছিলাম। আমি সার্ভারটি বন্ধ করে দিয়েছি, অ্যাপটি পুনরায় তৈরি করেছি ( ng serve) এবং এটি কার্যকর।