使用angular-cli在angular2前端中生成错误 [英] Build error in angular2 frontend using angular-cli

查看：63
本文介绍了使用angular-cli在angular2前端中生成错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Recently, our frontend build started failing on our build server. I managed to reproduce the problem on my local machine after running npm cache clean and removing the node_modules directory from the project directory of our frontend.

错误如下:

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

I've updated angular-cli to the latest version (1.0.0-beta.25.5).

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

My package.json looks like this:

{
  "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的样子；

And here is what logger.ts looks like;

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

}

推荐答案

更新2017年1月20日:

angular-cli: 1.0.0-beta.26现在已经发布，似乎可以解决此问题.

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

旧(过时)答案:

我相信您正在遇到类似于此问题的跟踪 angular-cli项目.

I believe you are experiencing something similar to this issue being tracked in the angular-cli project.

在angular-cli项目修复之前，回滚到angular-cli: 1.0.0-beta.21似乎可以解决此问题.您可以按照项目升级说明降级为angular-cli: 1.0.0-beta.21.遵循这些说明时，请确保将npm install命令中的angular-cli@latest替换为angular-cli@1.0.0-beta.21.

Until the angular-cli project is fixed, rolling back to angular-cli: 1.0.0-beta.21 seems to resolve the issue. You can follow the project upgrade instructions to downgrade to angular-cli: 1.0.0-beta.21. While following these instructions, be sure to replace angular-cli@latest in the npm install commands with 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尝试使用的版本的说明.

I think it's also worth mentioning that the latest Angular 2 versions (2.4.3/router 3.4.3) seem to be working fine with angular-cli@1.0.0-beta.21, so you should be able to keep those versions in your package.json file instead of using the versions that ng init tries to have you use.

这篇关于使用angular-cli在angular2前端中生成错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