I've encountered the following error and have tried multiple solutions, but none of them have been successful:
Error: The injectable 'PlatformLocation' requires JIT compilation with '@angular/compiler', which is not available.
This injectable is part of a partially compiled library. The Angular Linker has not processed the library for JIT compilation fallback.
The ideal solution would be to process the library using the Angular Linker for full AOT compilation. Alternatively, bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server' to load the JIT compiler, or manually import the compiler with 'import "@angular/compiler";' before bootstrapping.
As mentioned, I have tried various approaches found online:
- Using babel-loader, which appears to be necessary:
In my webpack.js:
module: {
rules: [
{
test: /\.ts$/,
use: [
'@ngtools/webpack',
{
loader: 'cache-loader',
options: {
cacheDirectory: path.resolve('target/cache-loader')
}
},
{
loader: 'thread-loader',
options: {
workers: require('os').cpus().length - 1
}
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: true
}
}
],
exclude: /(node_modules)/
},
{
test: /\.m?js$/,
exclude: {
and: [/node_modules/],
not: [
/unfetch/,
/d3-array|d3-scale/,
/@hapi[\\/]joi-date/,
]
},
use: {
loader: 'babel-loader',
options: {
plugins: ['@angular/compiler-cli/linker/babel'],
compact: false,
cacheDirectory: true,
}
}
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', {
loader: 'sass-loader',
options: { implementation: sass }
}],
exclude: /(vendor\.scss|global\.scss)/
},
{
test: /(vendor\.scss|global\.scss)/,
use: ['style-loader', 'css-loader', 'postcss-loader', {
loader: 'sass-loader',
options: { implementation: sass }
}]
}]
}
The issue may lie in simply adding
'@angular/compiler-cli/linker/babel'import linkerPlugin from '@angular/compiler-cli/linker/babel'; ^^^^^^ SyntaxError: Cannot use import statement outside a module
When changing type to module in package.json, I encounter problems with:
const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const { merge: webpackMerge } = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
....
This is used in my custom webpack configuration.
- Attempting to run
npm updateyielded no results. - Adding
import '@angular/compiler';as the first import in app.main.ts (despite not being the best practice) still resulted in the same error.
https://i.sstatic.net/lFdsB.png
Here are some potentially helpful details:
Package Version
@angular/cdk-experimental 14.2.7
@angular/cli 14.2.10
@angular/flex-layout 14.0.0-beta.41
@angular/material 14.2.7
@angular/material-moment-adapter 14.2.7
@ngtools/webpack 14.2.10
@schematics/angular 14.2.10
rxjs 7.4.0
typescript 4.6.4
webpack 5.75.0
tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "node",
"sourceMap": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"skipLibCheck": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "target/classes/static/app",
"lib": [
"ES2020",
"dom"
],
"typeRoots": [
"node_modules/@types"
],
"baseUrl": "./",
"paths": {
"app/*": [
"src/main/webapp/app/*"
]
},
"importHelpers": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true
},
"files": [
"src/main/webapp/app/app.main.ts",
"src/main/webapp/app/polyfills.ts"
],
"exclude": [
"node_modules"
]
}
I'm truly stuck at this point and unable to find any other solutions. Perhaps someone here can assist me?