时间戳

首页 > 解决方案 > Angular 6 ng build --prod 错误：未捕获（承诺）：无法读取未定义的属性“调用”

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

问题描述

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

它仅在以生产模式 ( 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 是一个 JS 文件，它是作为 webcomponent 的一部分生成的。以下是 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>

标签： angularangular6

解决方案

推荐阅读