typescript - ERROR en No se puede leer la propiedad 'fileName' de null Después de actualizar Angular 7 a Angular 9

Estoy recibiendo un ERROR en Cannot read property 'fileName' of null después de actualizar Angular 7 a 9. He actualizado todas mis dependencias a la última versión.

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

Cuando intenté servir, construir la aplicación, está obteniendo el mismo error. ¿Hay alguna posibilidad de rastrear la ubicación de este error? ¿Está relacionado con alguna de las dependencias que estoy usando actualmente? ¿Alguien puede ayudarme a solucionar este problema?

Respuesta #1

Resumen: Había múltiples versiones de @angular/core instaladas.

Después de realizar algunas depuraciones, encontré una manera de generar el rastro de pila para mi situación. Estos son los pasos que seguí:

1. Mirando el mensaje de error, observe que ERROR in $ {error} está presente. Realice una búsqueda en node_modules de ERROR in, lo que conduce a node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js en la función statsErrorsToString

2. Nota el argumento json y el arreglo json.errors

3. Agrega un console.trace a la función statsErrorsToString

4. Camina hacia arriba por el rastro de la pila hasta node_modules/@angular-devkit/build-webpack/src/webpack-dev-server/index.js en la función runWebpackDevServer que devuelve una llamada a createWebpack(config) con una devolución de llamada

5. Agrega un console.debug(stats.compilation.errors) al callback del Promise devuelto por createWebpack(config) para ver la traza completa del error Cannot read property 'fileName' of null.

Aquí está el resultado de error que obtuve (tu experiencia puede variar):

[
  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>)
]

Parece que this.bundle.dts.r3SymbolsFile es null. Actualizaré esta publicación a medida que depure más.

Resulta que tenía múltiples versiones de Angular instaladas. También estoy usando lernajs en este proyecto, por lo que se estaba buscando la versión incorrecta de node_modules/@angular/core para el r3FileName.

Respuesta #2

Después de referirme a esto (lo cual también resolvió mi problema),

El problema está con la versión de ngx-bootstrap/*

El error ocurre porque angular-io-slimscroll tiene una dependencia directa de @angular/[email . Me sorprende que esto haya funcionado antes de Ivy. Las bibliotecas de Angular no deberían traer su propia versión de Angular (deberían tener los paquetes @angular/* como peerDependencies en su lugar).

El último commit en angular-io-slimscroll fue hace más de 1,5 años, por lo que es probable que el proyecto ya no se mantenga. También hay varios problemas abiertos sobre la compatibilidad con las versiones recientes de Angular: rd-dev-ukraine/angular-io-slimscroll, rd-dev-ukraine/angular-io-slimscroll, rd-dev-ukraine/angular-io-slimscroll

En mi caso, después de que eliminé las dependencias ng2-chessboard, pdfjs y actualicé @ngrx/store, @ngx-formly/bootstrap, @ngx-formly/core a la última versión. ¡Boom, se resolvió! Avísame si te ayuda.