TL;DR：我正在尝试使用Angular Elements作为Angular应用程序的插件。--prod如果我在我的应用程序上使用它构建元素ng serve（开发设置），但是当我在我的应用程序上使用它ng serve --prod或在ng build --prod我的应用程序（生产设置）之后使用它时，它会无限重新加载。
虽然，如果我构建元素添加--optimization=false，可以与我的生产应用程序一起使用，但不适用于我的开发设置。
问题是，我期待构建一个Angular Element对这--prod两种情况都很好。
问题：有没有办法解决这个问题？
现在，长读。
在工作中，我们试图在我们的Angular站点中使用可配置的插件，其中服务器是告诉哪个插件处于活动状态或不处于活动状态的服务器。
我们尝试动态加载Angular模块，但这是一个完全不同的头痛问题，我们将其搁置了另一天。
所以，我们接下来想尝试的是Angular Elements，它有点工作，除非我们按照它应该的方式构建所有东西。
首先，我开始关注本教程https://scotch.io/tutorials/build-a-reusable-component-with-angular-elements/amp并忽略了所有内容，okta因为我的功能有所不同。
创建：
我使用下一个命令创建了我的核心应用程序，这将是托管插件的应用程序：
ng new core --routing --skip-git --style scss --skip-tests --minimal
然后我使用这个命令创建了一个插件/角度元素：
ng new plugin --skip-git --style scss --skip-tests --minimal
插入：
在所有创建之后，我进入我的插件并在 中评论了这一行polyfills.ts，我在这个站点的某个地方读到它解决了NgZone已经加载的问题，这是真的：
// import 'zone.js/dist/zone'; // Included with Angular CLI.
为了解决Angular如何创建元素的问题，tsconfig.json我改成"target": "es5"了。不太确定这是如何工作的，但stackoverflow建议它并且它成功了。"target": "es2015"
app.module.ts我按照教程中的想法和其他一些我丢失了链接的想法将其编辑为类似的内容：
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
providers: [
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
],
entryComponents: [
AppComponent,
],
})
export class AppModule {
constructor(private injector: Injector) {
const elem = createCustomElement(AppComponent, { injector: this.injector });
customElements.define('my-plugin', elem);
}
ngDoBootstrap() {
}
}
注意：我添加了CUSTOM_ELEMENTS_SCHEMA因为我在某个地方找到了它，但它没有解决它（另外，我不确定它的作用）。
在app.component.ts我这样做是为了在其模板中显示一些属性：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
public content: any = {
a: 10,
b: '20',
}
}
app.component.html看起来像这样：
Some content:
<pre>{{content | json}}</pre>
在package.json文件中，我有三个脚本来构建所有：
{
"scripts": {
"build": "npm run build:opt && npm run build:noopt",
"build:opt": "ng build --prod --output-hashing none && node build-elements.js",
"build:noopt": "ng build --prod --output-hashing none --optimization=false && node build-elements.noopt.js"
}
}
该文件build-elements.js如下所示（build-elements.noopt.js与不同的目标名称相同）：
'use strict';
const concat = require('concat');
const fs = require('fs-extra');
const path = require('path');
(async function build() {
const files = [
'./dist/plugin/runtime.js',
'./dist/plugin/polyfills.js',
'./dist/plugin/scripts.js',
'./dist/plugin/main.js',
];
const destinationDir = path.join(__dirname, '../core/src/assets');
await fs.ensureDir(destinationDir);
await concat(files, path.join(destinationDir, 'my-plugin.js'));
})();
核：
对于主机应用程序，我添加了一个名为的组件embedded，默认路由会转到它。
然后我使用一些Bootstrapembedded.component.html类将其更改为这样的：
<div id="embedded-container" class="container border border-primary rounded mt-5 p-3" #container>
<pre>Loading...</pre>
</div>
最后，embedded.component.ts以这样的方式结束，展示了实际的加载机制：
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-embedded',
templateUrl: './embedded.component.html',
})
export class EmbeddedComponent implements OnInit {
@ViewChild('container') public container: ElementRef;
constructor(protected activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe((params: Params) => {
const script = document.createElement('script');
if (params['how-it-should-be'] !== undefined) {
script.src = environment.production ? '/assets/my-plugin.js' : '/assets/my-plugin-no-optimization.js';
} else {
script.src = environment.production ? '/assets/my-plugin-no-optimization.js' : '/assets/my-plugin.js';
}
document.body.appendChild(script);
const div = document.createElement('div');
div.innerHTML = '<my-plugin></my-plugin>';
this.container.nativeElement.innerHTML = '';
this.container.nativeElement.appendChild(div);
});
}
}
跑步：
如果我运行ng serve并浏览到http://localhost:4200，页面加载没有问题，注入插件，将新元素添加到 DOM 并显示来自我的插件的消息。如果您调试应用程序，您会看到它已加载/assets/my-plugin.js，这是为生产而构建的。除了调试之外，这不会是一个问题。
然后，如果我运行ng serve --prod（或构建它用于生产）它也可以正常工作，但它会加载/assets/my-plugin-no-optimization.js，它是为“调试”而构建的。
这是我最终在我们的实际应用程序中使用的解决方案，但是正如您所看到的，我没有在我的插件中使用优化代码进行生产，这并不好......一点也不。
为了证明我的观点，如果我浏览到http://localhost:4200/?how-it-should-be，它将尝试为 加载优化插件ng serve --prod和为ng serve. 请注意，这会使您无限重新加载，请打开浏览器开发人员工具来查看它。
我们使用的最终产品要复杂得多，但这些示例的基本逻辑并没有真正起作用。
我还使用它创建了一个 GitHub 存储库，您可以在其中查看这些代码，并自己尝试解决问题，或者用作您自己想法的示例。
如果您想知道我是如何发现使用--optimization=false有点修复它的，那么，我试图调试这个问题（这被证明是不可能的）并且突然它加载了。
我看了看时间，对于生产部署来说已经晚了两个小时，所以我添加了那个丑陋的机制来根据环境加载不同的构建。它在开发和生产中都有效，但我并不为此感到自豪。
对不起，如果我的英语不好...不不不，我的英语不好，对不起^__^