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

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.

After referencing this (which solved my issue as well),

Issue is with ngx-bootstrap/* version

The error happens, because angular-io-slimscroll has a direct dependency on @angular/[email protected]. I am surprized this even worked before Ivy. Angular libraries should not bring in their own version of Angular (they should have @angular/* packages as peerDependencies instead).

The last commit on angular-io-slimscroll was more than 1.5 years ago, so the project is likely not maintained any more. There are also several open issues about compatibility with recent Angular versions: rd-dev-ukraine/angular-io-slimscroll, rd-dev-ukraine/angular-io-slimscroll, rd-dev-ukraine/angular-io-slimscroll

In my case, After I removed ng2-chessboard, pdfjs dependencies and updated @ngrx/store, @ngx-formly/bootstrap, @ngx-formly/core to latest. Boom, It got resolved let me know if it helps.

Today I upgraded angular 8 to 9 and I got same error: TypeError: Cannot read property 'fileName' of null. After reseaches I realized it's all about packages and their dependencesies. You need to check previous messages because answers in there.

In my case I got a lot of warning messages like this.

Warning: Unable to fully load ...frontend/node_modules/ngx-carousel-3d/node_modules/packages/core/esm5/src/type.js for source-map flattening: ENOENT: no such file or directory, open '...frontend/node_modules/ngx-carousel-3d/node_modules/packages/core/esm5/src/type.js.map'

And I checked the .../node_modules/ngx-carousel-3d/node_modules/ folder but I couldn't found packages folder and other folders.

ngx-carousel-3d is one of the default node packages and I have never used it in my project. So I removed the package and recompiled it and error gone.

In your case maybe you need to update package (or downgrade) but don't skip the warning messages.

Late to the game for me, posting in case it will help someone else, but it turned out I had an errant node_modules folder farther up the chain (no idea why), which probably gave me two versions of @angular/core that confused the compiler. When I deleted that other node_modules folder, I no longer received this error. This was with angular 12.1.x.

Maybe this could help you, my problem was that I'm referencing some code by mistake from another project with angular 4, so make sense to get this code in that case. if not maybe is because you are doing an import of angular core or another angular library in a bad way (angular 4 and angular 8 libraries have different ways to import, usually libraries based on new versions of angular include a /ngx in the import)