angular-cli 25.5模块构建失败

托比亚斯·赫尔比奇(Tobias Helbich)

问题

在将angular-cli从22.1更新到25.5(安装angular-cli @ latest)并且从angular 2.2.3更新到2.3.1之后,我遇到了这个问题:

ERROR in ./src/app/app.module.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (~/projects/MyProject/node_modules/typescript/lib/typescript.js:53644:56)
    at ~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:83:72
    at Array.some (native)
    at ~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:82:10)
    at ~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:167:48
 @ ./src/main.ts 5:0-45
 @ multi main

但我无法弄清楚问题出在哪里,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) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

还有两个其他文件也都失败了,并且错误消息与上面完全相同,第一个文件environment.ts中没有特殊内容,第二个子模块由于添加以下内容而失败:

 @ ./src async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi main

NodeModules源代码

所引用的typescript.js:53644:56看起来像这样:

[53643] TokenOrIdentifierObject.prototype.getText = function (sourceFile) {
[53644]     return (sourceFile || this.getSourceFile()).text.substring(this.getStart(), this.getEnd());
[53645] };

loader.js:83:7283:32指向webpack和以下代码片段:

[078] exports.removeModuleIdOnlyForTesting = removeModuleIdOnlyForTesting;
[...] function _removeModuleId(refactor) {
[...]   var sourceFile = refactor.sourceFile;
[...]   refactor.findAstNodes(sourceFile, ts.SyntaxKind.ObjectLiteralExpression, true)
[...]       .filter(function (node) {
[083]       return node.properties.some(function (prop) { return prop.name.getText() == 'moduleId'; });
[...]   })
[...]       .forEach(function (node) {
[...]       var moduleIdProp = node.properties.filter(function (prop, idx) {
[...]           return prop.name.getText() == 'moduleId';
[...]       })[0];
[...]       // get the trailing comma
[...]       var moduleIdCommaProp = moduleIdProp.parent.getChildAt(1).getChildren()[1];
[...]       refactor.removeNodes(moduleIdProp, moduleIdCommaProp);
[...]   });
[093] }

loader.js:167:48

[148] // Super simple TS transpiler loader for testing / isolated usage. does not type check!
[...] function ngcLoader(source) {
[...]   this.cacheable();
[...]   var cb = this.async();
[...]   var sourceFileName = this.resourcePath;
[...]   var plugin = this._compilation._ngToolsWebpackPluginInstance;
[...]   // We must verify that AotPlugin is an instance of the right class.
[...]   if (plugin && plugin instanceof plugin_1.AotPlugin) {
[...]       var refactor_2 = new refactor_1.TypeScriptFileRefactor(sourceFileName, plugin.compilerHost, plugin.program);
[...]       Promise.resolve()
[...]           .then(function () {
[...]           if (!plugin.skipCodeGeneration) {
[...]               return Promise.resolve()
[...]                   .then(function () { return _removeDecorators(refactor_2); })
[...]                   .then(function () { return _replaceBootstrap(plugin, refactor_2); });
[...]           }
[...]           else {
[...]               return Promise.resolve()
[...]                   .then(function () { return _replaceResources(refactor_2); })
[167]                   .then(function () { return _removeModuleId(refactor_2); });
[...]           }
[169]       })
[...]  ...

问题

是否有人遇到过同样的问题,或者可以弄清楚webpack(?)为何失败-或可以向我解释编译器正在尝试做什么以及为何失败?

编辑

angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.25.5",
    "name": "myproject"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "assets/css/main.css"
      ],
      "scripts": [
        "assets/lib/stomp.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev":    "environments/environment.ts",
        "live": "environments/environment.live.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "files": [
    "typings/index.d.ts"
  ]
}
托比亚斯·赫尔比奇(Tobias Helbich)

更新:

正如@stewdebaker指出的:angular-cli:1.0.0-beta.26现在已经发布,似乎可以解决此问题。


正如@stewdebaker提到的那样,在使用angular-cli的angular2前端中存在一个类似的构建错误-解决方案是将其恢复为angular-cli: 1.0.0-beta.21

另请参阅https://github.com/angular/angular-cli/issues/4072,以在angular-cli问题跟踪器中获取有关该问题的更多信息


我既无法修复自己的项目,也无法还原到以前的angular-cli版本1.0.0-beta.22-1(并且我在Stack Overflow上没有看到另一个被问到的问题,否则我可能会尝试还原到1.0.0-beta.21)。

由于某种原因,在更新到1.0.0-beta.25.5ng serve命令之前可以运行,但是在恢复命令之后1.0.0-beta.22-1仍会产生与更新后相同的错误。

耗时的解决方案

因此,我决定使用新建一个Angular2项目,angular-cli并使用CLI重建整个项目,同时从旧存储库中复制代码并修复错误。

我遇到的错误是一些小问题(我认为它们是tslint.json由于更新而导致的更改的结果angular-cli),但是项目中没有太大的更改,现在可以正常工作了。

错误消息中提到的源文件:

  • app.module.ts
  • tsconfig.json
  • angular-cli.json

并没有改变,但是angular-cli再次可用,ng serve现在运行时不会遇到错误。

我认为这不是理想的解决方案(也不降级到1.0.0-beta.21)-但这是我唯一能找到的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章