angular - 使用angular-cli在angular2前端构建错误

Question

最近，我们的前端构建在我们的构建服务器上开始失败。在运行 npm cache clean 并从我们前端的项目目录中删除 node_modules 目录后，我设法在我的本地机器上重现了这个问题。

错误如下:

Jeroen@host:~/project/project-gui/frontend$ ng build
Hash: 68b2d23b79565fad2e33                                                                
Time: 15457ms
chunk    {0} main.bundle.js, main.bundle.map (main) 184 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 153 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.44 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in ./~/angular2-logger/app/core/logger.ts
    Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (/home/Jeroen/project/project-gui/frontend/node_modules/typescript/lib/typescript.js:53644:56)
    at /home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:83:72
    at Array.some (native)
    at /home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (/home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:82:10)
    at /home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:167:48
 @ ./~/angular2-logger/core.js 6:9-37
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-logger/app/core/providers.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (/home/Jeroen/project/project-gui/frontend/node_modules/typescript/lib/typescript.js:53644:56)
    at /home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:83:72
    at Array.some (native)
    at /home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (/home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:82:10)
    at /home/Jeroen/project/project-gui/frontend/node_modules/@ngtools/webpack/src/loader.js:167:48
 @ ./~/angular2-logger/core.js 7:9-40
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

我已经将 angular-cli 更新到最新版本 (1.0.0-beta.25.5)。

我的 package.json 看起来像这样:

{
  "name": "project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "build": "ng build -p --progress false"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "angular2-logger": "0.5.1",
    "angular2-uuid": "1.1.0",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.25.5",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

这是 logger.ts 的样子；

import {Injectable, Optional} from "@angular/core";
import {Level} from "./level";

/**
 * Logger options.
 * See {@link Logger}.
 *
 * level - How much detail you want to see in the logs, 0 being off, 1 being the less detailed, 5 being the most. Defaults to WARN.
 * global - Whether you want the created logger object to be exposed in the global scope. Defaults to true.
 * globalAs - The window's property name that will hold the logger object created. Defaults to 'logger'.
 * store - Whether you want the level config to be saved in the local storage so it doesn't get lost when you refresh. Defaults to false.
 * storeAs - The local storage key that will be used to save the level config if the store setting is true. Defaults to 'angular2.logger.level'.
 *
 * Created by Langley on 3/23/2016.
 *
 */
export class Options {
    level: Level;
    global: boolean;
    globalAs: string;
    store: boolean;
    storeAs: string;
}

// For browsers that don't implement the debug method, log will be used instead. Fixes #62.
const CONSOLE_DEBUG_METHOD = console["debug"] ? "debug" : "log";

// Temporal until https://github.com/angular/angular/issues/7344 gets fixed.
const DEFAULT_OPTIONS: Options = {
    level: Level.WARN,
    global: true,
    globalAs: "logger",
    store: false,
    storeAs: "angular2.logger.level"
};

@Injectable()
export class Logger {

    private _level: Level;
    private _globalAs: string;
    private _store: boolean;
    private _storeAs: string;

    public Level: any = Level;

    constructor( @Optional() options?: Options ) {

        // Move this to the constructor definition when optional parameters are working with @Injectable: https://github.com/angular/angular/issues/7344
        let { level, global, globalAs, store, storeAs } = Object.assign( {}, DEFAULT_OPTIONS, options );

        this._level = level;
        this._globalAs = globalAs;
        this._storeAs = storeAs;

        global && this.global();

        if ( store || this._loadLevel() ) this.store();

    }

    private _loadLevel = (): Level => Number(localStorage.getItem( this._storeAs ));

    private _storeLevel(level: Level) { localStorage[ this._storeAs ] = level; }

    error(message?: any, ...optionalParams: any[]) {
        this.isErrorEnabled() && console.error.apply( console, arguments );
    }

    warn(message?: any, ...optionalParams: any[]) {
        this.isWarnEnabled() && console.warn.apply( console, arguments );
    }

    info(message?: any, ...optionalParams: any[]) {
        this.isInfoEnabled() && console.info.apply( console, arguments );
    }

    debug(message?: any, ...optionalParams: any[]) {
        this.isDebugEnabled() && ( <any> console )[ CONSOLE_DEBUG_METHOD ].apply( console, arguments );
    }

    log(message?: any, ...optionalParams: any[]) {
        this.isLogEnabled() && console.log.apply( console, arguments );
    }

    global = () => ( <any> window )[this._globalAs] = this;

    store(): Logger {

        this._store = true;
        let storedLevel = this._loadLevel();
        if ( storedLevel ) { this._level = storedLevel; }
        else { this._storeLevel( this.level ); }

        return this;

    }

    unstore(): Logger {
        this._store = false;
        localStorage.removeItem( this._storeAs );
        return this;
    }

    isErrorEnabled = (): boolean => this.level >= Level.ERROR;
    isWarnEnabled = (): boolean => this.level >= Level.WARN;
    isInfoEnabled = (): boolean => this.level >= Level.INFO;
    isDebugEnabled = (): boolean => this.level >= Level.DEBUG;
    isLogEnabled = (): boolean => this.level >= Level.LOG;

    get level(): Level { return this._level; }

    set level(level: Level) {
        this._store && this._storeLevel(level);
        this._level = level;
    }

}    

Answer 1

2017 年 1 月 20 日更新:

angular-cli: 1.0.0-beta.26 has now been released and appears to fix this issue.

旧(过时)答案:

我相信您正在经历类似于 this issue 的事情在 angular-cli 项目中被跟踪。

在 angular-cli 项目修复之前，回滚到 angular-cli: 1.0.0-beta.21 似乎可以解决问题。可以关注project upgrade instructions 降级到 angular-cli: 1.0.0-beta.21。在按照这些说明进行操作时，请务必将 npm install 命令中的 angular-cli@latest 替换为 angular-cli@1.0.0-beta.21.

我认为还值得一提的是，最新的 Angular 2 版本(2.4.3/router 3.4.3)似乎与 angular- cli@1.0.0-beta.21，因此您应该能够将这些版本保留在您的 package.json 文件中，而不是使用 ng init 的版本> 尝试让你使用。