First time using firestore and I'm getting this error. It seems to be a problem with Ivy, from my research. I don't have a lot of experience modifying tsconfig.app.json, which is the direction I've been pointed to, following other answers.
The only thing I was able to modify from the original project was to use Angular Fire 6 instead of 5, which I had done initially to follow a tutorial.
Here's package.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"
]
}
Thanks!
This question is related to
angular
google-cloud-firestore
angularfire
I had this error message because I was trying to import a component in a new module instead of importing the other module where my component was declared.
Removing the component import from my new module and importing the other module solved it for me.
I have faced the same issue in Ubuntu because the Angular app directory was having root
permission. Changing the ownership to the local user solved the issue for me.
$ sudo -i
$ chown -R <username>:<group> <ANGULAR_APP>
$ exit
$ cd <ANGULAR_APP>
$ ng serve
i simply change my import from import from { AngularFirestore} from '@angular/fire/firestore';
to
import { AngularFirestoreModule } from '@angular/fire/firestore';
and it's working fine
This can also occur when using the wrong import (for example when using autoimport). let's take the MatTimePickerModule as an example. This will give an error message that is similar to the one described in the question:
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker/lib/timepicker.module';
This should instead be
import { NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
Work for me
angular.json
"aot": false
This works for me
Stop the ng server(ctrl+c)
Run Again
npm start / ng serve --open
Just restarting the server with command npm start
did the trick. Thanks all for the suggestions.
Your module is not yet loaded by the Angular Server in node
ng serve
, so restart your server so the server loads the module that you just added in @NgModule app.module.ts
Restart your server , means stop ng serve and start again like ( ng serve ), your problem will be solved.
when make any changes in your package.json then you need to restart your ng server
Just go to your tsconfig.app.json in your project and remove all from it
and copy below code and paste it. It will solve your issue :)
/* 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
}
}
npm cache clean --force
-> cleaning the cache maybe solve the issue.
Try to restart the server and launch it back using npm start
This issue will be fixed by adding the postinstall
script below in your package.json
.
It will be run after a npm install.
"scripts": {
"postinstall": "ngcc"
}
Post adding the above code, run npm install
This works for me when upgrading to Angular 9+
Sometimes when you change/update @NgModule in your project, projects get compiled but changes doesn't get reflect. So, restart once to get expected results if you not get it. ng serve
This error shows when you add component declaration in imports: []
instead of declarations: []
, e.g:
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SomeComponent <-----------wrong
],
I got this error when I made the bonehead mistake of importing MatSnackBar
instead of MatSnackBarModule
in app.module.ts
.
I had the same problem. I followed these steps (in this exact order, this is VERY important):
This happens mainly because Angular won't build those modules in the correct order, i.e before the HTML.
e.g My 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>
_x000D_
This error occurs so often for me when i kept running ng serve on and trying to import same modules like RouterModule etc.
Every time restarting the application works fine for me (ng serve) .
I made a mistake by adding a service
into imports
array instead of providers
array.
@NgModule({
imports: [
MyService // wrong here
],
providers: [
MyService // should add here
]
})
export class AppModule { }
Angular
says you need to add Injectables
into providers
array.
Restarting your server may not work always. I have got this error when I imported MatFormFieldModule.
In app.module.ts, I have imported MatFormField instead of MatFormFieldModule which lead to this error.
Now change it and restart the server, Hope this answer helps you.
For me I was working under Ubuntu
The error disappeared if I use sudo with ng
sudo ng build
sudo ng serve
This works for me:
1) Stop the ng server
2) Reinstall your package
npm install your-package-name
3) Run all again
ng serve
I have tested all the answers here but non of them worked for me. So I decided to change angular.js
file. there is a aot
option there which is true. then I altered that to the false and the error vanished!
"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": []
},
However, I got that there is 'tsconfig.app.json' which I couldn't find that in my project(maybe you have to add this manually ) by this file you can set the "enableIvy": false
as others mention to it. tsconfig.app.json
Source: Stackoverflow.com