更新 Angular 7 到 Angular 9 后出现“无法读取 null 的 'fileName' 属性”错误。

9

我在将 Angular 7 更新到 9 后遇到了一个错误:Cannot read property 'fileName' of null。我已经将所有依赖项更新到最新版本。

enter image description here

package.json

{
    "name": "project name",
    "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": "9.0.6",
        "@angular/cdk": "^9.1.3",
        "@angular/cli": "9.0.6",
        "@angular/common": "9.0.6",
        "@angular/compiler": "9.0.6",
        "@angular/core": "9.0.6",
        "@angular/forms": "9.0.6",
        "@angular/http": "7.2.16",
        "@angular/platform-browser": "9.0.6",
        "@angular/platform-browser-dynamic": "9.0.6",
        "@angular/router": "9.0.6",
        "@ngui/datetime-picker": "^0.16.2",
        "angular-flash-message": "^3.4.0",
        "angular2-clipboard": "^2.0.14",
        "angular2-color-picker": "^1.3.1",
        "angular2-cookie": "^1.2.6",
        "angular2-flash-messages": "^3.0.1",
        "angular2-modal": "^3.0.3",
        "angular2-multiselect-dropdown": "^4.6.3",
        "chart.js": "^2.9.3",
        "chart.piecelabel.js": "^0.15.0",
        "chartjs-plugin-datalabels": "^0.7.0",
        "chartjs-plugin-labels": "^1.1.0",
        "core-js": "^3.6.4",
        "file-saver": "^2.0.2",
        "file-saver-typescript": "^1.0.1",
        "jasmine-core": "^3.5.0",
        "jasmine-spec-reporter": "^4.2.1",
        "jspdf": "^1.5.3",
        "jspdf-autotable": "^3.2.13",
        "moment-timezone": "^0.5.28",
        "ng-circle-progress": "^1.5.1",
        "ng-click-outside": "^6.0.0",
        "ng-diff-match-patch": "^3.0.1",
        "ng-pick-datetime": "^7.0.0",
        "ng-pick-datetime-moment": "1.0.8",
        "ng2-charts": "^2.3.0",
        "ng2-ckeditor": "^1.2.7",
        "ng2-completer": "^3.0.3",
        "ng2-dnd": "^5.0.2",
        "ng2-pdf-viewer": "^6.1.2",
        "ng5-breadcrumb": "^0.0.6",
        "ngx-bootstrap": "5.5.0",
        "ngx-bootstrap-modal": "^2.0.1",
        "ngx-chips": "^2.1.0",
        "ngx-clipboard": "^13.0.0",
        "ngx-color-picker": "^9.0.0",
        "ngx-pagination": "^5.0.0",
        "ngx-popover": "0.0.16",
        "ngx-progressbar": "^6.0.2",
        "ngx-toastr": "^12.0.0",
        "pluralize": "^8.0.0",
        "rxjs": "^6.5.4",
        "rxjs-compat": "^6.5.4",
        "tslib": "^1.11.1",
        "web-animations-js": "2.3.2",
        "xlsx": "^0.15.6",
        "zone.js": "^0.10.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.900.6",
        "@angular/compiler-cli": "9.0.6",
        "@angular/language-service": "9.0.6",
        "@types/jasmine": "3.5.9",
        "@types/node": "^13.9.1",
        "codelyzer": "~5.2.1",
        "jasmine-spec-reporter": "^4.1.1",
        "karma": "^4.4.1",
        "karma-chrome-launcher": "~3.1.0",
        "karma-cli": "~2.0.0",
        "karma-coverage-istanbul-reporter": "^2.1.1",
        "karma-jasmine": "~3.1.1",
        "karma-jasmine-html-reporter": "^1.5.2",
        "protractor": "^5.4.3",
        "ts-node": "~8.6.2",
        "tslint": "~6.1.0",
        "typescript": "3.8.3"
    } }

当我尝试启动、构建应用程序时,出现了相同的错误。有没有可能追踪此错误的位置?这是否与我目前使用的任何依赖项有关?请问有人能帮我解决这个问题吗?

你在哪个文件中遇到了这个错误? - Bansi29
我无法追踪它。因为它只显示错误,如ERROR in Cannot read property 'fileName' of null。请参见截图。 - Ajmal Sha
在您的项目中搜索 fileName 并查找它。 - mamichels
其实我在许多地方都使用了同一个关键字。如果这个问题与我的代码有关,那么错误不显示位置的原因是什么呢? - Ajmal Sha
1
我也遇到了这个错误。在使用 ng serve 时发生。即使加上 --verbose 参数,也没有堆栈跟踪。在 node_modules 中有超过 3000 个 .fileName 案例。 - Brian Takita
5个回答

1
TLDR: 安装了多个版本的 @angular/core。

在进行一些调试后,我找到了一种生成堆栈跟踪的方法,以下是我采取的步骤:

  1. 查看错误消息,注意到其中包含 ERROR in ${error}。在 node_modules 中进行搜索 ERROR in,找到 node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js 中的 statsErrorsToString 函数。

  2. 注意 json 参数和 json.errors 数组。

  3. statsErrorsToString 函数中添加 console.trace

  4. 沿着堆栈跟踪到 node_modules/@angular-devkit/build-webpack/src/webpack-dev-server/index.js,在 runWebpackDevServer 函数中返回一个调用带有回调函数的 createWebpack(config)

  5. console.debug(stats.compilation.errors) 添加到由 createWebpack(config) 返回的 Promise 的回调中,以查看完整的堆栈跟踪信息,其中包括 Cannot read property 'fileName' of null 错误。

