Esto es realmente un problema con las versiones angulares 9. Hay principalmente 3 formas diferentes de solucionar este problema, ya que angular-cli aún no lo ha solucionado. (Puede ver el problema en https://github.com/angular/angular-cli/issues/16873 ),

Solución 1

Actualice todas las dependencias en sus módulos de nodo (este problema puede generarse debido a la incompatibilidad de algunas versiones de dependencia) ejecute npm update en la terminal del proyecto para actualizar todas las dependencias.

Solución 2

Si la solución anterior no funcionó, agregue aot= true en angular.json y agregue "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" en package.json y luego elimine node_modules y el archivo de bloqueo del paquete e instálelo nuevamente. ( https://github.com/angular/angular/issues/35788#issuecomment-627514285 )

Solución 3

Si nada de lo anterior funcionó, sería una mejor opción degradar la versión de angular cli globalmente. Porque este problema no ha estado fallando en angular cli versión 8 y 7.

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

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

Actualización (30.07.2020)

Algunas personas han superado este problema al deshabilitar el motor ivy en el archivo tsconfig.json:

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

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

Este error también se puede generar si hay archivos en la matriz de files en tsconfig.app.json que no son módulos .

Tener un no módulo en tsconfig hace que los compiladores JIT y AOT fallen en el servicio o la compilación.

Antes:

 { "extends": "./tsconfig.base.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": ["node"] }, "files": [ "src/main.ts", "src/polyfills.ts", "./src/app/<non-module>.ts", // <-- The culprit ], "include": ["src/**/*.d.ts"] }

Después

 { "extends": "./tsconfig.base.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": ["node"] }, "files": ["src/main.ts", "src/polyfills.ts"], "include": ["src/**/*.d.ts"] }

Simplemente elimina al culpable...

Si eres como yo y terminaste aquí desde google. Mi error se produjo cuando incluí un componente de material angular, en lugar de su módulo en app.module.ts

nota especial: siempre que agregue un nuevo módulo de material a app.module.ts, debe detener (y reiniciar) ng serve o obtendrá 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 ],

En mi caso, me enfrento al mismo problema después de actualizar Angular 9 a 10. En Angular 10, simplemente elimine "postinstall": "ngcc" de package.json y "angularCompilerOptions": { "enableIvy": true } de tsconfig.app.json .

Tal vez esto pueda ayudarle.

Nota:

En Angular cli 9, presentan el nuevo compilador Ivy y para configurar el compilador Ivy en el proyecto, puede agregar la siguiente línea en los archivos respectivos

1. "postinstalación": "ngcc" en paquete.json
2. "angularCompilerOptions": { "enableIvy": verdadero} en tsconfig.app.json
3. "aot": verdadero en angular.json

Pero con Angular 10 configuraron el compilador predeterminado en Ivy. Entonces eso necesita eliminar la opción 1 y 2

Para mí, este problema se debió a una declaración incorrecta en la matriz de declaraciones del módulo. Declaré algo que no era parte de ese módulo.

 declarations: [DropDownModule], imports: [DropDownModule, CommonModule]

Este DropDownModule no es parte del módulo.

Odio este tipo de respuestas, pero funcionó para mí, ja.

Usando Angular 11 en mi proyecto

Eliminé la carpeta node_modules y reinstalé los módulos, luego reconstruí mi proyecto en desarrollo y el error del compilador desapareció.

Este error generalmente ocurre cuando no importamos ningún módulo en particular o importamos algún módulo incorrectamente. También recibí el mismo error una vez y la importación de BrowserAnimationsModule en un archivo module.ts funcionó para mí en ese momento.

Primero impórtalo así:

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Luego agregue el módulo dentro de la matriz de importaciones del archivo module.ts:

 @NgModule({ declarations: [NavBarComponent], imports: [ CommonModule, MatToolbarModule, MatIconModule, BrowserAnimationsModule, //<---------- ], exports:[NavBarComponent] })

La línea "buildOptimizer": true excluirá a @angular/compiler del resultado construido. La línea "optimization": true eliminará de alguna manera el código relacionado del componente dinámico creado basado en el compilador JIT, no tengo muy claro esto. Pero la solución a continuación solucionará ambos.

angular.json

 # other lines are ignored { "projects": { "app-web": { "architect": { "build": { "options": { "customWebpackConfig": { "path": "./webpack.config.js", "mergeStrategies": { "module.rules": "append", "resolve": "append" }, "replaceDuplicatePlugins": true } } } } } } }

webpack.config.js

 module.exports = (options) => { if (options.optimization && options.optimization.minimizer && Array.isArray(options.optimization.minimizer)) { (options.optimization.minimizer).forEach((plugin) => { if ((plugin.options || {}).terserOptions) { const terserOptions = (plugin.options || {}).terserOptions; terserOptions.compress = { side_effects: false, }; } }); } return { // other lines are ignored ...options } };

Sin embargo, el tamaño del resultado construido aumentará.

Aquí tienes algunas referencias a las que puedes echar un vistazo.

• La compilación de un proyecto para producción con aot y buildOptimizer se establece en verdaderos lanzamientos Falló la compilación de Angular JIT: ¡'@angular/compiler' no se cargó! Error
• Crear documentación de carga de componentes dinámicos

En mi caso, tenía {{ typeof someValue }} dentro de una plantilla de componente, lo escribí rápidamente para depurar algo más, pero resultó que typeof no funciona allí y da este extraño error en su lugar.

¡Simplemente detengo la aplicación y la ejecuto con 'ng serve' y extrañamente funciona!

Como ya se sugirió, ¡asegúrese de importar siempre el módulo y no el componente!

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SharedModule } from './shared/components/shared.module'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule, SharedModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}

Importé un componente que definí en mi SharedModule aquí por error.

Este artículo me ayudó a encontrar el problema.

agregar Módulo ha resuelto mi problema

Tuve un error similar usando angular 12:

El inyectable debe compilarse con el compilador JIT, pero '@angular/compiler' no está disponible.

Esta era la publicación con la que me estaba tropezando, así que pensé en poner una respuesta aquí si alguien más también experimenta este problema.

En mi caso, compilé lib con ivy con la opción "parcialmente":

"compilationMode": "parcial"

La aplicación angular también se compiló en este modo y eso estaba causando el problema. La aplicación que usa esta biblioteca debe compilarse con la opción predeterminada "completa".

Tuve una situación similar. Codifiqué una aplicación Angular 8 y luego la reinicié después de actualizar mi Angular cli a v12. Resolví ejecutar la actualización de npm pero luego recibí un nuevo error con flexlayout. Ejecuté npm i -s @angular/flex-layout @angular/cdk y resolví mis problemas

Tuve el mismo problema y lo que me solucionó fue un descuido con @Component.

@Component tiene que estar justo encima de la clase a la que se refiere.

captura de pantalla

Mi problema estaba en app.modules.ts:

importar { HttpClientModule, HttpClient } desde '@angular/common/http';

Eliminé HttpClient y funciona: import { HttpClientModule } from '@angular/common/http';

Este problema se puede generar debido a la incompatibilidad de algunas versiones de dependencia.

instalar paquetes npm

 npm i

luego reconstruir

 ng serve

Importo un @my/foo desde un módulo Nx a una prueba de Cypress que también exporta código relacionado con Angular.
La importación de archivos individuales `lib/foo/src/lib/foo' en su lugar lo arregló.

Lo resolví exportando el RouterModule de los componentes de funciones

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { QuestionsComponent } from './questions/questions.component'; const routes: Routes = [{ path: 'questions', component: QuestionsComponent }]; @NgModule({ imports: [RouterModule, RouterModule.forChild(routes)], exports: [RouterModule], // this export might be missing }) export class QuestionsRoutingModule {}

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

mi caso fue:

1. Actualice algunas bibliotecas (según recuerdo, eran ngx-spinner y ngx-datatables )
2. Usando angular 13.

Creo que eso hace que mi caso sea diferente a los demás aquí porque estoy usando Angular 13 y actualizando cosas que inicialmente eran angular 8. Por supuesto, actualizo gradualmente el proyecto de 8 a 13.

LA SOLUCIÓN para mí fue:

1. Detener el script de ng serve
2. Eliminar directorio node_modules y .angular
3. Ejecute npm install o yarn install
4. Ejecute el ng serve nuevamente

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