angular - NullInjectorError: R3InjectorError - Stack Overflow

admin管理员组

文章数量:1325150

I'm working in a personal project, using angular, but I receive the following error all the time:

NullInjectorError: R3InjectorError(Environment Injector)[_HttpClient->_HttpClient]: NullInjectorError: No provider for _HttpClient!

I don't know why this happens, but here is my app.config.ts:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
};

my others components ts (menu-navponent.ts) (app.config.ts) (main.ts):

import { Component, OnInit, Renderer2, ElementRef, HostListener } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Traducciones {
  [key: string]: {
    inicio: string;
    productos: string;
    contacto: string;
  };
}

@Component({
  selector: 'menu-nav',
  templateUrl: './menu-navponent.html',
  styleUrls: ['./menu-navponent.scss'],
  standalone: true,
})
export class MenuNavComponent implements OnInit {
  idiomaActual: string = 'es';
  traducciones: Traducciones = {};

  constructor(private http: HttpClient, private renderer: Renderer2, private el: ElementRef) {}

import { Component } from '@angular/core';
import { MenuNavComponent } from './menu-nav/menu-navponent';

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.scss'],
  standalone: true,
  imports: [MenuNavComponent],
})
export class AppComponent {}

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/appponent';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
}).catch((err) => console.error(err));

I'm working in a personal project, using angular, but I receive the following error all the time:

NullInjectorError: R3InjectorError(Environment Injector)[_HttpClient->_HttpClient]: NullInjectorError: No provider for _HttpClient!

I don't know why this happens, but here is my app.config.ts:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
};

my others components ts (menu-navponent.ts) (app.config.ts) (main.ts):

import { Component, OnInit, Renderer2, ElementRef, HostListener } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Traducciones {
  [key: string]: {
    inicio: string;
    productos: string;
    contacto: string;
  };
}

@Component({
  selector: 'menu-nav',
  templateUrl: './menu-navponent.html',
  styleUrls: ['./menu-navponent.scss'],
  standalone: true,
})
export class MenuNavComponent implements OnInit {
  idiomaActual: string = 'es';
  traducciones: Traducciones = {};

  constructor(private http: HttpClient, private renderer: Renderer2, private el: ElementRef) {}

import { Component } from '@angular/core';
import { MenuNavComponent } from './menu-nav/menu-navponent';

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.scss'],
  standalone: true,
  imports: [MenuNavComponent],
})
export class AppComponent {}

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/appponent';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
}).catch((err) => console.error(err));

• angular
• angular-httpclient
• angular-dependency-injection

Share Improve this question Follow edited Jan 18 at 12:41 JSON Derulo 17.9k1111 gold badges5757 silver badges7575 bronze badges asked Jan 18 at 12:04 SemicolonSemicolon 13755 bronze badges 3

• 1 Where are you using the httpClient? You need to provide HttpClient. provideHttpClient(), – Bruno Rodrigues Commented Jan 18 at 12:11
• i add my others ts for more information – Semicolon Commented Jan 18 at 12:23
• 1 Your setup is confusing, why do you have an appConfig when you don't use it in app.config.ts? – JSON Derulo Commented Jan 18 at 12:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In app.config.ts add provideHttpClient() to appConfig:

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
    provideHttpClient()
  ]
};

本文标签： angularNullInjectorError R3InjectorErrorStack Overflow