angular - Žiadny poskytovateľ pre HttpClient

Po aktualizácii z Angular 4.4 na 5.0 a po aktualizácii všetkých HttpModule a Http na HttpClientModule som začal dostávať túto chybu.

Tiež som znova pridal HttpModule, aby som si bol istý, že to nie je spôsobené nejakou závislosťou, ale problém sa tým nevyriešil

V súbore app.module mám všetko správne nastavené

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

Neviem, odkiaľ táto chyba prichádza, alebo nemám tušenie, ako zistiť jej podstatu. Mám tiež varovanie (dám ho nižšie), možno s tým súvisí.

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)

Upozornenie:

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

Súčasné správanie

StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: Žiadny poskytovateľ pre HttpClient!

Prostredie

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

Odpoveď č. 1

Na vyriešenie tohto problému je HttpClient mechanizmom Angularu na komunikáciu s diaľkovým serverom cez HTTP.

Aby bol HttpClient k dispozícii všade v aplikácii,

1. otvorte koreň AppModule,

2. importujte HttpClientModule z @angular/common/http,

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

3. pridajte to do poľa @NgModule.imports.

   imports:[HttpClientModule,  ]

Odpoveď č. 2

Vo vašom module ste neposkytli poskytovateľov:

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

Používanie HttpClient v testoch

Pri spustení ng test a zobrazovaní chyby „No provider for HttpClient“ bude potrebné pridať HttpClientTestingModule do konfigurácie TestBed:

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

Odpoveď č. 3

S nedávnymi zmenami v Angular (Angular 17) neexistuje súbor app.module. Takže s novou štruktúrou budete musieť aktualizovať to v súbore app.config a pridať

provideHttpClient()

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http'
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withHashLocation()),
    provideHttpClient()
  ]
};

alebo ak chcete pridať autentifikačný intercept, môžete to urobiť takto

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http'
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withHashLocation()),
    provideHttpClient(withInterceptors([authenticationInterceptor]))
  ]
};

interceptor môže byť deklarovaný ako

import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from "@angular/common/http";

export const authenticationInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next:
    HttpHandlerFn) => {
    const modifiedReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${sessionStorage.getItem('token')}`),
    });

    return next(modifiedReq);
};

Odpoveď č. 4

Dostávate chybu pre HttpClient, takže vám chýba HttpClientModule.

Mali by ste ho importovať do súboru app.module.ts takto -

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

a spomeňte to v dekorátore NgModule takto -

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

Ak toto ani nezaberie, skúste vymazať cookies v prehliadači a skúste reštartovať svoj server. Dúfajme, že to môže fungovať, mne sa zobrazovala tá istá chyba.

Odpoveď č. 5

Stačí pridať HttpClientModule do poľa 'imports' v súbore app.module.ts.

...
import {HttpClientModule} from '@angular/common/http'; // add this line
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, //add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

a potom môžete vo svojom projekte použiť HttpClient cez injekciu do konštruktora

  import {HttpClient} from '@angular/common/http';
  
  export class Services{
  constructor(private http: HttpClient) {}

Odpoveď č. 6

Mal som rovnaký problém. Po prehliadaní a boji s problémom som našiel nižšie uvedené riešenie

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

imports: [
  HttpModule,
  HttpClientModule
]

Importujte HttpModule a HttpClientModule v súbore app.module.ts a pridajte ich do imports ako je uvedené vyššie.

Odpoveď č. 7

krok 1: importujte HttpClientModule do app.module.ts:

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

krok 2: do importov modulu pridajte HttpClientModule:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    HttpClientModule
  ],
  providers: [
    ....
  ],
  bootstrap: [AppComponent]
})

Odpoveď č. 8

Aj ja som čelil podobnému problému a po vykonaní nasledujúcich zmien to pre mňa fungovalo

V app.modules.ts

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

a v príslušnej servisnej triede

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

konstruktér by mal vyzerať nasledovne

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

V testovacom súbore

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

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

Odpoveď č. 9

Prejdite na app.module.ts

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

A

Pridajte HttpClientModule pod imports

mal by vyzerať takto

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule]

Odpoveď č. 10

Problém je skôr spôsobený tým, že neboli zaregistrované požadované služby, t.j. HttpClientModule v koreňovom module, t.j. NgModule.

Chýba vám HttpClientModule, pretože dostávate chybu pri HttpClient

Mali by ste to importovať do súboru app.module.ts nasledovne,

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

a zmienite to v dekorátore NgModule takto -

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

Dúfajme, že to môže fungovať. Pozrite si nižšie uvedený obrázok, aby ste získali viac nápadov.

Odpoveď č. 11

Čelil som rovnakému problému, vtipné bolo, že som mal otvorené dve projekty súčasne, zmenil som nesprávne súbory app.modules.ts.

Najprv to skontroluj.

Po tejto zmene pridajte nasledujúci kód do súboru app.module.ts

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

Potom pridajte nasledujúce do poľa imports v súbore app.module.ts

  imports: [
    HttpClientModule,....
  ],

Teraz by ste mali byť v poriadku!

Odpoveď č. 12

Čelil som rovnakému problému, potom som vo svojom app.module.ts súbore aktualizoval súbor týmto spôsobom,

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

a v tom istom súbore (app.module.ts) som do môjho poľa imports[] v @NgModule napísal toto spôsobom,

HttpModule,
HttpClientModule

Odpoveď č. 13

Túto chybu som dostal po injektovaní služby, ktorá používala HTTPClient, do triedy. Táto trieda bola opäť použitá v službe, takže vznikla kruhová závislosť. Aplikáciu som mohol skompilovať s varovaniami, ale v konzole prehliadača sa objavila chyba

"Žiadny poskytovateľ pre HttpClient! (MyService -> HttpClient)"

a zlomilo to aplikáciu.

Toto funguje:

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(

  ){}
}

Toto rozbíja aplikáciu

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

Po injektovaní MyService do MyClass som dostal varovanie o kruhovej závislosti. CLI sa aj tak skompilovalo s týmto varovaním, ale aplikácia už nefungovala a chyba bola zobrazená v konzole prehliadača. Takže v mojom prípade to nemalo nič spoločné s @NgModule, ale s kruhovými závislosťami. Odporúčam vyriešiť varovania o rozlišovaní veľkých a malých písmen, ak váš problém stále pretrváva.

Odpoveď č. 14

Opravené pridaním poskytovateľa HttpClientModule do sekcie imports

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ]
})

Toto potrebujeme pridať do súboru src -> app -> app.module.ts.

Odpoveď č. 15

V Angular 17 - NullInjectorError: Žiadny poskytovateľ pre _HttpClient! Prejdite do svojho súboru app.config.ts a do poľa providers pridajte:

provideHttpClient()

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideAnimationsAsync(),
    provideHttpClient(),
  ],
};

Toto opravilo moju chybu

Odpoveď č. 16

Našiel som ešte zložitejší problém. Prosím, naimportujte HttpClientModule do súboru app.module.ts nasledovne:

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

Odpoveď č. 17

V súbore app.module.ts -> sekcia importov, je potrebné pridať HttpClientModule. Nižšie je ukážka

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


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,  // This is where you need to add
        FormsModule,
    ...