将此元素嵌入到另一个 angular9.1.1 项目后，Angular(9.1.1) 元素出现错误 [英] Angular(9.1.1) element is giving error after embedding this element to another angular9.1.1 project

问题描述

我有两个 Angular 9.1.1 项目.第一个是创建一个角度元素，另一个是使用该元素.

I have two angular 9.1.1 project. The first one is to create an angular element and the other one is to use that element.

节点:v12.16.2NPM:6.14.4

Node: v12.16.2 NPM: 6.14.4

package.json

package.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

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
  }
}

在单个文件中连接构建文件的代码

Code to concatenate build files in single file

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 创建生产构建时出错

Note: Element works properly when you create dev build after dynamically embedding element. But it gives error while create production build using --prod in angular9.1.1

动态添加元素的代码是:

Code to dynamically adding element is:

  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 中，它给出了一个错误.

But in --prod build it gives an error.

推荐答案

我不确定.你正在做正确的一切.我按照步骤操作，我能够使用角度元素创建 Web 组件.

I am not sure. You are doing everything corrent. I followed steps and I am able to create web component using angular elements.

这篇关于将此元素嵌入到另一个 angular9.1.1 项目后，Angular(9.1.1) 元素出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！