Primera vez que uso firestore y recibo este error. Parece ser un problema con Ivy, según mi investigación. No tengo mucha experiencia modificando tsconfig.app.json, que es la dirección a la que me han señalado, siguiendo otras respuestas.
Lo único que pude modificar del proyecto original fue usar Angular Fire 6 en lugar de 5, que había hecho inicialmente para seguir un tutorial.
Aquí está paquete.json:
{ "name": "language", "version": "0.0.0", "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.1", "@angular/cdk": "^9.0.0", "@angular/common": "~9.0.1", "@angular/compiler": "~9.0.1", "@angular/core": "~9.0.1", "@angular/fire": "^6.0.0-rc.1", "@angular/flex-layout": "^9.0.0-beta.29", "@angular/forms": "~9.0.1", "@angular/material": "^9.0.0", "@angular/platform-browser": "~9.0.1", "@angular/platform-browser-dynamic": "~9.0.1", "@angular/router": "~9.0.1", "firebase": "^7.8.2", "rxjs": "~6.5.4", "rxjs-compat": "^6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.2", "@angular/cli": "~9.0.2", "@angular/compiler-cli": "~9.0.1", "@angular/language-service": "~9.0.1", "@types/node": "^12.11.1", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.7.5", "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0", "firebase-tools": "^7.12.1", "fuzzy": "^0.1.3", "inquirer": "^6.2.2", "inquirer-autocomplete-prompt": "^1.0.1" } }angular.json
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "language": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/language", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "language:build" }, "configurations": { "production": { "browserTarget": "language:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "language:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "**/node_modules/**" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "language:serve" }, "configurations": { "production": { "devServerTarget": "language:serve:production" } } }, "deploy": { "builder": "@angular/fire:deploy", "options": {} } } } }, "defaultProject": "language" }tsconfig.app.json
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [], }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" ], "exclude": [ "src/test.ts", "src/**/*.spec.ts" ] }¡Gracias!
Se solucionó al excluirse de Ivy según la documentación.
Cambie tsconfig.app.json para excluirse de Ivy.
"enableIvy": falseSu módulo aún no está cargado por Angular Server en node ng serve , así que reinicie su servidor para que el servidor cargue el módulo que acaba de agregar en @NgModule app.module.ts
Esto funciona para mí:
1) Detener el servidor ng
2) Reinstale su paquete
npm install your-package-name3) Ejecutar todo de nuevo
ng serveHe probado todas las respuestas aquí, pero ninguna funcionó para mí. Así que decidí cambiar el archivo angular.js . hay una opción aot que es cierto. ¡entonces cambié eso a falso y el error desapareció!
"options": { "outputPath": "dist/DateMeUI", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": false, // here you have to change "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, Sin embargo, obtuve que hay 'tsconfig.app.json' que no pude encontrar en mi proyecto (tal vez tenga que agregar esto manualmente) con este archivo, puede configurar "enableIvy": false como otros lo mencionan . tsconfig.app.json
npm cache clean --force -> limpiar el caché puede resolver el problema.
Este problema se solucionará agregando el script posterior a la postinstall a continuación en su package.json .
Se ejecutará después de una instalación de npm.
"scripts": { "postinstall": "ngcc" } Publique agregando el código anterior, ejecute npm install
Esto funciona para mí cuando actualizo a Angular 9+
Este error se muestra cuando agrega la declaración del componente en imports: [] en lugar de las declarations: [] , por ejemplo:
declarations: [ AppComponent, ], imports: [ BrowserModule, AppRoutingModule, SomeComponent <-----------wrong ],Trabaja para mi
angular.json
"aot": falseesto funciona para mi
Detener el servidor ng (ctrl+c)
Corre de nuevo
npm start / ng serve --openRecibí este error cuando cometí el error estúpido de importar MatSnackBar en lugar de MatSnackBarModule en app.module.ts .
simplemente cambio mi importación de importación de { AngularFirestore} from '@angular/fire/firestore'; para import { AngularFirestoreModule } from '@angular/fire/firestore';
y esta funcionando bien
Simplemente vaya a su tsconfig.app.json en su proyecto y elimínelo todo.
y copie el código a continuación y péguelo. Resolverá tu problema :)
/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [], }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" ], "angularCompilerOptions": { "enableIvy": false } }Cometí un error al agregar un service en la matriz de imports en lugar de la matriz de providers .
@NgModule({ imports: [ MyService // wrong here ], providers: [ MyService // should add here ] }) export class AppModule { } Angular dice que necesita agregar Injectables a la matriz providers .
Me enfrenté al mismo problema en Ubuntu porque el directorio de la aplicación Angular tenía permiso de root . Cambiar la propiedad al usuario local resolvió el problema para mí.
$ sudo -i $ chown -R <username>:<group> <ANGULAR_APP> $ exit $ cd <ANGULAR_APP> $ ng servePara mí estaba trabajando bajo Ubuntu
El error desapareció si uso sudo con ng
sudo ng build sudo ng serveUna mejor solución es otorgar al usuario actual los permisos necesarios en la carpeta actual usando el siguiente comando:
sudo chown -R `whoami` ./Si lo hace, le permitirá ejecutar comandos ng sin Sudo.
Esto también puede ocurrir cuando se usa una importación incorrecta (por ejemplo, cuando se usa la importación automática). tomemos MatTimePickerModule como ejemplo. Esto dará un mensaje de error similar al descrito en la pregunta:
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';En cambio, esto debería ser
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';A veces, cuando cambia/actualiza @NgModule en su proyecto, los proyectos se compilan pero los cambios no se reflejan. Por lo tanto, reinicie una vez para obtener los resultados esperados si no los obtiene. ng servir
Lo que me solucionó fue hacer coincidir la versión del material angular y el adaptador con la versión más baja de otro módulo angular. Luego reinstalado y vuelto a ejecutar.
"@angular-devkit/schematics": "^10.1.2", "@angular/animations": "^10.1.2", "@angular/cdk": "^10.2.1", "@angular/common": "10.1.2", "@angular/compiler": "10.1.2", "@angular/core": "10.1.2", "@angular/forms": "10.1.2", "@angular/localize": "^10.1.2", "@angular/material": "^10.2.1", "@angular/material-moment-adapter": "^10.2.1", "@angular/platform-browser": "10.1.2", "@angular/platform-browser-dynamic": "10.1.2", "@angular/router": "10.1.2",Como puede ver, mi cdk era 10.2.1 y mi material también era 10.2.1. Vi que la versión más baja utilizada era 10.1.2, así que cambié las versiones:
"@angular/material": "^10.1.2", (was 10.2.1) "@angular/material-moment-adapter": "^10.1.2", (was 10.2.1)a 10.1.2, ejecutó "npm install" y luego "ng serve", y se compiló correctamente.
En mi caso, resolví esto configurando "strictTemplates" nuevamente en falso en tsconfig.json
{ "compilerOptions": { // ... }, "angularCompilerOptions": { "strictTemplates": false } }Anteriormente configuré esto en verdadero para evitar que se mostrara una ventana emergente de VStudio:
si tiene todos los componentes del tapete importados en su app.module.ts , ha importado algunos componentes del tapete y no ha usado ninguno de los componentes en las matrices de importación y exportación en app.module.ts , lo que significa que no hay problemas, no habrá errores, funcionará bien.
si crea un módulo de funciones para eso, digamos con ng gm material , esto creará el nombre de archivo material.module.ts .
ahora tenemos que copiar todas las declaraciones de importación de mat al módulo de funciones recién creado antes de copiar, tenga en cuenta que las declaraciones de importación están atenuadas o no (alguna indicación de IDE muestra que este nombre no se usa). si está atenuado significa que debe eliminar esos nombres, luego cópielos y péguelos en la matriz de importaciones y exportaciones de MaterialModule . eso es resolver
Estaba importando mat-list . Mi error fue usar lo siguiente:
import { MatList } from "@angular/material/list"; @NgModule({ exports: [ MatList, ] })Olvidé agregar el sufijo 'Módulo' a la declaración de importación y exportación. Lo siguiente solucionó el problema:
import { MatListModule } from "@angular/material/list"; @NgModule({ exports: [ MatListModule, ] })En mi caso, el problema fue llamar a .forRoot() desde algunos módulos secundarios que estaban destinados a ser reutilizados.
App.Module.ts
Puede solucionar el error agregando los inyectables en Proveedor no importaciones o declaraciones.
Servicio interno.ts
Agregue @injectable sobre la clase
ex:
@Injectable() export class WebApiService { }incluso si das espacio podría no funcionar
ex:
@Injectable() export class WebApiService { }puede ocurrir cuando importa un módulo que ya instaló, pero falta una o más de sus dependencias
En mi caso, el problema estaba en el último nodo. Estaba acoplando la aplicación Angular y usando la última versión del nodo como FROM node:latest as build
Para que funcione, use versiones de nodos compatibles con Angular como FROM node:14.17.4
Mi error: escribí
import { MatPaginator } from '@angular/material/paginator';en lugar de
import { MatPaginatorModule } from '@angular/material/paginator';en mi modulo.
intenta borrar el caché
npm cache clean --forcenpm installSi ejecuta npm install o yarn install con una cuenta raíz y ejecuta ng serve con una cuenta que no sea raíz, se encontrará con este problema.
Solución alternativa: inicie el servidor con la cuenta raíz también
Recibí este error al hacer una directiva compartida. Ahora, inicialmente entró en la matriz de declaraciones del módulo de la aplicación (de forma predeterminada después de ejecutar el comando con cli).
Lo tenía en la declarations array de exports array . Ahora, tan pronto como lo eliminé del archivo app.module.ts , el problema se resolvió.
El problema fue que se declaró dentro de 2 módulos (shared y app.module). Eliminado de app.module y listo!
Enfrenté un problema en Angular 12 y el problema es que mi colega definió el componente en el módulo de página y también el módulo común que usamos globalmente en el proyecto.
Eliminado del módulo de archivo global, problema resuelto.
On My Case
Estaba tratando de agregar una canalización personalizada a mi módulo compartido y lo agregué en la importación y exportación. Es por eso que causó este problema.
Resolví este problema agregando mi tubería personalizada en declaraciones: [], exportaciones: [] y proveedores: [].
Resolví este problema siguiendo el código:
@NgModule({ declarations: [ myCustomPipe, ], exports: [ myCustomPipe, ], providers: [ myCustomPipe, ] })No sé por qué, pero la única forma en que pude resolverlo fue:
Los componentes raíz tienen carga diferida ya que es para un sitio múltiple si eso hace alguna diferencia.
La mejor solución es usar React/Next.js en lugar de este antiguo marco hacky.