production - 将此元素嵌入到另一个 angular9.1.1 项目后,Angular(9.1.1) 元素出现错误
问题描述
我有两个 Angular 9.1.1 项目。第一个是创建一个角度元素,另一个是使用该元素。
节点:v12.16.2 NPM:6.14.4
包.json
{
"name": "angular-element",
"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-elements.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.1",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/elements": "^10.0.0-next.2",
"@angular/forms": "~9.1.1",
"@angular/platform-browser": "~9.1.1",
"@angular/platform-browser-dynamic": "~9.1.1",
"@angular/router": "~9.1.1",
"@webcomponents/custom-elements": "^1.4.1",
"document-register-element": "^1.7.2",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.1",
"@angular/cli": "~9.1.1",
"@angular/compiler-cli": "~9.1.1",
"@angular/language-service": "~9.1.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"concat": "^1.0.3",
"fs-extra": "^9.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
tsconfi.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
将构建文件连接到单个文件中的代码
const fs = require('fs-extra');
const concat = require('concat');
var f = []
var css = ""
fs.readdir("./dist/angular-element", function(err, items) {
for (let index = 0; index < items.length; index++) {
if(items[index].includes(".js")) {f.push("./dist/angular-element/" + items[index]);}
else if (items[index].includes(".css")) {
css = "./dist/angular-element/" + items[index];
}
}
build(f);
});
function build(files) {
fs.ensureDir('elements')
concat(files, 'elements/elements.js');
if(css != "") fs.copyFile(css, 'elements/styles.css')
}
注意:在动态嵌入元素后创建开发构建时,元素可以正常工作。但是在使用 angular9.1.1 中的 --prod 创建生产版本时会出错
动态添加元素的代码是:
private loader: boolean = false;
load(): void {
if (this.loader) { return; }
const path = '../../../../assets/libs/temp-web/elements.js';
const script = document.createElement('script');
script.src = path;
document.body.appendChild(script);
this.loader = true;
}
错误:
但是在 --prod build 它给出了一个错误。
解决方案
我不确定。你做的一切都是正确的。我按照步骤进行操作,并且能够使用角度元素创建 Web 组件。
推荐阅读
- python - 是否有一个 shell 脚本,我们可以在其中更新两个文件并更改第三个文件中的一行
- c - 试图从读取的文件中 fprintf 某个字符串
- javascript - ReactJS 错误:TypeError:无法读取 null 的属性“toLowerCase”
- java - HibernateException:jpa 本身调用的共享引用(?)
- java - Jenkins 失败 Java 12 OpenJDK - 未正确定义 JAVA_HOME 环境变量
- sql-server - 此处显示的我的 T-SQL 代码未连接项目
- angularjs - 模块“AppModule”声明的意外值“AppComponent”。请添加@Pipe/@Directive/@Component 注解
- azure - 将 Azure ContainerInstance 配置为使用自托管注册表
- azure - Azure SignalR 服务在第一条消息上很慢
- geolocation - 样式化 iplocate.io 的 JSON 格式