No hay proveedor para HttpClient

364

Después de actualizar de angular 4.4 a 5.0 y después de actualizar todos los HttpModule y Http a HttpClientModule, comencé a recibir este error.

También agregué HttpModule nuevamente para asegurarme de que no se deba a alguna dependencia pero que no resuelva el problema

En app.module, he configurado todo correctamente

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

No sé de dónde viene este error, o no tengo idea de cómo obtenerlo. También tengo una advertencia (póngala a continuación también) tal vez esté relacionada.

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)

Mensaje de advertencia:

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

Comportamiento actual

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

Medio ambiente

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
fuente
¿Estás usando angular2-jwt?
Sajeetharan
¿Es este un proyecto angular-CLI? ¿podría agregar su package.json
Jota.Toledo
1
No, es un proyecto .core 2.0 y estaba funcionando hasta la actualización angular 5 y httpclientmodule. Y el enlace a continuación también es el mismo con la respuesta anterior, pero no ayuda porque httpclient ya está en los constructores donde se usa.
Himmet Yelekin
1
No, no es un duplicado, son diferentes y su respuesta ya es correcta a mi lado y el mismo problema ocurre incluso si tengo un archivo de prueba y sin un archivo de prueba
Himmet Yelekin

Respuestas:

661

Para resolver este problema HttpClientestá el mecanismo de Angular para comunicarse con un servidor remoto a través de HTTP.

Para que esté HttpClientdisponible en todas partes en la aplicación,

  1. abre la raíz AppModule,

  2. importar el HttpClientModulede @angular/common/http,

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

  3. agréguelo a la @NgModule.importsmatriz.

    imports:[HttpClientModule, ]

Manish
fuente
1
¡Gracias! Me salvó de pasar más tiempo en ese tema. ¡Pulgares hacia arriba!
Saxofonista
Esto me lo arregló. Había puesto el mío en las declaraciones por accidente.
catch22
55
no funciona cuando se usan submódulos.
user3044394
1
Importarlo solo en app.module, y en ningún otro lugar, no en submódulos
Vardaan Tyagi
1
Lástima que el OP no haya tardado un segundo en aceptar esto como la respuesta ...
Romeo Sierra
140

No ha proporcionado proveedores en su módulo:

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

Uso de HttpClient en pruebas

Deberá agregarlo HttpClientTestingModulea la configuración de TestBed al ejecutar ng testy obtener el error "No hay proveedor para 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
fuente
3
no, esto no está documentado que httpclientmodule deba agregarse a la lista de proveedores. Pero de todos modos, probé su respuesta también para estar seguro, pero como se esperaba, el mismo error continúa después de agregarlo a la lista de proveedores.
Himmet Yelekin el
17
Supongo que "HttpClientModule" debería agregarse a las importaciones, no a los proveedores
Musa Haidari
30
Tuve que agregar imports: [HttpClientTestingModule]a mi TestBed.configureTestingModulepara deshacerme de este error en las pruebas .
Yaroslav Stavnichiy
El comentario de @YaroslavStavnichiy fue la respuesta a mi problema con esto en Jasmine.
E. Maggini
10
importar {HttpClientTestingModule, HttpTestingController} desde '@ angular / common / http / testing';
NitinSingh
44

Recibes un error para HttpClient, por lo que te falta HttpClientModule para eso.

Debe importarlo en el archivo app.module.ts de esta manera:

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

y mencionarlo en el NgModule Decorator así:

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

Si esto no funciona, intente borrar las cookies del navegador e intente reiniciar su servidor. Espero que funcione, estaba recibiendo el mismo error.

Vivek kushwaha
fuente
Agregar HttpClientModule a las importaciones resolvió el problema, porque su valor no se usó, gracias @Vivek kushwaha
vidur punj
27

Tuve el mismo problema Después de navegar y luchar con el problema, encontré la solución a continuación

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

imports: [
  HttpModule,
  HttpClientModule
]

Importar HttpModuley HttpClientModuleen app.module.ts y agregar a las importaciones como se mencionó anteriormente.

Abhilash Ranjan
fuente
66
usar el HttpModule (en desuso) y el HttpClientModule (reemplaza a HttpModule) no tiene sentido
themenace
2
Si. Solo importa HttpClientModule.
Nir Lanka
19

También enfrenté un problema similar al hacer los cambios a continuación, funcionó para mí

En app.modules.ts

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

y en la clase de servicio correspondiente

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

el constructor debería verse como a continuación

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

En archivo de prueba

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

  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  }));
Ravi Shankar
fuente
Importar HttpClientModule en app.module.ts no es suficiente para resolver el problema, pero de todos modos lo voté por recordarme lo que me perdí.
Auguste
Importar HttpClientTestingModule resolvió el problema en las especificaciones
Ashokan Sivapragasam
12

