Angular(9.1.1) element is giving error after embedding this element to another angular9.1.1 project

问题

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.

Node: v12.16.2 NPM: 6.14.4

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

{
  "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')
}

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

Error:

But in --prod build it gives an error.

来源：https://stackoverflow.com/questions/61344189/angular9-1-1-element-is-giving-error-after-embedding-this-element-to-another-a