Error:JIT compilation failed for injectable class PlatformLocation {} while doing AngularJS to Angular 13 migration

Question

Doing migration for application form angularjs to angular v13 right now i'm trying to dual boot the application.

and getting the following error in browser console:

Uncaught Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
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.

below are the files i have used to configure this dual boot process.

main.ts

//angularjs imports 

import { DoBootstrap, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ]
})
export class AppModule{
  // Override Angular bootstrap so it doesn't do anything
  ngDoBootstrap() {}
}

// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['codecraft']);
});

i'm not looking to do import '@angular/compiler'; in main.ts although that seems to work temporarily but it causing similar problems later down the line while migrating components.

Ideally i would like to not disable AOT or IVY.

Have tried

1. "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
2. npm update
3. babel-loader in webpack configurations.

Sharisharia

Have you found solution for this ? – Blowbyblow

Answer 1

You are most likely missing importing the angular compiler. In order to solve the issue, add the following line at the top of the main.ts file:

import '@angular/compiler';

Once you have added the above, restart your server and/or build your app again and that should fix it.

Disjunct

This doesn't seem to fix the issue. Adding import '@angular/compiler'; to the top of the main.TS has no found effect for the error. Do you have further suggestions? – Ancell

Answer 2

In my project, where I'm using custom weback configuration, I have 2 entry point files main.ts and bootstrap.ts.

Adding import '@angular/compiler'; at the top of BOTH files fixed the issue for me. Thank you very much

Helbonnas