我最近下载了Angular CLI(@angular/cli 9.0.1)。然后我继续创建一个新应用程序，以便我可以创建一个新的 Angular 元素，将其打包，然后在另一个应用程序中使用它。
在关注了一些博客之后，我遇到的每个博客的最后一步都在谈论从 dist/ 文件夹下生成的文件创建单个 JS 文件。例如：https : //blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457
然后使用cat命令，我们串接runtime.js， polyfills.js，scripts.js中，并main.js从位于dist /角app文件夹的文件到预览文件夹内的文件angularapp.js。
ng build angular-app --prod --output-hashing=none相反，运行似乎会产生名为：
我搜索了每个包含es5和es2015术语的文件并将其更改为es6，但它仍然产生相同的es5和es2015文件名。我在这里做错了什么？
如您所知，“ ng g库”方法可帮助我们创建可重用组件的库。但是，如果我希望通过Angular Elements的支持将那些组件编译为Web组件呢？不仅如此，库中的每个组件都将被编译到其自己的文件夹或JS文件中。如何配置一个开发环境以实现这一目标？
例如：
如果创建一个Lib并添加一个自定义组件，我知道我可以对其进行编译，生成一系列文件夹，例如esm5，esm2015，fesm5等。现在，问题是：如何添加，比如说30个自定义组件到我的库中，然后在编译时，它将为每个组件创建一个文件夹，其中包含它们的Web组件版本...仿佛Angular Elements遍历了我的组件库并生成了每个组件的Web组件版本。
像这样：
lib/
lib/custom/comp1
lib/custom/comp2
lib/custom/comp3
lib/custom/comp4
变成类似以下内容：
Dist/
Dist/custom/
Dist/custom/bundle
Dist/custom/esm5
Dist/custom/esm2015
Dist/custom/comp1_web_independend_component_version
Dist/custom/comp2_web_independend_component_version
Dist/custom/comp3_web_independend_component_version
Dist/custom/comp4_web_independend_component_version
我找到的最接近的解决方案是这样的：
https://medium.com/@rahulsahay19/running-multiple-angular-elements-on-the-same-page-5949dac5523
我还要求Angular CLI团队提供帮助：
我使用Pascal Precht的教程通过Angular构建了一个简单的Web组件,您可以在这里看到它.它自动神奇地编译链接中的Stackblitz,但不是本地.
我的最终目标是将生成的Web组件的代码放在本地的单独文件中.最终,我会将其上传到某处并通过单个<script>标签将其拉入,就像普通的raw-html/javascript Web Components一样.我认为问题不言自明,但如果您愿意,可以阅读以下详细信息:
要在上面的链接中总结我的代码,我有一个非常基本的组件:
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `<h1>Hello world</h1>`
})
export class HelloComponent {}
我有一个模块:
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements'
import { HelloComponent } from './hello.component';
@NgModule({
imports: [BrowserModule],
declarations: [HelloComponent],
entryComponents: [HelloComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const HelloElement = createCustomElement(HelloComponent, …我们有一个现有的Angular 8项目，其中包含许多常用组件（例如custom datepickers, numeric inputs, ...）。该项目本身是一个标准的Angular应用程序。
我们希望将其中一些组件提取为Angular元素，以便可以在其他Angular应用程序甚至与Angular不相关的其他项目中使用。
是否可以通过仅在生成的JavaScript文件中包含特定于单个Angular元素的代码的方式构建项目？
我需要的是这样的：
ng build --element myDatePicker
这应该myDatePicker-Element只为所有具有所有所需依赖项的项目生成所有JavaScript文件，而无需从项目中获取任何其他代码（如other components, modules, ...）。
使用时，整个应用仍应正常构建ng build。
我正在创建一个Angular Element用于其他项目.元素是在其模板中包含Angular Material组件的组件,因此最终我的元素要求页面<link>一个Material主题CSS文件(以及材质图标和材料字体文件,并且link标签只能出现在文档中<head>).
很高兴地说,所需要的只是在页面上调用platformBrowser().bootstrapModuleFactory(...)和写入<some-custom-element>而没有进一步的指令.那可能吗？
要求我的自定义元素的用户链接到<head>他们页面中的所有CSS文件是否可以接受？我想这个模式,以后添加新的依赖项不会是向后兼容的更改,我必须告诉大家添加新的CSS文件或创建一个新的自定义元素.
我在 VSCode( 1.44.0-insider ) 中使用 Angular9 创建 Angular Elements 时收到一个奇怪的警告：
export class AppModule {
constructor(private injector: Injector) {
const helloElement = createCustomElement(HelloComponent, {injector});
customElements.define('my-hello', helloElement);
}
ngDoBootstrap() {}
}
类型helloElement不接受，并带有来自打字稿的错误消息：
“NgElementConstructor”类型的参数不可分配给“CustomElementConstructor”类型的参数
TL;DR：我正在尝试使用Angular Elements作为Angular应用程序的插件。如果我在我的应用程序上使用--prod它构建元素ng serve（开发设置），但是当我ng serve --prod在我的应用程序上使用它时或在ng build --prod我的应用程序（生产设置）之后使用它时它会无限重新加载。
但是，如果我构建了元素添加--optimization=false，则适用于我的高效应用程序，但不适用于我的开发设置。
关键是，我期待的是建立一个角形元件用--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 …我正在构建一个角度元素并将一些输入参数传递给它。我可以很好地传递一些字符串输入参数（ikrId 和环境工作得很好），但是很难通过角度元素将布尔值传递给 showTitle 输入属性（将 showTitle 属性从父角度组件传递给组件工作正常）。
这是组件片段：
export class MyComponent implements OnInit, OnDestroy {
@Input() ikrId: string;
@Input('environment') environment: IkrEnvironment = 'PROD';
@Input('showTitle') showTitle = true;
这是我在普通旧 html 中使用它的方式：
<my-element environment="DEV" ikr-id="889fb69f-71a5-4881-8528-0b43a07599f0" show-title="false"></my-element>
但是节目标题没有传递到我的组件中，它总是正确的。
我在这里缺少什么？
谢谢！
我尝试让 Angular Elements 在 IE11 中工作。我的自定义元素（简单按钮）已经显示，输入绑定按预期工作，但输出绑定没有。
在 IE 11 中单击我的自定义元素按钮会导致错误：
该对象不支持此操作
到目前为止我做了什么：
ng add @angular/elements（在 IE 中无法正常工作）将所有 Angular 包更新为 7.2.1
将以下 polyfills 添加到polyfills.ts：
import 'core-js/shim'
import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';
手动引导模块
ng build --output-hashing=none并将所有生成的文件打包到btn-element.js其中http-server用于本地测试（请参阅下面的index.html）。
我错过了特定的 polyfill 还是我做错了什么？或者它只是不可能？
app.module.ts:
@NgModule({
declarations: [ ButtonComponent ],
imports: [ BrowserModule ],
entryComponents: [ ButtonComponent ]
})
export class AppModule {
constructor(private injector: Injector) {
const customBtn = createCustomElement(ButtonComponent, { injector …internet-explorer-11 custom-element angular angular-elements
我的团队处理多个角度项目。为了代码重用，我们将许多表示组件提取到库中，然后在我们的各种项目中使用它们。
那么，鉴于我们所有的项目都是基于 angular 的，而且我们已经使用了库，我们还能从 angular 元素中获得什么？
我开始研究元素的原因是：
我们的大部分旧项目都使用 Bootstrap 3。我们希望将 Bootstrap 4 与我们制作的新东西一起使用。所以我想知道一个元素是否可以用 Bootstrap 4 设计，并在用 B-3 设计的地方使用它而不会破坏？
那可能吗 ？
angular ×10
angular-elements ×10
angular-cli ×3
javascript ×2
typescript ×2
angular6 ×1
ng-packagr ×1
plugins ×1
webpack ×1