javascript - No capturado (en promesa): Error: Falló la compilación JIT de Angular: ¡'@angular/compiler' no cargado! en Angular 9

Creo un sitio web con Angular 9 pero tengo un problema con Angular.

En alguna ruta tengo el error:

ERROR Error: Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.

Pero en algunas rutas no tengo este error. Otra cosa extraña es que en local funciona bien, pero en el servidor no funcionó. ¿Cuál es el problema y cómo puedo solucionarlo?

En mi servidor coloco los archivos en la carpeta app, mientras que en la máquina local no tengo esta carpeta.

Aquí está angular.json:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "avastar": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "kt",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/avastar",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.png",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": [
                            "src/assets/vendors/global/vendors.bundle.js",
                            "src/assets/js/demo1/scripts.bundle.js"
                        ],
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "src",
                                "src/stylings/",
                                "src/stylings/base/",
                                "src/stylings/kt-customs/"
                            ]
                        },
                        "es5BrowserSupport": true
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [{
                                "type": "initial",
                                "maximumWarning": "5mb",
                                "maximumError": "10mb"
                            }]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "avastar:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "avastar:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "avastar:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/assets"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        },
        "avastar-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "prefix": "",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "avastar:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "avastar:serve:production"
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "avastar"
}

Respuesta #1

Si eres como yo y llegaste aquí desde Google. Mi error ocurrió cuando incluí un Componente de Angular Material, en lugar de su módulo en app.module.ts

nota especial: cada vez que agregues un nuevo módulo de material a app.module.ts debes detener (y reiniciar) ng serve o recibirás este error.

cambia esto

imports: [
   BrowserModule,
   HttpClientModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   MatDialog, // <====== this is the error
],

a esto

imports: [
   BrowserModule,
   HttpClientModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   MatDialogModule, // <====== this is the solution
],

Respuesta #2

Esto es en realidad un problema con las versiones de Angular 9. Principalmente hay 3 maneras diferentes de solucionar este problema ya que el angular-cli aún no lo ha arreglado. (Puedes ver el problema en https://github.com/angular/angular-cli/issues/16873)

Solución 1

Actualiza todas las dependencias en tus node-modules (Este problema puede generarse debido a la incompatibilidad de algunas versiones de dependencias) ejecuta npm update en el terminal del proyecto para actualizar todas las dependencias.

Solución 2

Si la solución anterior no funcionó, añade aot= true en angular.json y añade "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" en package.json y luego elimina node_modules y el archivo de bloqueo de paquetes y vuelve a instalar. (https://github.com/angular/angular/issues/35788#issuecomment-627514285)

Solución 3

Si ninguno de los anteriores funcionó, sería una mejor opción degradar la versión de Angular CLI globalmente. Porque este problema no ha estado molestando en la versión 8 y 7 de Angular CLI.

ng --version
npm uninstall -g @angular/cli
npm cache clean --force

npm install -g @angular/[email 
ng --version

............................................................................................................................................................

Actualización (30.07.2020)

Algunas personas han superado este problema desactivando el motor Ivy en el archivo tsconfig.json:

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false }

Referencia: https://github.com/angular/angular/issues/35788#issuecomment-650550297

Respuesta #3

Recibí el mismo mensaje, creo que tengo un caso diferente con personas que ya respondieron aquí (tal vez diferente de quien hizo la pregunta inicialmente también).

Mi caso era:

Actualizar algunas bibliotecas (según recuerdo, eran ngx-spinner y ngx-datatables)
Usando Angular 13.

Creo que lo que hace que mi caso sea diferente de los demás aquí es que estoy usando Angular 13 y actualizando cosas que inicialmente eran Angular 8. Por supuesto, fui actualizando gradualmente el proyecto de la versión 8 a la 13.

LA SOLUCIÓN para mí fue:

Detén el script ng serve
Eliminar el directorio node_modules y .angular
Ejecute npm install o yarn install
Ejecute de nuevo el ng serve

En comparación con la respuesta existente aquí, que sugiere eliminar solo node_modules, mi solución fue eliminar también el directorio .angular. Supongo que es la caché del proyecto Angular. Lo asumo porque eliminar solo node_modules no funciona para mí.

Respuesta #4

A veces ayuda simplemente limpiar la caché de Angular.

Elimina la carpeta .angular en tu proyecto
Reinicia tu aplicación

Respuesta #5

Odio este tipo de respuestas pero me funcionó, ja.

Usando Angular 11 en mi proyecto