Angular Elements-未捕获的TypeError：无法构造“ HTMLElement” [英] Angular Elements - Uncaught TypeError: Failed to construct 'HTMLElement'
问题描述
我一直在努力使Angular元素组件正常工作，因为我正在考虑在即将到来的项目中使用它们。
I have been trying all day to get an Angular elements component working, as I was considering using them in an upcoming project.
我遵循了许多教程（都非常相似），并且无法使其正常工作。教程之一是这一个。
I have followed a number of tutorials (all very similar), and just cannot get them working. One of the tutorials is this one.
我为Elements项目拥有以下package.json
I have the following package.json for the Elements project
{
"name": "angular-webcomponents-demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:elements": "ng build --prod --output-hashing none && node build-script.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/elements": "^7.2.15",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"document-register-element": "^1.7.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"concat": "^1.0.3",
"fs-extra": "^8.1.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
我使用
I built using npm un build:elements as instructed, and then attempted to host in the simplest html I could
ie
<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>Document</title>
<script src="analytics-counter.js"></script>
</head>
<body>
<analytics-counter></analytics-counter>
</body>
</html>
最初我遇到类似于这篇文章（除了我提到的 custom-root 而不是 app-root。
Initially I was getting errors similar to this post (except mine mentioned custom-root rather than `app-root'.
我已从引导程序中删除了该组件，因此现在我的 app中包含以下内容。 module.ts
I have removed the component from the bootstrap, so I now have the following in my app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
import { AnalyticsCounterComponent } from './analytics-counter/analytics-counter.component';
@NgModule({
declarations: [
AppComponent,
AnalyticsCounterComponent
],
imports: [
BrowserModule
],
entryComponents: [
AnalyticsCounterComponent
],
providers: []
})
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
const el = createCustomElement(AnalyticsCounterComponent, { injector: this.injector });
customElements.define('analytics-counter', el);
}
}
我删除了<来自index.html的custom-root> 以及我看到的建议elswhere
I removed the <custom-root> from the index.html as well as I saw suggeted elswhere
我现在遇到的错误是
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at t [as constructor] (analytics-counter.js:4)
at new t (analytics-counter.js:4)
at CustomElementRegistry.e.<computed> [as define] (analytics-counter.js:2)
at new e (analytics-counter.js:4)
at analytics-counter.js:4
at Mo (analytics-counter.js:4)
at analytics-counter.js:4
at new e (analytics-counter.js:4)
at Object.ti [as createNgModuleRef] (analytics-counter.js:4)
at t.create (analytics-counter.js:4)
所有的教程和解释都非常直观，但是我无法获得最基本的示例。
The tutorials and explanations all look pretty straight forward, yet I cannot get the most basic example working.
有人在这里可能有什么问题吗？
Does anyone have any ideas what could be wrong here?
在此先感谢您的帮助。
推荐答案
我能够复制您的错误。问题来自 build-script.js 。您将必须对其进行修改，并确保它仅编译 es2015.js 文件，而不是 es5.js 。 ES5在使用本机Custom Elements时遇到了一些麻烦，因此您必须使用ES2015。
I was able to reproduce your error. The problem comes from build-script.js. You will have to modify it and make sure it's compiling only es2015.js files instead of es5.js. ES5 has some trouble working with native Custom Elements, therefore you will have to use ES2015.
因此它看起来像这样：
const files = [
'./dist/CustomElements/runtime-es2015.js',
'./dist/CustomElements/polyfills-es2015.js',
'./dist/CustomElements/main-es2015.js'
];
还可以随时检查我的Angular Elements演示存储库-角度自定义元素。输出已经在 elements / 文件夹中，因此您可以在其中运行 index.html 进行测试。通过在此确切项目的构建脚本中将es2015替换为es5，我能够重现该错误。
Also feel free to check my working demo repository of Angular Elements - Angular Custom Elements. The output is already in elements/ folder so you can just run the index.html there to test it. I was able to reproduce the error by replacing es2015 to es5 in a build script on this exact project.
这篇关于Angular Elements-未捕获的TypeError：无法构造“ HTMLElement”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
