Description
Versions
"devDependencies": {
"@angular-devkit/build-angular": "^0.7.0-rc.0",
"@angular/cli": "^6.2.3",
"@angular/compiler-cli": "^6.1.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"pre-commit": "^1.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
Repro steps
Getting following error when using external angular elements (webcomponents) in my angular application.
It occurs only when building in production mode (ng build --prod), when optimisation is set true and with lazy loading.
orangeheaderfooter is a JS file that is generated as part of webcomponent. Following is the AppModule file of webcomponent.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
import { OrangeHeaderComponent } from './orange-header/orange-header.component';
import { OrangeFooterComponent } from './orange-footer/orange-footer.component';
import { SelfCareHeaderDevModule } from './orange-header/selfcare/selfcare-header-dev/selfcare-header-dev.module';
import { SelfCareFooterDevModule } from './orange-footer/selfcare/selfcare-footer-dev/selfcare-footer-dev.module';
@NgModule({
declarations: [
AppComponent,
OrangeHeaderComponent,
OrangeFooterComponent
],
imports: [
BrowserModule,
SelfCareHeaderDevModule,
SelfCareFooterDevModule
],
providers: [],
entryComponents: [
OrangeHeaderComponent,
OrangeFooterComponent
]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const header = createCustomElement(OrangeHeaderComponent, { injector: this.injector });
customElements.define('orange-header', header);
const footer = createCustomElement(OrangeFooterComponent, { injector: this.injector });
customElements.define('orange-footer', footer);
}
}
Following is the index.html of end application where I am using angular elements by including js files. This issue occurs when using lazy loading and ng build --prod.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MypCrm</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="/orangeheaderfooter/headerfooterStyles.css">
<script type="text/javascript" src="/orangeheaderfooter/custom-elements-es5-adapter.js"></script>
<script src="/orangeheaderfooter/orangeheaderfooter.js"></script>
<script src="/orangeheaderfooter/assets/b2c-global-header-footer.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Desired functionality
ng build --prod should work correctly