Angular CLI - 打字稿抛出：无法读取未定义的属性“长度”答案

【问题标题】：Angular CLI - Typescript throws: Cannot read property 'length' of undefinedAngular CLI - 打字稿抛出：无法读取未定义的属性“长度”
【发布时间】：2017-12-26 10:45:33
【问题描述】：

我使用 ng serve 在 angular 4 项目中运行，但出现错误

Cannot read property 'length' of undefined

但我的项目中没有任何属性长度..

完整的错误

    Your global Angular CLI version (1.2.1) is greater than your local
version (1.1.3). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:15457:109)
    at parseSourceFileWorker (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:15389:26)
    at Object.parseSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:15338:26)
    at Object.createSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:15192:29)
    at VirtualFileStats.getSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\@ngtools\webpack\src\compiler_host.js:66:35)
    at WebpackCompilerHost.getSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\@ngtools\webpack\src\compiler_host.js:213:38)
    at findSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67909:29)
    at processImportedModules (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:68056:25)
    at findSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67937:17)
    at processImportedModules (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:68056:25)
    at findSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67937:17)
    at processSourceFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67840:27)
    at processRootFile (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67728:13)
    at E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67018:60
    at Object.forEach (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:1449:30)
    at Object.createProgram (E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master\node_modules\typescript\lib\typescript.js:67018:16)
PS E:\פרוייקטים\פרוייקטים קיץ\Angular 4\Youtube Channel Angular Firebase\full project of the instructor github\angular-firestarter-master>

package.json

{
  "name": "firestarter",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/platform-server": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@types/lodash": "^4.14.67",
    "angularfire2": "^4.0.0-rc.1",
    "core-js": "^2.4.1",
    "firebase": "^4.1.3",
    "lodash": "^4.17.4",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.1.3",
    "@angular/compiler-cli": "^4.2.4",
    "@types/jasmine": "2.5.53",
    "@types/node": "~8.0.4",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.4",
    "jasmine-spec-reporter": "~4.1.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.1.0",
    "tslint": "~5.4.3",
    "typescript": "=2.3.4"
  }
}

【问题讨论】：

这是完整的堆栈跟踪吗？ length 用于很多模块。也许您的某些依赖项不正确
这是有道理的。它发生在我运行 npm install 之后。它完整的堆栈跟踪我将更新我的帖子，你可以看到
我更新了我的帖子
是的。问题肯定在依赖关系的某个地方。你也可以添加你的 package.json 内容吗？
当然，我现在添加了它

标签： angular angular-cli

【解决方案1】：

您可能缺少 typescript 尝试处理的一个或多个文件。要找出您丢失的文件，只需添加

console.log(fileName);

在 node_modules/typescript/lib/typescript.js 文件中 createSourceFile 函数的开头。

【讨论】：

我看到该文件在我的节点模块中，但错误仍然存在。
我console.log时得到了很多文件，我怎么知道丢失的文件是什么？
不错！正如其他人注意到的那样，它并没有解决问题，但提供了非常有用的后记：一旦我知道哪个文件丢失了，我所要做的就是搜索它的导入位置并从那里修复它。

【解决方案2】：

我的错误是由创建小组件时的 c&p 错误引起的。我忘了更改组件模板和样式的路径。

【讨论】：

是的，同样...我不知道为什么错误消息不是这样的：File old-file-name.html not found. - 将是对开发人员来说更容易。
在我的例子中重命名了模板文件但忘记在组件中更改它
最难以描述的错误似乎很常见
这里也一样。我重命名了我的一个组件，但我错过了命名选择器、模板 URL 和样式表 URL。我希望错误信息更清楚

【解决方案3】：

您很可能以需要重新启动 CLI 的方式更改了模块。

从模块中删除组件后，我在运行 ng serve 时遇到了同样的错误。通过重新启动该进程并重新运行ng serve，错误消失了。

【讨论】：

好东西检查。我手动重构了一些组件，忘记在 component.ts 文件中进行更新以匹配。该错误并不是很有帮助，但根据经验，在大多数情况下，最好先怀疑我们自己的工作，而不是社区的工作。 :-)

【解决方案4】：

我的问题是，由于某种原因，我的 enviroment.ts 文件丢失了。所以检查重要文件。

【讨论】：

如果您使用多个环境，请检查您是否也没有拼错正在使用的环境

【解决方案5】：

在我的情况下，我做了以下事情并解决了这个问题：

在项目C:\Users\abcd\Desktop\MyApp\src的src中创建environments文件夹（如果不存在）
将environment.ts和environment.prod.ts这两个文件放到environments文件夹中。
李>

【讨论】：

【解决方案6】：

可能是组件 templateUrl 的错误路径，可能缺少 ./

之前：templateUrl: 'my-control.component.html',

之后：templateUrl: './my-control.component.html',

【讨论】：

【解决方案7】：

我解决了这个问题（重构测试期间出错）。对 Angular v4.3.* 和 v4.4* 来说一切都很好

将 package.json 中的 @angular/cli 版本 1.7.3 更改为 1.4.10（angular4 的最新版本）
rm -rf node_modules
npm install --no-optional

【讨论】：

【解决方案8】：

关闭正在运行的端口并尝试使用“ng build”重新构建应用程序

【讨论】：

你能回答这个吗：stackoverflow.com/questions/66175657/…

【解决方案9】：

就我而言，这很神秘。但是，提供我所见证的，也许还有一点历史，不会有什么坏处。没有或可能是某些历史事件导致了它，但我真的不知道。

一切都很好。 Angular 8 在 18.04.4 LTS (Bionic Beaver)LXC 内运行，在 19.10 ubuntu host 内使用 npm 6.14.2，node10.16.3
将主机升级到20.04 LTS(Focal Fossa)。写一些代码。删除一个名为 angular-shepherd 的包。尝试构建--prod。在生成 ES5 捆绑包时会出现此错误。
什么都试过了。都失败了。
重置我在项目中所做的事情。仍然失败。
重启 LXC。
已修复。

【讨论】：