这是我得到的错误输出(可能因人而异):
[
  TypeError: Cannot read property 'fileName' of null
      at Object.getImportRewriter (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/rendering/utils.js:22:72)
      at DtsRenderer.renderDtsFile (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:76:72)
      at /path/to/project/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:68:134
      at Map.forEach (<anonymous>)
      at DtsRenderer.renderProgram (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/rendering/dts_renderer.js:68:26)
      at Transformer.transform (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:87:52)
      at /path/to/project/node_modules/@angular/compiler-cli/ngcc/src/main.js:191:42
      at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:35:17)
      at /path/to/project/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:56:59
      at SyncLocker.lock (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/locking/sync_locker.js:33:24)
      at SingleProcessExecutorSync.execute (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:56:27)
      at Object.mainNgcc (/path/to/project/node_modules/@angular/compiler-cli/ngcc/src/main.js:209:25)
      at Object.process (/path/to/project/node_modules/@angular/compiler-cli/ngcc/index.js:28:23)
      at NgccProcessor.processModule (/path/to/project/node_modules/@ngtools/webpack/src/ngcc_processor.js:98:16)
      at /path/to/project/node_modules/@ngtools/webpack/src/compiler_host.js:349:36
      at Array.map (<anonymous>)
]

看起来 this.bundle.dts.r3SymbolsFilenull。 我会在调试进一步后更新这篇文章。


我发现我安装了多个版本的Angular。在这个项目中,我还使用 lernajs,因此会搜索错误版本的 node_modules/@angular/core 来查找 r3FileName

刚遇到同样的问题:'this.bundle.dts.r3SymbolsFile is null'。你找到解决方法了吗? - Ivan Sager
是的,我停止使用Angular了 ;-) - Brian Takita
哈哈,我很深入地涉足其中,所以我需要找出一个解决方案。 - Ivan Sager
我认为我已经解决了这个问题。安装了多个版本的Angular,请检查您的包的*.lock文件并查看是否安装了多个版本。 - Brian Takita
大家好。我通过卸载所有的Angular版本并执行单个清除安装来使其工作。感谢@brian Takita和其他人的研究! - Ivan Sager

1

在参考了this之后(它也解决了我的问题),

问题出在 ngx-bootstrap/* 版本上

错误发生的原因是,angular-io-slimscroll 直接依赖于 @angular/core@5.x。我很惊讶在 Ivy 之前这个甚至能工作。Angular 库不应该引入他们自己的 Angular 版本(他们应该使用 @angular/* 作为 peerDependencies)。

angular-io-slimscroll 上一次提交已经超过 1.5 年了,因此该项目可能已经不再维护。还有几个关于与最新的 Angular 版本兼容性的开放问题: rd-dev-ukraine/angular-io-slimscrollrd-dev-ukraine/angular-io-slimscrollrd-dev-ukraine/angular-io-slimscroll

在我的情况下,我移除了 ng2-chessboard 和 pdfjs 依赖,并更新了 @ngrx/store、@ngx-formly/bootstrap 和 @ngx-formly/core 到最新版本。嘭,问题解决了,如果有帮助,请告诉我。

1
迟到了,但我还是发一下,希望能帮到别人。结果发现我在更高层级的地方有一个错误的 node_modules 文件夹(不知道为什么),这可能导致编译器混淆了两个版本的 @angular/core。当我删除了那个其他的 node_modules 文件夹后,就不再收到这个错误了。这是使用 angular 12.1.x 的情况。

1
今天我将Angular 8升级到9,但是出现了相同的错误:TypeError: Cannot read property 'fileName' of null。经过研究,我意识到这与软件包及其依赖关系有关。您需要检查以前的消息,因为答案就在那里。
在我的情况下,我收到了很多类似于以下警告消息。

警告:无法完全加载...frontend/node_modules/ngx-carousel-3d/node_modules/packages/core/esm5/src/type.js以进行源映射展平:ENOENT:没有此文件或目录,打开'...frontend/node_modules/ngx-carousel-3d/node_modules/packages/core/esm5/src/type.js.map'

我检查了.../node_modules/ngx-carousel-3d/node_modules/文件夹,但找不到packages文件夹和其他文件夹。 ngx-carousel-3d是默认的节点软件包之一,我从未在我的项目中使用过它。因此,我删除了该软件包并重新编译,错误消失了。
在您的情况下,您可能需要更新软件包(或降级),但不要跳过警告消息。

0
也许这可以帮助你,我的问题是我错误地引用了另一个带有Angular 4的项目中的一些代码,因此在这种情况下获取该代码是有意义的。如果不是这样,可能是因为您以错误的方式导入了Angular Core或其他Angular库(Angular 4和Angular 8库有不同的导入方式,通常基于新版本的Angular的库包括/ngx在导入中)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接