Question

在我的角度应用程序中使用外部angular elements（网络组件）时出现以下错误。

仅当在生产模式（ng build --prod）中进行构建，设置为true并进行延迟加载时才发生。

package.json依赖项：

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

orangeheaderfooter是作为Webcomponent的一部分生成的JS文件。以下是webcomponent的AppModule文件。

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

  }
}

以下是最终应用程序的index.html，其中我通过包含js文件来使用角度元素。 使用延迟加载和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>

Angular 6 ng build --prod错误：未捕获（已承诺）：无法读取未定义的属性“ call”

0 个答案: