在angular2应用程序中运行ng serve时出现错误'无法读取未定义的属性'长度''

Posted

技术标签:

【中文标题】在angular2应用程序中运行ng serve时出现错误\'无法读取未定义的属性\'长度\'\'【英文标题】:getting error 'Cannot read property 'length' of undefined' while running ng serve in angular2 application在angular2应用程序中运行ng serve时出现错误'无法读取未定义的属性'长度'' 【发布时间】:2017-04-29 10:41:15 【问题描述】:

在使用 angular-cli 命令 ng-serve 运行 angular2 应用程序时,我遇到了以下问题

dashboard@0.0.0 开始 C:\Users\padmavathi\Downloads\phototype-development\web\dashboard 服务

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8980:109)
    at parseSourceFileWorker (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8940:26)
    at Object.parseSourceFile (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8899:26)
    at Object.createSourceFile (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8727:29)
    at new TypeScriptFileRefactor (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\refactor.js:25:35)
    at Object.resolveEntryModuleFromMain (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\entry_resolver.js:108:18)
    at AotPlugin._setupOptions (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\plugin.js:129:58)
    at new AotPlugin (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\plugin.js:37:14)
    at Object.exports.getWebpackNonAotConfigPartial (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\models\webpack-build-typescript.js:20:13)
    at new NgCliWebpackConfig (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\models\webpack-config.js:23:42)
    at Class.run (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\tasks\serve-webpack.js:20:22)
    at C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\commands\serve.js:102:26
    at process._tickCallback (internal/process/next_tick.js:103:7)

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! dashboard@0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the dashboard@0.0.0 start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the dashboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs dashboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls dashboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\npm-debug.log.

请帮我解决这个问题。 提前致谢。

【问题讨论】:

【参考方案1】:

有同样的问题。

我加了

 if (!sourceText) console.log("createSourceFile " + fileName);

在位于\node_modules\typescript\lib\typescript.js下的createSourceFile函数中

再次运行 ng build,记录所有文件。 我设法查看了丢失的文件,并进行了处理。

【讨论】:

添加if语句只打印麻烦文件的名称,即if (!sourceText) console.log("fileName: " + fileName );【参考方案2】:

当我们在重构过程中意外删除了environment.prod.ts 时,我们遇到了同样的错误 (Cannot read property 'length' of undefined [...] at createSourceFile [...])。恢复这个文件解决了我们的问题。

附言。 Github 上也报告了一个问题:

https://github.com/angular/angular-cli/issues/5053

【讨论】:

【参考方案3】:

从 github 引用(因为我不知道如何直接链接到回复:>)

我认为在许多情况下,当 typescript 尝试处理不存在的文件时会导致此问题。在我的一个项目中,它是一个丢失的 .d.ts 文件。在另一个情况下,它是一个缺少的环境 ts 文件。在 node_modules/typescript/lib/typescript.js 的 createSourceFile 函数的开头添加 console.log(fileName) 帮助我查明了特定文件。请记住删除更改或重新安装您的 node_modules。

来源:https://github.com/angular/angular-cli/issues/5053

这对我有用。最后一个console.log显示了麻烦的文件

【讨论】:

这帮助我找到了错误,非常有效的调试方法@StefanTurcanu【参考方案4】:

检测错误的简单方法是运行 tsc -p 你会在编译源代码时看到完整的错误。

【讨论】:

【参考方案5】:

我也遇到了这个问题。我检查了angular-cli.json 中的所有environment.ts 文件和其他文件路径

在我进行任何更改后,Angular 拒绝重建。在诉诸以下修复之前,我尝试了以下方法:

使用 rm -rf node_modules/* 清除 node_modules,然后执行全新的 npm 安装

重新克隆整个仓库

最后解决我的问题的唯一方法是将@ngtools/webpack 插件从版本1.9.0 降级为1.8.2

我不确定这是否是正确的解决方法,但它对我有用。我在此处添加此评论是因为它可能会为某人节省一些时间。

我的配置:

Mac OSX 10.11.6"@angular/cli": "1.4.2""typescript": "~2.3.3""webpack": "~3.5.5"

【讨论】:

以上是关于在angular2应用程序中运行ng serve时出现错误'无法读取未定义的属性'长度''的主要内容,如果未能解决你的问题,请参考以下文章

cmd 上的错误“ng serve”

使用ng serve 在Vs Code里调试 anguar 项目

如何在使用ng build而不是ng serve时运行webpack?

错误,使用 ng-cli 运行 ng serve 时编译失败

当同时运行 ng build --watch 和 ng serve 时,Angular 7 库 html-template 更改不会影响到应用程序

启动我的项目时出错(运行 ng serve 后)