Angular 与网页包外部一样有角度_Angular_Webpack_Micro Frontend_Webpack Externals_Single Spa Angular

Angular 与网页包外部一样有角度

angular webpack

Angular 与网页包外部一样有角度,angular,webpack,micro-frontend,webpack-externals,single-spa-angular,Angular,Webpack,Micro Frontend,Webpack Externals,Single Spa Angular,我目前正试图通过网页包外部化角度依赖来降低构建时间。到目前为止，我已经在React和其他小型库中实现了这一点，没有任何问题如果我只是移动“@angular/compiler”，它也可以工作，但是当外部化“@angular/core”和其他文件时，我收到一个无法解析ApplicationModule:（？）at SyntaxeError（util.ts:100）at CompileMetadata resolver.\u getDependenciesMetadata（metadata\u re

我目前正试图通过网页包外部化角度依赖来降低构建时间。到目前为止，我已经在React和其他小型库中实现了这一点，没有任何问题

如果我只是移动“@angular/compiler”，它也可以工作，但是当外部化“@angular/core”和其他文件时，我收到一个

无法解析ApplicationModule:（？）at SyntaxeError（util.ts:100）at CompileMetadata resolver.\u getDependenciesMetadata（metadata\u resolver.ts:957）.

启动应用程序时出错

我使用的文件是您可以在unpkg.com中找到的8.2.14 UMD捆绑包，我的外部文件是：

[
    /^@example\, 
    /^rxjs$/, 
    /^rxjs\/operators$/, 
    /^@angular\/core$/, 
    /^@angular\/compiler$/, 
    /^@angular\/common$/, 
    /^@angular\/common\/http$/, 
    /^@angular\/forms$/, 
    /^@angular\/platform-browser$/, 
    /^@angular\/platform-browser-dynamic$/, 
    /^@angular\/router$/, 
    /^zone\.js$/,
    /^single-spa$/
]

rxjs包就是在这里找到的

您可以在此回购协议上看到错误：

提前谢谢

编辑：多亏了yurzui的回答，这个错误才得以解决。但是，我现在收到另一个错误：

Class constructor I cannot be invoked without 'new'
    at new EventEmitter (event_emitter.ts:78)
    at new NgZone (ng_zone.ts:97)
    at getNgZone (application_ref.ts:358)
    at PlatformRef.bootstrapModuleFactory (application_ref.ts:255)
    at application_ref.ts:308

您需要包括

core js

shim库，以便Angular代码可以使用

Reflect.getownmata

方法从修饰类读取元数据

index.ejs

