Première utilisation de Firestore et j'obtiens cette erreur. Cela semble être un problème avec Ivy, d'après mes recherches. Je n'ai pas beaucoup d'expérience dans la modification de tsconfig.app.json, qui est la direction vers laquelle j'ai été indiqué, suite à d'autres réponses.
La seule chose que j'ai pu modifier à partir du projet d'origine était d'utiliser Angular Fire 6 au lieu de 5, ce que j'avais fait au départ pour suivre un tutoriel.
Voici package.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"
]
}
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
{
"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"
}
}
Merci!
24 Réponses :
Correction du problème en désactivant Ivy selon la documentation.
Modifiez tsconfig.app.json pour désactiver Ivy.
"enableIvy": false
Mes amis, désactiver Ivy qui sera bientôt le SEUL moteur de rendu pour Angular n'est pas la solution. Je comprends si vous devez pousser pour prod dès que possible pour des raisons, mais vous devez diagnostiquer et découvrir ce qui cause vraiment votre problème.
@AaronJordan Je pense que le problème est que Ivy n'est pas prêt pour la production, contrairement à ce que dit l'équipe Angular. Une mise à niveau de prêt à la production ne devrait pas avoir près de la quantité de bugs que Ivy a. En outre, View Engine ne disparaîtra pas de sitôt pour des raisons de compatibilité ascendante (même raison pour laquelle les constructions de bibliothèques Angular se produisent toujours dans View Engine, pas Ivy)
Dans votre "tsconfig.app.json", ajoutez les lignes suivantes
"angularCompilerOptions": {"enableIvy": false}
Où ajouter? Juste après avoir suivi les lignes de code "exclude": ["src / test.ts", "src / ** / *. Spec.ts"],
Votre module n'est pas encore chargé par le serveur angulaire dans le node ng serve , alors redémarrez votre serveur pour que le serveur charge le module que vous venez d'ajouter dans @NgModule app.module.ts
J'ai découvert que plusieurs fois, redémarrer le serveur ou redémarrer l'IDE fera l'affaire: D
Salut, je reçois toujours des problèmes avec l'espace de travail mono-repo, où il a des node_modules racine.
Je trouve toujours que je jure que j'ai redémarré depuis que j'ai fait un changement comme celui-ci, mais ... il s'avère que je ne l'ai pas fait et le redémarrage l'a corrigé. Merci de me rappeler que je dois "l'éteindre et le rallumer" avant même de chercher sur Google!
Cela fonctionne avec moi, merci !!
Cela fonctionne pour moi:
1) Arrêtez le serveur ng
2) Réinstaller votre package
ng serve
3) Tout recommencer
npm install your-package-name
npm cache clean --force -> le nettoyage du cache peut résoudre le problème.
J'ai testé toutes les réponses ici mais aucune n'a fonctionné pour moi. J'ai donc décidé de changer le fichier angular.js . il y a une aot option , il qui est vrai. puis j'ai changé cela en faux et l'erreur a disparu!
"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": []
},
Cependant, j'ai compris qu'il y a 'tsconfig.app.json' que je n'ai pas pu trouver que dans mon projet (peut-être que vous devez l'ajouter manuellement) par ce fichier, vous pouvez définir le "enableIvy": false comme d'autres le mentionnent . tsconfig.app.json
Ce problème sera résolu en ajoutant le script de postinstall - postinstall ci-dessous dans votre package.json .
Il sera exécuté après une installation de npm.
"scripts": {
"postinstall": "ngcc"
}
Publiez l'ajout du code ci-dessus, exécutez npm install
Cela fonctionne pour moi lors de la mise à niveau vers Angular 9+
Cette erreur apparaît lorsque vous ajoutez une déclaration de composant dans les imports: [] au lieu de declarations: [] , par exemple:
declarations: [ AppComponent, ], imports: [ BrowserModule, AppRoutingModule, SomeComponent <-----------wrong ],
Je ne suis pas d'accord - ce n'est pas la réponse pour moi (ni pour beaucoup d'autres).
C'était la bonne réponse pour moi mais j'ai dû redémarrer
merci - modules vs composant - oups - évident ... merci d'être le `` parler à l'ours '' ce soir ...
merci beaucoup. Y a-t-il une raison pour laquelle nous ne pouvons pas utiliser comme ci-dessus?
Cela sauve des vies, cela devrait être la bonne réponse. 👍
Ce! Vérifiez également les autres propriétés de déclaration, telles que les providers , etc. Assurez-vous qu'elles ont toutes des valeurs correctes et valides.
C'est drôle que la dernière fois que je suis tombé sur cette page, la réponse dont j'avais besoin était de @ Arbahud-Rio-Daroyni. Maintenant c'est celui-ci.
Le simple redémarrage du serveur avec la commande npm start fait l'affaire. Merci à tous pour les suggestions.
J'ai eu cette erreur lorsque j'ai ajouté la classe de service. J'utilisais Angular 9 Went pour plusieurs solutions, rien ne m'a aidé à résoudre ce problème. Si vous avez tout essayé, assurez-vous d'avoir ajouté une référence de module ng dans la bibliothèque principale à l'intérieur du service. Voir Img
J'ai eu cette erreur lorsque j'ai commis l'erreur bonehead d'importer MatSnackBar au lieu de MatSnackBarModule dans app.module.ts .
Fellow Bonehead ici - MatCheckboxModule - Votre réponse a été utile, merci
Travaille pour moi
angular.json
"aot": false
Cela fonctionne pour moi
Arrêtez le serveur ng (ctrl + c)
Courir à nouveau
npm start / ng serve --open
Redémarrez votre serveur, cela signifie arrêter ng serve et recommencer comme (ng serve), votre problème sera résolu.
lorsque vous apportez des modifications à votre package.json, vous devez redémarrer votre serveur ng
J'ai eu ce message d'erreur car j'essayais d'importer un composant dans un nouveau module au lieu d'importer l'autre module où mon composant a été déclaré.
La suppression de l'importation de composants de mon nouveau module et l'importation de l'autre module l'ont résolu pour moi.
Le redémarrage de votre serveur peut ne pas toujours fonctionner. J'ai cette erreur lorsque j'ai importé MatFormFieldModule .
Dans app.module.ts , j'ai importé MatFormField au lieu de MatFormFieldModule, ce qui a conduit à cette erreur.
Maintenant, changez-le et redémarrez le serveur, j'espère que cette réponse vous aidera.
Accédez simplement à votre tsconfig.app.json dans votre projet et supprimez tout de celui-ci
et copiez le code ci-dessous et collez-le. Cela résoudra votre problème :)
/* 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
}
}
app.module.ts service au module ie dans le app.module.ts des imports app.module.ts au lieu de l'ajouter au tableau des providers .
app.module.ts
@NgModule({
imports: [
MyService // wrong here
],
providers: [
MyService // should add here
]
})
export class EventsModule { }
J'ai rencontré le même problème dans Ubuntu car le répertoire de l'application Angular avait l'autorisation root . Le fait de changer la propriété de l'utilisateur local a résolu le problème pour moi.
$ sudo -i $ chown -R <username>:<group> <ANGULAR_APP> $ exit $ cd <ANGULAR_APP> $ ng serve
Essayez de redémarrer le serveur et de le relancer en utilisant npm start
J'ai eu le même problème. J'ai suivi ces étapes (dans cet ordre exact, c'est TRÈS important):
Cela se produit principalement parce qu'Angular ne construira pas ces modules dans le bon ordre, c'est-à-dire avant le HTML.
par exemple Mon code:
<mat-toolbar> <!-- 2 -->
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
<mat-icon>favorite</mat-icon> <!-- 1 -->
</button>
<span>My App</span>
<span class="example-spacer"></span>
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
</button>
</mat-toolbar>Cette erreur se produit si souvent pour moi lorsque je continue d'exécuter ng serve et que j'essaie d'importer les mêmes modules comme RouterModule, etc.
Chaque fois que le redémarrage de l'application fonctionne très bien pour moi ( ng serve ).
je change simplement mon importation depuis l'importation de { AngularFirestore} from '@angular/fire/firestore'; pour import { AngularFirestoreModule } from '@angular/fire/firestore';
et ça marche bien
Pour moi, je travaillais sous Ubuntu
L'erreur a disparu si j'utilise sudo avec ng
sudo ng build sudo ng serve
le redémarrage de la console m'a aidé