Estaba enfrentando el mismo problema, lo curioso es que tenía dos proyectos abiertos simultáneamente, he cambiado los archivos incorrectos de app.modules.ts.

Primero, verifique eso.

Después de ese cambio, agregue el siguiente código al archivo app.module.ts

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

Después de eso, agregue lo siguiente a la matriz de importaciones en el archivo app.module.ts

  imports: [
    HttpClientModule,....
  ],

Ahora deberías estar bien!

Achintha Isuru
fuente
9

Recibí este error después de inyectar un servicio que utilizaba HTTPClient en una clase. La clase se utilizó nuevamente en el servicio, por lo que creó una dependencia circular. Podría compilar la aplicación con advertencias, pero en la consola del navegador se produjo el error

"¡No hay proveedor para HttpClient! (MyService -> HttpClient)"

y rompió la aplicación

Esto funciona:

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(

  ){}
}

Esto rompe la aplicación

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

Después de inyectar MyService en MyClass, recibí la advertencia de dependencia circular. CLI se compiló de todos modos con esta advertencia, pero la aplicación ya no funcionaba y el error se dio en la consola del navegador. Entonces, en mi caso, no tuvo que hacer nada con @NgModule sino con dependencias circulares. Recomiendo resolver las advertencias de nomenclatura entre mayúsculas y minúsculas si el problema persiste.

Nils Fett
fuente
8

Estaba enfrentando el mismo problema, luego en mi app.module.ts actualicé el archivo de esta manera,

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

y en el mismo archivo (app.module.ts) en mi matriz @NgModule imports [] escribí de esta manera,

HttpModule,
HttpClientModule
Wasey Raza
fuente
6

Encontré un problema más delgado. Importe el HttpClientModule en su archivo app.module.ts de la siguiente manera:

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
fuente
4

En la página angular de Github, este problema se discutió y se encontró una solución. https://github.com/angular/angular/issues/20355

ddagsan
fuente
Utilicé este enlace, el comentario de wleite en la parte inferior de la página para este problema en las pruebas de unidad e integración con Angular 5
FDC
4

Agregar HttpModuley HttpClientModuleen importaciones y proveedores en app.module.ts resolvió el problema. importaciones ->import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

sumit mehra
fuente
Tengo el mismo problema Busqué en App_modules y no tengo el directorio http en la ruta @angular -> común Ejecuto "npm update" Estoy trabajando con Windows 8.i, nodejs versión 9.7.1. Estoy leyendo el libro de Valerio de Sanctis ... ¿qué puede ser? Gracias
Diego
simplemente ejecute 'npm i' con el modo de administrador.
sumit mehra
3

Solo importa el HttpModuley el HttpClientModuleúnico:

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

No es necesario para el HttpClient.

Ebuka
fuente
3

Tuve un problema similar Para mí, la solución fue importar HttpModule antes del Módulo HttpClient:

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

En mi caso, el error ocurrió al usar un servicio de un módulo angular ubicado en un paquete npm, donde el servicio requiere inyección de HttpClient. Al instalar el paquete npm, node_modulesse creó un directorio duplicado dentro del directorio del paquete debido al manejo de conflictos de versión de npm ( engi-sdk-clientes el módulo que contiene el servicio):

ingrese la descripción de la imagen aquí

Obviamente, la dependencia de HttpClientno se resuelve correctamente, ya que las ubicaciones de HttpClientModuleinyectado en el servicio (vive en el node_modulesdirectorio duplicado ) y el inyectado app.module(el correcto node_modules) no coinciden.

También he tenido este error en otras configuraciones que contienen un node_modulesdirectorio duplicado debido a una npm installllamada incorrecta .

Esta configuración defectuosa también conduce a la excepción de tiempo de ejecución descrita No provider for HttpClient!.

TL; DR; ¡Busque node_modulesdirectorios duplicados , si ninguna de las otras soluciones funciona!

Bagazo
fuente
0

En mi caso, encontré una vez que reconstruí la aplicación, funcionó.

Había importado el HttpClientModuleespecificado en las publicaciones anteriores, pero aún recibía el error. Detuve el servidor, reconstruí la aplicación ( ng serve) y funcionó.

Babla S
fuente
0

En mi caso, estaba usando un servicio en un submódulo (NO el AppModule raíz), y el HttpClientModule solo se importó en el módulo.

Por lo tanto, tengo que modificar el alcance predeterminado del servicio, cambiando 'provideIn' a 'any' en el decorador @Injectable.

De manera predeterminada, si usa angular-cli para generar el servicio, 'provideIn' se estableció en 'root'.

Espero que esto ayude.

Charles Zhao
fuente