使用另一个角度应用程序的单水疗角共享角libaray(与UI)会产生误差。

Question

我得到这个错误时，试图加载一个组件从一个共享的角度库，在单一温泉。(应用程序和库位于角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链接配置，但是仍然什么也没有发生，我得到了与以前相同的main.js，因此也产生了相同的错误。

​

​

//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"
    },

如何解决这个问题？

Answer 1

最后，我使用了angular.json中的标准配置(没有单一的spa修改)，实现了角共享库的工作。

这是我需要做的。

1. 标准角库配置和输出(es6)
2. tsconfig "angularCompilerOptions"：{ "compilationMode"："full“}
3. ​

npm安装npx @babel/模块-systemjs-保存-dev

1. 运行命令将es6模块转换为systemjs格式

$> babel -plugins@babel/plugin-transform-systemjs dist/dist 2015/my-lib.mjs -d dist/dist 2015/main

1. 系统-js在导入映射中导入这个新的dist/dist 2015/main/.js。