Aucun fournisseur pour HttpClient

364

Après la mise à niveau d'angular 4.4 vers 5.0 et après la mise à jour de tous les HttpModule et Http vers HttpClientModule, j'ai commencé à obtenir cette erreur.

J'ai également ajouté HttpModule à nouveau pour être sûr que ce n'est pas dû à une certaine dépendance, mais cela ne résout pas le problème

Dans app.module, j'ai tous correctement défini

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

Je ne sais pas d'où vient cette erreur, ou je n'ai aucune idée de comment y pénétrer. J'ai aussi un avertissement (mettez-le ci-dessous aussi) peut-être son lié.

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)

Message d'alerte:

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

Comportement actuel

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

Environnement

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];
}
Himmet Yelekin
la source
utilisez-vous angular2-jwt?
Sajeetharan
est-ce un projet angular-cli? pourriez-vous s'il vous plaît ajouter votre package.json
Jota.Toledo
1
Non, c'est un projet .core 2.0 et il fonctionnait jusqu'à la mise à niveau angular 5 et httpclientmodule. Et le lien ci-dessous est également le même avec la réponse ci-dessus mais cela n'aide pas car httpclient est déjà dans les constructeurs où il est utilisé.
Himmet Yelekin
1
Non, ce n'est pas un doublon, ils sont différents et sa réponse est déjà correcte à mes côtés et le même problème se produit même si j'ai un fichier de test et sans fichier de test
Himmet Yelekin

Réponses:

661

Pour résoudre ce problème, HttpClientle mécanisme d'Angular permet de communiquer avec un serveur distant via HTTP.

Pour rendre HttpClientdisponible partout dans l'application,

  1. ouvrez la racine AppModule,

  2. importer le HttpClientModulede @angular/common/http,

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

  3. ajoutez-le au @NgModule.importstableau.

    imports:[HttpClientModule, ]

Manish
la source
1
Merci! Vous m'avez épargné de passer plus de temps sur cette question. Pouces vers le haut!
Saxophoniste
Cela m'a arrangé. J'avais mis la mienne dans les déclarations par accident.
catch22
5
ne fonctionne pas lors de l'utilisation de sous-modules.
user3044394
1
Importez-le uniquement dans le module app.module, et nulle part ailleurs, pas dans les sous-modules
Vardaan Tyagi
1
Dommage que le PO n'ait pas pris une seconde pour accepter cela comme la réponse ...
Romeo Sierra
140

Vous n'avez pas fourni de prestataires dans votre module:

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

Utilisation de HttpClient dans les tests

Vous devrez ajouter le HttpClientTestingModuleà la configuration TestBed lors de l'exécution ng testet de l'obtention de l'erreur «Aucun fournisseur pour 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', () => {
  });
});
kmp
la source
3
non, il n'est pas documenté que httpclientmodule doit être ajouté à la liste des fournisseurs. Mais de toute façon, j'ai également essayé votre réponse pour être sûr, mais comme prévu, la même erreur se poursuit après l'ajout à la liste des fournisseurs.
Himmet Yelekin
17
Je suppose que "HttpClientModule" devrait être ajouté aux importations, pas aux fournisseurs
Musa Haidari
30
J'ai dû ajouter imports: [HttpClientTestingModule]à mon TestBed.configureTestingModulepour me débarrasser de cette erreur dans les tests .
Yaroslav Stavnichiy
@YaroslavStavnichiy commentaire était la réponse à mon problème avec cela dans Jasmine.
E. Maggini
10
import {HttpClientTestingModule, HttpTestingController} depuis '@ angular / common / http / testing';
NitinSingh
44

Vous obtenez une erreur pour HttpClient donc, il vous manque HttpClientModule pour cela.

Vous devez l'importer dans le fichier app.module.ts comme ceci -

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

et le mentionner dans le NgModule Decorator comme ceci -

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

Si cela ne fonctionne même pas, essayez de supprimer les cookies du navigateur et de redémarrer votre serveur. J'espère que cela peut fonctionner, j'obtenais la même erreur.

Vivek kushwaha
la source
L'ajout de HttpClientModule aux importations a résolu le problème, car sa valeur n'était pas utilisée, merci @Vivek kushwaha
vidur punj
27

J'ai eu le même problème. Après avoir parcouru et rencontré des problèmes, vous avez trouvé la solution ci-dessous

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

imports: [
  HttpModule,
  HttpClientModule
]

Importez HttpModuleet HttpClientModuledans app.module.ts et ajoutez aux importations comme mentionné ci-dessus.

Abhilash Ranjan
la source
6
l'utilisation du HttpModule (obsolète) et du HttpClientModule (remplace le HttpModule) n'a aucun sens
themenace
2
Oui. Importez simplement HttpClientModule.
Nir Lanka
19

J'étais également confronté à un problème similaire en effectuant les modifications ci-dessous, cela a fonctionné pour moi

Dans app.modules.ts

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

et dans la classe de service correspondante

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

constructeur devrait ressembler à ci-dessous

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

Dans le fichier de test

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

  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  }));
