Questions & Answers

I'm facing this error, have tried a couple of solutions but none of them works:

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.

So as I said I have tried a different approaches that I found in the internet:

1. Used babel-loader which seems to be mandatory:

My webpack.js:

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          '@ngtools/webpack',
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.resolve('target/cache-loader')
            }
          },
          {
            loader: 'thread-loader',
            options: {
              // There should be 1 cpu for the fork-ts-checker-webpack-plugin.
              // The value may need to be adjusted (e.g. to 1) in some CI environments,
              // as cpus() may report more cores than what are available to the build.
              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 }
        }]
      }]
  }

In this case maybe putting simple string '@angular/compiler-cli/linker/babel' into plugins array is the reason but I can't importe it because of that:

import linkerPlugin from '@angular/compiler-cli/linker/babel'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

And when I change type to module in package.json then I have 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');
....

Which I use in my custom webpack configuration.

2. I tried to run npm update - nothing.
3. I put import '@angular/compiler'; as a first import in the app.main.ts (I know it is not the best solution but even with that it keeps throwing the error)

A bounch of informations that may be helpful:

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 rly stucked in this step and can't find any other solution.. maybe someone of you can help me?