provideHttpClient "Type 'EnvironmentProviders' is not assignable to type 'Provider'. Error in...

I am working on an Angular 18 application and was getting errors from the depreciated "HttpClientModule" so I moved to provideHttpClient and keep getting the "Type 'EnvironmentProviders' is not assignable to type 'Provider' error.

Error


Type 'EnvironmentProviders' is not assignable to type 'Provider'.

app.component.ts


import { Component, ViewEncapsulation } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
providers: [provideHttpClient(withFetch())],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],

})
export class AppComponent {
title = 'chat-frontend';
}

app.config.ts


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

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


main.ts


import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

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

main.server.ts


import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';
import { provideHttpClient, withFetch } from '@angular/common/http';

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

Continue reading...