Angular 18 -- Error: The injectable 'Http2' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available

Question

I am upgrading an old project of mine from Angular ~7 to ~18. After fixing ALL the TS warnings and errors, the project compiles successfully. However, when I run npm start and hit localhost:4200 I am facing an error that is proving difficult to nail down.

Error: The injectable 'Http2' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available. JIT compilation is discouraged for production use-cases! Consider using AOT mode instead. Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server', or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping. — chunk-3NVXP5OT.js:3825

My project is bootstrapped in main.ts like this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

I have already verified that @angular/compiler is defined in package.json as a dependency:

"@angular/compiler": "18.0.1",

and the @angular/compiler-cli is a devDependency:

"@angular/compiler-cli": "^18.0.1",

within my app.module.ts I am using:

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

and then setting this on the module's providers property like this:

providers: [provideHttpClient(withInterceptorsFromDi()), ...]

I have a service, UserService that injects the angular http object and that is the only place actually using it.

My guess is that I've missed a step in the upgrade process. Jumping nearly 10 major versions leaves a lot of room for errors but I feel so close! Any help or suggestions would be greatly appreciated.

Just trying to find documentation about the http client is proving challenging. Take a look at the official docs which are sparse to say the least https://angular.dev/guide/http

Answer 1

Figured it out. For anyone who arrives here in the future, here's what fixed it for me:

Turns out I was still importing the old Http stuff from angular:

import {Headers, Http} from '@angular/http';

This was happening in a few files, and I was using the Http in my service constructor, which was using dependency-injection.

constructor(private http: Http) {}

So, despite there being no typescript errors this was still an error, I guess? You cannot, or should not, have the older Http interface being used in your application after you've fully migrated to the new version using

providers: [provideHttpClient(withInterceptorsFromDi()), ...],

in your main app.module.ts