时间戳

首页 > 解决方案 > Angular v4.4 应用程序停止加载 JS 模块的隔离更新

javascript - Angular v4.4 应用程序停止加载 JS 模块的隔离更新

问题描述

我收到了一个非常脆弱的 Angular 4.4 应用程序的烫手山芋。当我尝试更新 auth0-js 模块时，应用程序停止加载，并且它的引导组件构造函数永远不会被调用。它加载初始 html，运行 app.module.ts 和 main.ts。然后它似乎就停止了。我已经在 Chrome 和 FF 开发者工具中多次调试、单步执行。它似乎停止了。我已经在各种组件和模块的加载和构造函数中放置了各种 console.log 语句。它显然从不调用 app.component.ts 的构造函数。

我已经仔细地将所需模块的更改与 auth0-js 模块隔离开来。只有一个必需的模块 qs，我的代码或任何其他 js 模块也使用它。其他必需的模块仅由 auth0-js 使用。我冻结了顶级 qs 版本，并在升级时强制 npm 将其安装为 auth0-js 的依赖项。我找不到任何可能导致这种损坏的更改。

而且，就 auth0-js 库本身而言，我已经在另一个类似项目中使用了最新版本。而且，在应用程序停止之前执行的代码不包括对 auth0-js 的任何调用。换句话说，在应用程序停止运行之前不会触及该代码。

使用安装在项目本地（在 ./node_modules/ 中）的 Angular CLI 版本 1.7.4 完成构建。然后通过 构建/启动它ng serve --env local。该服务器似乎是一个没有有用日志记录的黑匣子。我切换到通过 nginx 服务并通过ng build --output-hashing=all --env local. 还是没有更进一步。已经好几个星期了，我的额头越来越凹了。任何和所有的建议都非常受欢迎。

这是我的 main.ts

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  console.log('main.ts: enabling production mode');
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch((err) => console.error(err));

更新：我没有在 bootstrapModule 上调用 .catch，但我只是添加了它。现在我确实在控制台中看到了一条错误消息：

错误：“Zone.js 检测到 ZoneAwarePromise `(window|global).Promise` 已被覆盖。最可能的原因是在 Zone.js 之后加载了 Promise polyfill（当 zone.js 为已加载。如果必须加载一个，请在加载 zone.js 之前执行此操作。）”

现在我有一些事情要进一步研究。我将看到更新 zone.js 版本，并通过更新另一个库使其相同。

这是我的 package.json：

{
  "name": "ng2-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --env local",
    "build-prod": "ng build --output-hashing=all --env prod",
    "build-dev": "ng build --output-hashing=all --env dev",
    "build-staging": "ng build --output-hashing=all --env staging",
    "build-local": "ng build --output-hashing=all --env local",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "angular2-cookie": "1.2.6",
    "angular2-modal": "2.0.3",
    "angular2-uuid": "1.1.1",
    "auth0-js": "^9.13.2",
    "bootstrap": "3.3.7",
    "core-js": "2.4.1",
    "moment-timezone": "^0.5.25",
    "ng2-adal": "^1.0.3",
    "ng2-bootstrap": "^1.6.3",
    "ng2-dnd": "4.0.2",
    "ng2-file-upload": "1.2.1",
    "ng2-webstorage": "1.6.2",
    "node-sass": "^4.11.0",
    "powerbi-client": "^2.5.2",
    "qs": "^6.5.1",
    "rxjs": "5.3.0",
    "shortid": "2.2.8",
    "string-similarity": "^3.0.0",
    "ts-md5": "1.2.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.4",
    "@angular/compiler-cli": "4.0.0",
    "@types/core-js": "0.9.41",
    "@types/jasmine": "2.5.47",
    "@types/moment-timezone": "^0.5.12",
    "@types/node": "6.0.68",
    "@types/shortid": "0.0.28",
    "codelyzer": "2.1.1",
    "jasmine-core": "^2.5.2",
    "jasmine-only": "^0.1.2",
    "jasmine-spec-reporter": "3.3.0",
    "karma": "1.6.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-phantomjs-launcher": "1.0.4",
    "protractor": "5.1.1",
    "ts-node": "2.1.2",
    "tslint": "4.5.1",
    "typescript": "2.3.0"
  }
}

标签： javascriptangulartypescript

解决方案

确保捕获来自 platformBrowserDynamic().bootstrapModule() 调用的异常对于识别错误至关重要。

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch((err) => console.error(err));

以及由此产生的错误信息：

错误：“Zone.js 检测到 ZoneAwarePromise (window|global).Promise已被覆盖。最可能的原因是在 Zone.js 之后加载了一个 Promise polyfill（加载 zone.js 时不需要Polyfilling Promise api。如果必须加载一个，请执行所以在加载 zone.js 之前。）”

指出 ZoneAwarePromise 定义不同的问题。https://github.com/angular/angular/issues/11650。

更新一些 npm 模块：

npm install --save ng2-adal@2.0.0
npm install --save zone.js@0.8

你将拥有更接近版本的 zone.js。这允许 Angular 应用程序被引导。

推荐阅读