<% if (isLocal) { %>
  <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <== add this
  <script type="systemjs-importmap">
       ....

<script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
<script src="https://unpkg.com/zone.js"></script>

更新

错误

类构造函数I不能在没有“new”的情况下调用来自rxjs bundle（@esm bundle/rxjs@6.5.4/system/rxjs.min.js
），这意味着此捆绑包未正确构建，无法在浏览器中使用（此处有关于此错误的更多信息）
您可以将umd捆绑包用于rxjs
"rxjs": "https://cdn.jsdelivr.net/npm/rxjs@6.5.4/bundles/rxjs.umd.min.js",
"rxjs/operators": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs@6.5.4/system/rxjs-operators.min.js",

我将分享下面的整个inject.ejs
文件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Root Config</title>
  <meta name="importmap-type" content="systemjs-importmap" />
  <% if (isLocal) { %>
    <!--<script src="https://unpkg.com/core-js@2.6/client/shim.min.js"></script>-->
  <script type="systemjs-importmap">
    {
      "imports": {
        "@example/root-config": "http://localhost:9000/root-config.js",
        "@example/angular": "http://localhost:4200/main.js",

        "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.1.0/system/single-spa.dev.js",

        "rxjs": "https://cdn.jsdelivr.net/npm/rxjs@6.5.4/bundles/rxjs.umd.min.js",
        "rxjs/operators": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs@6.5.4/system/rxjs-operators.min.js",

        "@angular/core": "https://unpkg.com/@angular/core@8.2.14/bundles/core.umd.js",
        "@angular/compiler": "https://unpkg.com/@angular/compiler@8.2.14/bundles/compiler.umd.js", 
        "@angular/common": "https://unpkg.com/@angular/common@8.2.14/bundles/common.umd.min.js",
        "@angular/common/http": "https://unpkg.com/@angular/common@8.2.14/bundles/common-http.umd.min.js",

        "@angular/platform-browser-dynamic": "https://unpkg.com/@angular/platform-browser-dynamic@8.2.14/bundles/platform-browser-dynamic.umd.min.js",
        "@angular/platform-browser": "https://unpkg.com/@angular/platform-browser@8.2.14/bundles/platform-browser.umd.min.js",
        "@angular/platform-browser/animations": "https://unpkg.com/@angular/platform-browser@8.2.14/bundles/platform-browser-animations.umd.min.js",

        "@angular/forms": "https://unpkg.com/@angular/forms@8.2.14/bundles/forms.umd.min.js",
        "@angular/router": "https://unpkg.com/@angular/router@8.2.14/bundles/router.umd.min.js",
        "@angular/animations": "https://unpkg.com/@angular/animations@8.2.14/bundles/animations.umd.js",
        "@angular/animations/browser": "https://unpkg.com/@angular/animations@8.2.14/bundles/animations-browser.umd.min.js",

        "tslib": "https://cdnjs.cloudflare.com/ajax/libs/tslib/1.10.0/tslib.min.js",
        "zone.js": "https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"
      }
    }
  </script>
  <% } %>
  <script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
  <script src="https://unpkg.com/zone.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.min.js"></script>
</head>
<body>
  <main id="main"></main>
  <script>
    System.import("@example/root-config");
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>


根配置
{
“进口”：{
“@example/root-config”：”http://localhost:9000/root-config.js“，
“@example/angular”：”http://localhost:4200/main.js",
“单人水疗”：https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.1.0/system/single-spa.dev.js",
“rxjs”：https://cdn.jsdelivr.net/npm/rxjs@6.5.4/bundles/rxjs.umd.min.js“，
“rxjs/运营商”：https://cdn.jsdelivr.net/npm/@esm包/rxjs@6.5.4/system/rxjs operators.min.js“，
“@角度/核心”：”https://unpkg.com/@棱角的/core@8.2.14/bundles/core.umd.js“，
“@angular/compiler”：”https://unpkg.com/@棱角的/compiler@8.2.14/bundles/compiler.umd.js“，
“@angular/common”：”https://unpkg.com/@棱角的/common@8.2.14/bundles/common.umd.min.js“，
“@angular/common/http”：”https://unpkg.com/@棱角的/common@8.2.14/bundles/common http.umd.min.js“，
“@角度/平台浏览器动态”：”https://unpkg.com/@角度/平台浏览器-dynamic@8.2.14/捆绑包/平台浏览器dynamic.umd.min.js“，
“@角度/平台浏览器”：”https://unpkg.com/@角度/平台-browser@8.2.14/bundles/platform browser.umd.min.js“，
“@角度/平台浏览器/动画”：”https://unpkg.com/@角度/平台-browser@8.2.14/bundles/platform browser animations.umd.min.js“，
“@angular/forms”：”https://unpkg.com/@棱角的/forms@8.2.14/bundles/forms.umd.min.js“，
“@角度/路由器”：”https://unpkg.com/@棱角的/router@8.2.14/bundles/router.umd.min.js“，
“@角度/动画”：”https://unpkg.com/@棱角的/animations@8.2.14/bundles/animations.umd.js“，
“@角度/动画/浏览器”：”https://unpkg.com/@棱角的/animations@8.2.14/bundles/animations browser.umd.min.js“，
“tslib”：https://cdnjs.cloudflare.com/ajax/libs/tslib/1.10.0/tslib.min.js",
“zone.js”：https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"
}
}
System.import（“@example/root-config”）；
你能创建一个小的github回购协议来复制它吗？我会尝试为明天买一个并更新帖子。我这里有一个简单的回购协议：谢谢！它解决了那个错误，你能解释一下为什么它必须是2.4版本吗？我试过2.6版，但没用。我将更新repo和这个问题，因为在放置core.js之后，它给了我另一个错误（“没有'new'，我不能调用类构造函数”）。再次感谢！！哇！非常感谢你！如果StackOverflow允许的话，我会给你赏金的。我希望我能拿出更多的赏金，因为我已经为此奋斗了很长一段时间，而你的回答非常完美。再次感谢！！！：）