Ravishankar
la source
L'importation de HttpClientModule sur app.module.ts ne suffit pas pour résoudre le problème, mais je vous vote quand même pour me rappeler ce que j'ai manqué.
Auguste
L'importation de HttpClientTestingModule a résolu le problème dans les spécifications
Ashokan Sivapragasam
12

J'étais confronté au même problème, le plus drôle était que j'avais deux projets ouverts simultanément, j'ai changé les mauvais fichiers app.modules.ts.

Tout d'abord, vérifiez cela.

Après cette modification, ajoutez le code suivant au fichier app.module.ts

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

Après cela, ajoutez ce qui suit au tableau des importations dans le fichier app.module.ts

  imports: [
    HttpClientModule,....
  ],

Maintenant, ça devrait aller!

Achintha Isuru
la source
9

J'ai eu cette erreur après avoir injecté un service qui utilisait HTTPClient dans une classe. La classe a été à nouveau utilisée dans le service, elle a donc créé une dépendance circulaire. J'ai pu compiler l'application avec des avertissements, mais dans la console du navigateur, l'erreur s'est produite

"Aucun fournisseur pour HttpClient! (MyService -> HttpClient)"

et il a cassé l'application.

Cela marche:

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(

  ){}
}

Cela casse l'application

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

Après avoir injecté MyService dans MyClass, j'ai reçu l'avertissement de dépendance circulaire. CLI a quand même compilé avec cet avertissement mais l'application ne fonctionnait plus et l'erreur a été donnée dans la console du navigateur. Donc, dans mon cas, cela n'avait rien à voir avec @NgModule mais avec des dépendances circulaires. Je recommande de résoudre les avertissements de nommage sensibles à la casse si votre problème persiste.

Nils Fett
la source
8

J'étais confronté au même problème, puis dans mon app.module.ts j'ai mis à jour le fichier de cette façon,

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

et dans le même fichier (app.module.ts) dans mon tableau @NgModule imports [] que j'ai écrit de cette façon,

HttpModule,
HttpClientModule
Wasey Raza
la source
6

J'ai trouvé un problème plus mince. Veuillez importer le HttpClientModule dans votre fichier app.module.ts comme suit:

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 { }
AngularJS Tutorials angularjst
la source
4

Dans la page github angulaire, ce problème a été discuté et trouvé une solution. https://github.com/angular/angular/issues/20355

ddagsan
la source
J'ai utilisé ce lien, wleite, s comment en bas de la page pour ce problème dans les tests unitaires et d'intégration avec Angular 5
FDC
4

L'ajout HttpModuleet HttpClientModuleles importations et les fournisseurs dans app.module.ts ont résolu le problème. importations ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

sumit mehra
la source
J'ai le même problème. J'ai regardé dans App_modules et je n'ai pas de répertoire http dans le chemin @angular -> common Je lance "npm update" Je travaille avec Windows 8.i, nodejs versión 9.7.1. Je lis le livre de Valerio de Sanctis ... que peut-il être? Merci
Diego
exécutez simplement 'npm i' avec le mode administrateur.
sumit mehra
3

Importez simplement le HttpModuleet le HttpClientModuleseul:

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

Pas besoin de HttpClient.

Ebuka
la source
3

J'ai eu un problème similaire. Pour moi, le correctif consistait à importer HttpModule avant le module HttpClient:

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

Dans mon cas, l'erreur s'est produite lors de l'utilisation d'un service à partir d'un module angulaire situé dans un package npm, où le service nécessite l'injection de HttpClient. Lors de l'installation du package npm, un node_modulesrépertoire en double a été créé à l'intérieur du répertoire du package en raison de la gestion des conflits de version de npm ( engi-sdk-clientest le module contenant le service):

entrez la description de l'image ici

Évidemment, la dépendance à HttpClientn'est pas résolue correctement, car les emplacements de HttpClientModuleinjecté dans le service (vit dans le node_modulesrépertoire en double ) et celui injecté dans app.module(le bon node_modules) ne correspondent pas.

J'ai également eu cette erreur dans d'autres configurations contenant un node_modulesrépertoire en double en raison d'un mauvais npm installappel.

Cette configuration défectueuse entraîne également l'exception d'exécution décrite No provider for HttpClient!.

TL; DR; Recherchez les node_modulesrépertoires en double , si aucune des autres solutions ne fonctionne!

Marc
la source
0

Dans mon cas, j'ai trouvé une fois que j'ai reconstruit l'application, cela a fonctionné.

J'avais importé le HttpClientModulecomme spécifié dans les messages précédents, mais j'obtenais toujours l'erreur. J'ai arrêté le serveur, reconstruit l'application ( ng serve) et cela a fonctionné.

Babla S
la source
0

Dans mon cas, j'utilisais un service dans un sous-module (PAS le AppModule racine), et le HttpClientModule a été importé uniquement dans le module.

Je dois donc modifier la portée par défaut du service, en remplaçant «providedIn» par «any» dans le décorateur @Injectable.

Par défaut, si vous utilisez angular-cli pour générer le service, le «providedIn» a été défini sur «root».

J'espère que cela t'aides.

Charles Zhao
la source