ERROR in Cannot read property 'fileName' of null After updating Angular 7 to Angular 9

Question

I'm getting an ERROR in Cannot read property 'fileName' of null after updating angular 7 to 9. I have updated all of my dependencies to the latest version.

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

When I tried to serve, build the application, it getting the same error. Is there any possibility to track the location of this error?. Is it related to any of the dependencies that I having using currently? Can any please help me to fix this issue.

Answer 1

TLDR: There were multiple versions of @angular/core installed.

---

After performing some debugging, I found a way to generate the stack trace for my situation. Here are the steps I took:

1. Looking at the error message, notice that ERROR in ${error} is present. Perform a search in node_modules for ERROR in, which leads to node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js in the statsErrorsToString function

2. Notice the json argument & the json.errors array

3. Add a console.trace to the statsErrorsToString function

4. Walk up the stack trace to node_modules/@angular-devkit/build-webpack/src/webpack-dev-server/index.js in the runWebpackDevServer function which returns a call to createWebpack(config) with a callback

5. Add a console.debug(stats.compilation.errors) to the callback from the Promise returned by createWebpack(config) to see the full stack trace of the Cannot read property 'fileName' of null error.

Here is the error output I got (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>)
]

---

It looks like this.bundle.dts.r3SymbolsFile is null. Will update this post as I debug further.

---

It turns out that I had multiple versions of Angular installed. I'm also using lernajs on this project, so the incorrect version of node_modules/@angular/core was being searched for the r3FileName.