嘗試從 single-spa 中的共享角度庫加載組件時出現此錯誤。（應用程式和庫的角度為 14）
**core.mjs:4082 JIT compilation failed for component class t{constructor(){console.log("I am inside my-lib-component")}ngOnInit(){}}
zone.js:192 Uncaught Error: The component 't' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The component 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 (core.mjs:4101:15)
at Object.??ngDeclareFactory (core.mjs:29496:22)
at main.js:1:1247
at main.js:1:1593
at main.js:1:2699
at Object.execute (main.js:1:2705)
at i (system.min.js:4:3448)
at t (system.min.js:4:3417)
at system.min.js:4:3280
at Array.forEach (<anonymous>)**
我按照此處的檔案將 babel 鏈接配置包含
//extra-webpack.config.js
import pckg from 'single-spa-angular/lib/webpack';
import pckg1 from 'webpack-merge';
import linkerPlugin from '@angular/compiler-cli/linker/babel';
export default function (config, options) {
const singleSpaWebpackConfig = pckg.default(config, options);
return pckg1.default(singleSpaWebpackConfig, {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
plugins: [linkerPlugin],
compact: false,
cacheDirectory: true,
}
}
}
]
}
});
};
這是我的 angular.json 庫的構建配置
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist",
"index": "projects/my-lib/src/index.html",
"main": "projects/my-lib/src/main.single-spa.ts",
"customWebpackConfig": {
"path": "projects/my-lib/extra-webpack.config.js",
"libraryName": "@my-org/my-lib",
"libraryTarget": "system",
"excludeAngularDependencies": true
},
"deployUrl": "http://localhost:4304/"
},
"configurations": {
"production": {
"tsConfig": "projects/my-lib/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/my-lib/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
如何解決？
uj5u.com熱心網友回復：
最后我得到了角度共享庫，使用 angular.json 中的標準配置（沒有 single-spa 修改）
這是我需要做的。
標準角度庫配置和輸出（es6）
組態檔
“angularCompilerOptions”：{“compilationMode”：“完整”}
npm 安裝 npx @babel/plugin-transform-modules-systemjs --save-dev
- 運行命令將 es6 模塊轉換為 systemjs 格式
$> babel --plugins @babel/plugin-transform-modules-systemjs dist/fesm2015/my-lib.mjs -d dist/fesm2015/main
- system-js 匯入這個新的 dist/fesm2015/main/.js 在 importmaps 中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/537013.html