【发布时间】：2019-01-21 16:01:16
【问题描述】：
我尝试让 Angular Elements 在 IE11 中工作。 我的自定义元素（简单按钮）已经显示并且输入绑定按预期工作，但输出绑定没有。
在 IE 11 中单击我的自定义元素按钮会导致错误：
对象不支持此操作
到目前为止我做了什么：
- 删除使用
ng add @angular/elements添加的自定义元素的 polyfill（无法在 IE 中正常工作） 将所有 Angular 包更新为
7.2.1将以下 polyfillls 添加到
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 });
customElements.define('app-btn', customBtn);
}
ngDoBootstrap() { }
}
button.component.ts：
@Component({
template: `<button (click)="handleClick()">{{ label }}</button>`,
encapsulation: ViewEncapsulation.ShadowDom
})
export class ButtonComponent {
@Input() label;
@Output() myaction = new EventEmitter<number>();
private clicksCt: number = 0;
constructor() { }
handleClick() {
this.clicksCt++;
this.myaction.emit(this.clicksCt);
}
}
index.html
<html lang="en">
<head>
[...]
<script type="text/javascript" src="btn-element.js"></script>
</head>
<body>
<app-btn label="Button Text"></app-btn>
<script>
var button = document.querySelector('app-btn');
button.addEventListener('myaction', function (event) {
console.log('action emitted: ' + event.detail); <!-- not working! -->
});
setTimeout(function () {
button.label = 'Async value change happened...' <!-- working! -->
}, 2000);
}
</script>
</body>
</html>
我也试过<app-btn label="Button Text" (myaction)="test($event)"></app-btn>，但没有成功。
编辑： Minimal Example
在 IE 11 中似乎无法正常工作。要重现我的结果并看到 StackBitz 在 Chrome 中运行时的效果，请按照以下步骤操作：
- 复制到本地机器
- 运行
npm install - 运行
npm run build && npm run package:win（适用于 Windows） - 为
index.html和生成的btn-element.js提供http-server
【问题讨论】：
-
无法根据您的 polyfills.ts 重现您的问题，它会显示模块未找到错误（即使我安装了 webcomponents）。那么，您能否像Minimal, Complete, and Verifiable example 一样发布足够的代码来重现该问题。否则，我会尝试使用 @angular/elements 创建自定义元素，并将显示结果。
-
另外，我建议你可以使用F12开发者工具检查btn-element.js文件是否加载成功，是否包含一些js错误。
-
感谢您抽出宝贵时间。我想通过检查我是否忘记发布相关的代码，我发现了错误。可悲的是，当我想重复验证它的步骤时，我无法检查它，因为如果我打开开发工具，IE 就会一直崩溃。因此，如果您还打包它们并且它们在 IE 11 中工作，我会非常感兴趣您是如何创建 CE 的。
-
@ZhiLv-MSFT 还是添加了 StackBitz example。
-
@jowey 你明白了吗？我有同样的问题
标签： angular internet-explorer-11 custom-element angular-elements