javascript - Angular 14: Den injiserbare 'PlatformLocation' må kompileres ved bruk av JIT-kompilatoren, men '@angular/compiler' er ikke tilgjengelig

Jeg står overfor denne feilen, har prøvd et par løsninger, men ingen av dem fungerer:

Feil: Den injiserbare 'PlatformLocation' må kompileres ved bruk av JIT-kompilatoren, men '@angular/compiler' er ikke tilgjengelig.

Den injiserbare delen er en del av et bibliotek som delvis har blitt kompilert. Imidlertid har ikke Angular Linker behandlet biblioteket slik at JIT-kompilering brukes som reserve.

Ideelt sett blir biblioteket behandlet ved bruk av Angular Linker for å bli fullstendig AOT-kompilert. Alternativt bør JIT-kompilatoren lastes ved oppstart ved bruk av '@angular/platform-browser-dynamic' eller '@angular/platform-server', eller manuelt gi kompilatoren med 'import "@angular/compiler";' før oppstart.

Så som jeg sa, har jeg prøvd forskjellige tilnærminger som jeg fant på internett:

  1. Brukte babel-loader som ser ut til å være obligatorisk:

Min 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 }
        }]
      }]
  }

I dette tilfellet kan det hende at det å legge den enkle strengen '@angular/compiler-cli/linker/babel' inn i plugins-arrayen er grunnen, men jeg kan ikke importere den på grunn av det:

import linkerPlugin fra '@angular/compiler-cli/linker/babel'; ^^^^^^SyntaxError: Kan ikke bruke import-setning utenfor en modul

Og når jeg endrer type til module i package.json, får jeg problemer med:

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const { merge: webpackMerge } = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
....

Som jeg bruker i min tilpassede webpack-konfigurasjon.

  1. Jeg prøvde å kjøre npm update - ingenting.
  2. Jeg la import '@angular/compiler'; som den første importen i app.main.ts (jeg vet at det ikke er den beste løsningen, men selv med det fortsetter den å kaste feilen)

En bunke med informasjon som kan være nyttig:

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"
  ]
}

Jeg står virkelig fast på dette steget og kan ikke finne noen annen løsning.. kanskje noen av dere kan hjelpe meg?

Svar #1

I prosjektet mitt har jeg en tilpasset webpack-konfigurasjonsfil, webpack.config.js, som importerer AngularWebpackPlugin fra @ngtools/webpack.

Jeg løste problemet ved å legge til '@angular/compiler' til jitMode.

Min webpack.config.js er som

new AngularWebpackPlugin({
  ...
  jitMode: '@angular/compiler'
})

Referanse: https://www.npmjs.com/package/@ngtools/webpack

Håper det hjelper!

Relaterte artikler