【问题标题】:ERROR in Cannot read property 'fileName' of null After updating Angular 7 to Angular 9将 Angular 7 更新到 Angular 9 后,无法读取 null 的属性“fileName”中的错误
【发布时间】:2020-06-30 05:38:43
【问题描述】:

在将 Angular 7 更新为 9 后,无法读取属性“fileName”为 null 时出现错误。我已将所有依赖项更新到最新版本。

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

当我尝试服务、构建应用程序时,它得到了同样的错误。是否有可能跟踪此错误的位置?它与我当前使用的任何依赖项有关吗? 有谁能帮我解决这个问题。

【问题讨论】:

  • 您在哪个文件中收到此错误?
  • 我无法追踪。因为它只显示无法读取 null 的属性 'fileName' 中的 ERROR 之类的错误。请看截图。
  • 在您的项目中搜索文件名并进行搜索。
  • 其实我在很多地方都使用了相同的关键字。如果问题与我的代码有关,那么错误未显示错误位置的原因是什么。
  • 我也遇到了这个错误。使用 ng serve 时发生。即使使用 --verbose 标志也没有堆栈跟踪。在node_modules中有超过3000个.fileName的案例。

标签: angular typescript angular7 angular9


【解决方案1】:

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


在执行了一些调试之后,我找到了一种针对我的情况生成堆栈跟踪的方法。以下是我采取的步骤:

  1. 查看错误消息,注意存在ERROR in ${error}。在node_modules 中搜索ERROR in,这会导致statsErrorsToString 函数中的node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js

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

  3. console.trace 添加到statsErrorsToString 函数

  4. runWebpackDevServer 函数中将堆栈跟踪向上跟踪到node_modules/@angular-devkit/build-webpack/src/webpack-dev-server/index.js,该函数通过回调返回对createWebpack(config) 的调用

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

这是我得到的错误输出(YMMV):

[
  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”。你找到解决办法了吗?
  • 是的,我做到了。我停止使用 Angular ;-)
  • 哈哈。好吧,我的负担很重,所以我需要想出一个解决方案..
  • 我想我确实解决了这个问题。安装了多个版本的 Angular。检查你的包的*.lock 文件,看看你是否安装了多个版本。
  • 大家好。我通过卸载所有角度版本并执行单个清除安装来完成此工作。感谢@brian Takita 和其他人的研究!
【解决方案2】:

在引用this(也解决了我的问题)之后,

问题在于ngx-bootstrap/* 版本

发生错误是因为 angular-io-slimscroll 直接依赖于 @angular/core@5.x。我很惊讶这甚至在常春藤之前就起作用了。 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-chessboardpdfjs 依赖项并将 @ngrx/store@ngx-formly/bootstrap@ngx-formly/core 更新到最新之后。繁荣,解决了,如果有帮助,请告诉我。

【讨论】:

    【解决方案3】:

    今天我将 angular 8 升级到 9,我得到了同样的错误:TypeError: Cannot read property 'fileName' of null。经过研究,我意识到这完全是关于 packages 及其 dependencesies。您需要检查以前的消息,因为那里有答案。

    就我而言,我收到了很多这样的警告消息。

    警告:无法完全加载 ...前端/node_modules/ngx-carousel-3d/node_modules/packages/core/esm5/src/type.js 源地图展平:ENOENT:没有这样的文件或目录,打开 '...前端/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 是默认节点包之一,我从未在我的项目中使用过它。所以我删除了包并重新编译它并且错误消失了。

    在您的情况下,您可能需要更新软件包(或降级),但不要跳过 warning 消息。

    【讨论】:

      【解决方案4】:

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

      【讨论】:

        【解决方案5】:

        对我来说游戏迟到了,张贴以防万一它会帮助别人,但结果我有一个错误的node_modules 文件夹更远(不知道为什么),这可能给了我两个版本的@987654322 @ 使编译器感到困惑。当我删除其他 node_modules 文件夹时,我不再收到此错误。这是angular 12.1.x

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-08-24
          • 2020-09-06
          • 1970-01-01
          • 2021-11-14
          • 2018-09-02
          • 2019-07-03
          相关资源
          最近更新 更多