CODEWITHSUNDEEP
node.jsangulartypescript
Brandon Taylor
Brandon Taylor

Reputation: 34593

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

My Angular application is served via Node 16.13.0. After updating to Angular 13, I'm receiving the following error:

JIT compilation failed for injectable [class PlatformLocation] file:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules/@angular/core/fesm2015/core.mjs:4058 throw new Error(message); ^

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. at getCompilerFacade (file:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules/@angular/core/fesm2015/core.mjs:4058:15) at Module.ɵɵngDeclareFactory (file:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules/@angular/core/fesm2015/core.mjs:32999:22) at file:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules/@angular/common/fesm2015/common.mjs:90:28 at ModuleJob.run (node:internal/modules/esm/module_job:185:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:281:24) at async loadESM (node:internal/process/esm_loader:88:5) at async handleMainPromise (node:internal/modules/run_main:65:12)

I have tried numerous solutions, such as: Angular JIT compilation failed: '@angular/compiler' not loaded

Currently, I have "type": "module" in my package.json

I have updated my postinstall command to: ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points

I also added import '@angular/compiler'; to my main.ts file.

The project will compile, but won't run via Node.

Upvotes: 30

Views: 24776

Answers (8)

Kicoman2
Kicoman2

Reputation: 1

I ran into this today, I was downgrading a angular service and using it in a angularjs module. all that was fine, but what was blowing up was in one test file was importing the actual module and not mocking it out. Once I removed the module from the test and mocked it instead the error was resolved.

Upvotes: 0

Plevi
Plevi

Reputation: 126

In my case the problem was that I added some utility code for testing to the test-setup.ts file, that had nothing to do with jest.

An import for my code preceded the jest stuff, after I reorganized the imports so the jest stuff is first, it worked.

It seems like a good place to put stuff for testing, but I'll avoid it from now on.

Upvotes: 0

Buk1m
Buk1m

Reputation: 99

None of the solutions worked for me, after hours of debugging and copying main from clean project I found out it was due to the order of imports in main.ts.

I had to move the AppModule to be after the platformBrowserDynamic like below:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app/root/app.module'

Angular 13.4.0, custom webpack config with webpack 5.76.1

Upvotes: 0

Dessus
Dessus

Reputation: 2177

In my case it was to add the following (which I guess forces the compiler to be present for angular):

    TestBed.configureTestingModule({
      declarations: [FormPreviewEventsService],
    }).compileComponents();

The code sits in the beforeEach() for Jest.

I still create my service like I did before:

service = new FormPreviewEventsService();

Upvotes: 0

sdv
sdv

Reputation: 1

The solution to this problem in my case was missing the following configuration in the jest.config.js file:

setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']

Configuration

Upvotes: 0

Vitalii Malynka
Vitalii Malynka

Reputation: 51

If I correctly understand, you use Angular Universal also.

I want to share my experience with the same problem which came to my project after updating Angular from v8 to v13.

First of all, I want to say that the main problem was with the incorrect started file for SSR. In my project, it was server.js and now it's main.js. So, maybe your project also tries to start from the incorrect file which doesn't have the necessary code to start it.

More details:

I updated the project step by step, increasing the version as recommended by the Angular team and according to https://update.angular.io/?l=3&v=8.2-13.0

Unfortunately, at every step, I only checked the version of SPA without SSR and only compiled the project to check that all is OK, but didn't start it with SSR. Now I can't say when the problem with the JIT compiler started.

And when I finished updating and fixing bugs with SPA, compiled the project with SSR, and tried to start it I saw this problem:

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

I tried different solutions like you, but nothing helped. After that, I created a new clean project with ng13 and added Angular Universal. And compare my project with new, generated by Angular-CLI.

What I changed in my project(sorry, I can't show the project - NDA):

  1. angular.json

"projects": {
  "projectName": {
    ...
    "architect": {
      ...
      "server": {
        ...
        "options": {
            "outputPath": "dist/server",
            //"main": "src/main.server.ts", //removed
            "main": "server.ts", //added
            ...
        }
      }
    }
  }
}

  1. package.json

"scripts": {
  ...
  //"serve:production:ssr":   "node dist/server --production" // removed. It was incorrect file server.js which gave the error from this case
  "serve:production:ssr":   "node dist/server/main --production", // added
  ...
  "postinstall": "ngcc --properties es5 browser module main --first-only" // added. In my case, actual version is es5
}

3.server.ts

import 'zone.js/node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
...
// after all imports I inserted previous code into function run()

...
export function run() {
  // previous code from project with some small changes
}

//and added next code from clean project:

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
    run();
}

export * from '../src/main.server';

  1. src/main.server.ts

// was only:
export { AppServerModule } from './app/app.server.module';

// replaced by code from clean project:

/***************************************************************************************************
 * Initialize the server environment - for example, adding DOM built-in types to the global scope.
 *
 * NOTE:
 * This import must come before any imports (direct or transitive) that rely on DOM built-ins being
 * available, such as `@angular/elements`.
 */
import '@angular/platform-server/init';

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

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

export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

  1. src/main.ts

...
//this part of code
document.addEventListener("DOMContentLoaded", () => {
    platformBrowserDynamic()
        .bootstrapModule(AppModule)
        .catch(err => console.log(err));
});

// replaced by

function bootstrap() {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.error(err));
};


if (document.readyState === 'complete') {
    bootstrap();
} else {
    document.addEventListener('DOMContentLoaded', bootstrap);
}

//but I don't think it plays a role in solving the JIT problem. Wrote just in case

  1. tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app-server",
    "module": "commonjs",// it's only in my case, I don't have time for rewrote server.ts now
    "types": ["node"],
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ],
  "include":["server/**/*.ts","node/*.ts"],
  
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

Ok, I think that's all. After all these edits I don't have file /dist/server.js and start the project from /dist/server/main.js without error from this case.

N.B.: When I was updating the project step-by-step I noticed that the process of updating nguniversal by Angular-CLI didn't change anything in the project. Only the version of packages. That's why I recommend comparing your project with an actual clean project manually

Upvotes: 3

RushPL
RushPL

Reputation: 4805

It seems angular 13 made babel-loader a mandatory requirement to link Ivy-native packages. https://github.com/angular/angular/issues/44026#issuecomment-974137408 - and the issue is happening as core Angular libraries are already compiled with the Ivy package format.

I haven't yet made the change in my own projects, but processing .mjs files with babel and a special linker should be enough.

import { dynamicImport } from 'tsimportlib';

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
export default async (options: IWebpackOptions) => {
    const linkerPlugin = await dynamicImport('@angular/compiler-cli/linker/babel', module);
    
    const config: any = {
        module: {
            rules: [{
                test: /\.mjs$/,
                loader: 'babel-loader',
                options: {
                    compact: false,
                    plugins: [linkerPlugin.default],
                },
                resolve: {
                    fullySpecified: false
                }
            }
        }
    }
}

I'll make more updated to this post once I am able to test it myself.

Upvotes: 7

Brett Eckert
Brett Eckert

Reputation: 247

I believe I have found the solution (presuming you are using jest as your test runner). In the test-setup.ts file my project still was using the outdated import for jest-preset-angular. Instead of import 'jest-preset-angular'; try using import 'jest-preset-angular/setup-jest';.

This addressed the issue for me.

Upvotes: 20

Related Questions