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

Question

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.

Answer 1

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