CODEWITHSUNDEEP
angularangular-servicesangular-standalone-components
Patryk
Patryk

Reputation: 1207

NullInjectorError - Root standalone component does not import HttpClientModule properly

I have an issue, I want to rewrite my app code and change main module to main root standalone component pointed in main.ts.

All works fine but I have an issue with HttpClientModule. I am using HttpClient in one of services which is provided in root. In MainComponent i added HttpClientModules to imports array but then error occurs which is saying I didn't provided HttpClientMoudle to app and this service can't use it.

Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[MainComponent])[MainService -> MainService -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!

When I added this HttpClientModule to AppRoutingModule which I also added to main.ts as

bootstrapApplication(MainComponent, {
  providers: [importProvidersFrom(RoutingModule)],
});

it works fine, service has no any problem.

Here is a code with basic example of this problem, could someone explain me why import to root standalone component doesn't work in this case but import to RoutngModule is solves the problem?

https://stackblitz.com/edit/angular-fhpbvm?file=src/main.ts

Upvotes: 27

Views: 23244

Answers (6)

Luca Ziegler
Luca Ziegler

Reputation: 4164

Got it, my main.ts was also not using the appConfig, the main.ts should look like this:

import {
  bootstrapApplication,
  provideProtractorTestingSupport,
} from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

And the app.config.ts:

...
import { provideHttpClient } from '@angular/common/http';
...

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

Upvotes: 0

Gihan Jayakuru
Gihan Jayakuru

Reputation: 121

in my case occured NullInjectorError in standalong Angular app. Fixed by adding provideHttpClient() in app config providers.

//app.config.server.ts
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [provideServerRendering()],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);




//app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

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

Upvotes: 2

fm_manueljesus00
fm_manueljesus00

Reputation: 109

In my case, I use this:

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


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

Upvotes: 0

Maxime GH
Maxime GH

Reputation: 635

In my case, I solved the problem as follows

import { provideHttpClient } from "@angular/common/http";
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

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

In this way, you explicitly provide the providers provideRouter(routes) and provideHttpClient() to the application. These providers can be used to configure specific features of the application, such as configuring routing and initialising a custom HTTP client.

Upvotes: 0

Muhammad-Ali
Muhammad-Ali

Reputation: 103

This might be helpful:

boostrapApplication(App, {providers: [
  provideHttpClient(),
]});

Upvotes: 0

Patryk
Patryk

Reputation: 1207

Problem solved. In this case, I have to add provideHttpClient()to providers array in bootstrapApplication() function in main.ts file.

import { provideHttpClient } from "@angular/common/http";

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AppRoutingModule),
    provideHttpClient()
  ]
})

Upvotes: 77

Related Questions