在将角7更新为角9后不能读取属性'fileName‘的错误

Question

在更新角7到9后，无法读取空属性'fileName‘中出现了一个错误。我已经将所有依赖项更新为最新版本。

​

​

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

当我尝试服务时，构建应用程序时，它会得到相同的错误。有没有可能跟踪这个错误的位置？它与我目前使用的依赖关系相关吗？能帮我解决这个问题吗？

Answer 1

TLDR:安装了多个版本的“角/核”。

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

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. 遍历堆栈跟踪到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错误的完整堆栈跟踪。

下面是我得到的错误输出(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.r3SymbolsFile是null。将在我进一步调试时更新此帖子。

原来我安装了多个版本的Angular。我在这个项目中也使用了叶尔纳，因此正在搜索不正确的node_modules/@angular/core版本，以查找r3FileName。

Answer 2

在参考了这 (这也解决了我的问题)之后，

问题在于ngx-bootstrap/*版本

这个错误会发生，因为角-io-纤细卷轴直接依赖于@角/核心@5.x。在艾薇之前我就很惊讶了。角库不应该引入它们自己版本的角(相反，它们应该有@ar角/*包作为peerDependencies )。

上一次对angular-io-slimscroll的提交是在1.5年前，因此该项目很可能不再被维护。关于与最新版本的兼容性，还有几个悬而未决的问题：rd-dev-ukraine/angular-io-slimscroll、rd-dev-ukraine/angular-io-slimscroll、rd-dev-ukraine/angular-io-slimscroll

在我的示例中，删除了ng2-chessboard、pdfjs依赖项并将@ngrx/store、@ngx-formly/bootstrap、@ngx-formly/core更新为最新版本。砰，这事解决了，如果有帮助的话，让我知道。

Answer 3

今天，我升级了角度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是默认的节点包之一，我从未在项目中使用过它。所以我删除了包，重新编译了它，错误消失了。

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