Angular 13: document config changes necessary when using @ngtools/webpack

Hi,

When trying to update my angular app built using @ngtools/webpack from angular 12 to the upcoming angular 13, I get the following error at runtime:

JIT compilation failed for injectable 
class PlatformLocation {}
core.mjs:4060
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.
    Angular 3
    Webpack 9
core.mjs:4079

The same project works fine when built with angular 12.x (with no other change than a minor adjustment in webpack.config.mjs) so it looks like a regression.

I made a minimal self-contained repository to reproduce the issue at https://github.com/vanackere/ngtools-webpack-bug

To reproduce, simply run npm run dev then npm run serve

Thanks by advance for looking at this !

[JoostK]

I don’t get it. Why do we suddenly have to use Babel when ngcc used to work fine? I am getting the error “The injectable ‘PlatformLocation’ needs to be compiled using the JIT compiler, but ‘@angular/compiler’ is not available.” and nothing makes any sense. Why would Angular libraries trigger the error? Aren’t they supposed to be AOT compatible now?

Angular libraries are compiled into partial compilation output, which is not yet fully AOT compiled. If the linker is not involved during the final build then there is a fallback available using the JIT compiler, which is likely what you’re seeing.

Switching ngcc for Babel would be a REALLY BAD trade as while ngcc runs once per node modules installation, babel runs every time.

You may be missing some key points about ngcc and how using Babel does not have these limitations.

First, ngcc mutates the node_modules directory to store its built artifacts, which is incompatible with package managers such as pnpm/Yarn PnP. Secondly, the output of ngcc can hardly be cached. Any changes to the node_modules tree would invalidate its output, as there is no clear set of inputs that can be used as cache key (apart from the full lock-file of the node_modules installation). Thirdly, ngcc does not parallelize as effectively as Babel can, as ngcc requires topological sorting of its build tasks.

None of these are issues with the linker approach. The linker is able to process a single input file independently, making parallelization and caching more effective. Granted, you have to configure your Babel plugin integration to actually use caching.

[Rush]

I don’t get it. Why do we suddenly have to use Babel when ngcc used to work fine? I am getting the error “The injectable ‘PlatformLocation’ needs to be compiled using the JIT compiler, but ‘@angular/compiler’ is not available.” and nothing makes any sense. Why would Angular libraries trigger the error? Aren’t they supposed to be AOT compatible now?

Switching ngcc for Babel would be a REALLY BAD trade as while ngcc runs once per node modules installation, babel runs every time.