Элемент Angular (9.1.1) выдает ошибку после встраивания этого элемента в другой проект angular9.1.1 - PullRequest
0 голосов
/ 21 апреля 2020

У меня два angular 9.1.1 проекта. Первый - создать элемент angular, а второй - использовать этот элемент.

Узел: 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
  }
}


Код для объединения файлов сборки в один файл

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

Примечание: Элемент работает правильно при создании сборки dev после динамически встраиваемого элемента. Но это дает ошибку при создании производственной сборки с использованием --prod в angular9.1.1

Код для динамического добавления элемента:

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

Ошибка:

Но в - сборка продукта выдаёт ошибку.

enter image description here

...