角元素输出在IE11中不起作用 [英] Angular Elements Output not working in IE11
问题描述
我尝试使Angular Elements在IE11中工作。
我的自定义元素（简单按钮）已经显示，并且输入绑定按预期方式工作，但输出绑定却没有。
I try to get Angular Elements working in IE11. My custom element (simple button) is already displayed and the input binding is working as expected, but the output binding doesn't.
A单击my IE 11中的自定义元素按钮导致错误：
A click on my custom element button in IE 11 results in the error:
对象不支持此操作
The object doesn't support this action
到目前为止，我所做的事情：
What I have done so far:
- 删除已添加自定义元素的polyfill使用
ng添加@ angular / elements（不适用于IE） -
将所有Angular软件包更新为
7.2.1
将以下polyfillls添加到 polyfills.ts ：
Add the following polyfillls to 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';
-
手动引导模块
Bootstrap the module manually
ng build --output-hashing = none 并将所有生成的文件打包到 btn-element.js 与 http服务器一起提供以进行本地测试（请参见下面的 index.html ）。
ng build --output-hashing=none and package all generated files into btn-element.js which is served with http-server for local testing (see index.html below).
我想念一个特定的polyfill还是做错了什么？还是不可能？
Do I miss a specific polyfill or am I doing something wrong? Or is it just not possible yet?
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> 没有成功。
编辑： 最小示例
它似乎在IE 11中无法正常工作。要重现我的结果并看到与在Chrome中运行StackBitz相同的内容，请执行以下步骤：
It seems not to be wokring in IE 11. To reproduce my reslut and see the same as if the StackBitz is run in Chrome, follow those steps:
- 复制到本地计算机
- 运行
npm install - 运行
npm运行构建&& npm run package：win（对于Windows） - 提供
index.html和生成的btn-element.js与http服务器
- Copy to local machine
- run
npm install - run
npm run build && npm run package:win(for Windows) - serve the
index.htmland the generatedbtn-element.jswithhttp-server
推荐答案
我在一个小项目中工作过。这是需要检查的地方的清单。
I have this working in a small project. Here is a check list of things that need to be in place.
要在IE11中运行Angular Elements，您需要：
To run Angular Elements in IE11 you need:
- 将Angular应用程序编译到ES5和生产标记
- 包括Polymer项目
webcomponentsjs / custom-elements-es5-adapter .js以使ES5语法与现代浏览器中的customElements API一起使用 - 包含Polymer项目Web组件polyfill
webcomponentsjs / webcomponents -loader.jshttps://www.webcomponents.org/polyfills/ - 确保这些代码与Angular代码一起排列正确
- Compile your Angular application to ES5 and the production flag
- Include the Polymer project
webcomponentsjs/custom-elements-es5-adapter.jsto get the ES5 syntax to work with the customElements API in modern browsers - Included the Polymer project web components polyfill
webcomponentsjs/webcomponents-loader.jshttps://www.webcomponents.org/polyfills/ - Make sure these are in the correct order alongside the Angular code
<script type="text/javascript" src="dist/AngularComponentTest/runtime.js"></script>
<script type="text/javascript" src="dist/AngularComponentTest/polyfills.js"></script>
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<script type="text/javascript" src="dist/AngularComponentTest/main.js"></script></body>
- 要加载一个简单的组件，您不需要任何浏览器Polyfill从
polyfills.ts中启用 - 不包含
custom-elements-es5-adapter.js使用任何将被转译的东西，例如Angular构建配置的脚本或polyfill.ts - To load a simple component you wont need any of the "Browser Polyfill" from
polyfills.tsto be enabled - Do not include
custom-elements-es5-adapter.jsusing anything that will mean it's transpiled e.g. Angular build config's scripts orpolyfill.ts
使用Angular 9进行上述操作给我提供了运行Angular Element并从中发出事件所需的一切。
Doing the above using Angular 9 gave me everything need to run an Angular Element and emit an event from it.
我将稍作清理后就发布一个示例应用程序。
I will post a sample application when I have cleaned it up a bit.
这篇关于角元素输出在IE11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
