Issues with integrating HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService) in Angular Standalone Application

Question

I'm trying to use HttpClientInMemoryWebApiModule in an Angular standalone application and I'm encountering a [NullInjectorError]. My goal is to configure InMemoryDataService with forRoot. Here is an excerpt from my app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';`

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [
        CommonModule,
        HttpClientModule,
        HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService),
    ],

}`

I'm getting an error with the message:

NullInjectorError: R3InjectorError(Standalone[AppComponent -> InMemoryDataService -> _HttpClient]): NullInjectorError: No provider for _HttpClient!

How can I correctly integrate HttpClientInMemoryWebApiModule in an Angular standalone application?

Answer 1

You should add the providers directly in boostrapApplication

bootstrapApplication(AppComponent, {providers: [
    provideHttpClient(), 
    importProvidersFrom([
      HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService)
    ]),
]});