Build a CRUD App with Angular and Firebase
This tutorial shows how to build a basic wiki-style app with Angular and Firebase.
James Nickelby
For the npm of @angular/fire@5.2.1 and firebase@6.3.5 the install does not work properly do to node-pre-gyp issue. If you install the current by leaving off the versions it works. Otherwise when this becomes an older article, the version I got working is @angulr/fire@5.2.1 and firebase@6.3.5
Edit: I tried @angular/fire@5.1.1 and firebase@6.3.5
Matt Raible
Thanks for the feedback James! This tutorial specifies @angular/fire@5.1.1 firebase@5.8.4. If you use those versions, everything should work.
James Nickelby
Oops. I mean. I tried using 5.1.1 and 5.8.4 and it was giving me the node-pre-gyp issue. I am also using Angular 8 so perhaps that is this issue. Just posting to inform anyone using 8 that 5.2.1 and 6.3.5 works!
Matt Raible
Thanks for providing this information, James. It’s much appreciated!
R.Coffee
after doing and redoing the whole process, the error persists when executing the command “ng add @ oktadev / schematics”, Cannot find module '@ schematics / angular / utility / project’
Require stack:
- D: \ XYZ \ WikiClient \ node_modules \ @angular \ cdk \ schematics \ utils \ build-component.js
[…]
- C: \ Users \ XYZ \ AppData \ Roaming \ npm \ node_modules \ @angular \ cli \ bin \ ng
Matt Raible
This is a known issue with Angular 10. Unfortunately, I haven’t figured out a solution yet. As a workaround, you could downgrade your app to Angular 9, run ng add @oktadev/schematics, and then upgrade your app to Angular 10 by upgrading the dependencies in your package.json.
R.Coffee
Hi, it worked for me, thanks for everything.
Muhammad Mehdi Changezi
I am getting this erro which hasn’t been solved since for 2 weeks
ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘analytics’. Did you mean to use ‘import analytics from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:21 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘app’. Did you mean to use ‘import app from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:26 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘auth’. Did you mean to use ‘import auth from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:32 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘database’. Did you mean to use
’import database from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:42 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:53 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘functions’. Did you mean to use ‘import functions from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:64 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘messaging’. Did you mean to use ‘import messaging from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:75 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘performance’. Did you mean to use ‘import performance from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:88 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘remoteConfig’. Did you mean to
use ‘import remoteConfig from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:102 - error TS2614: Module ‘"…/…/firebase"’ has no exported member ‘storage’. Did you mean to use
’import storage from “…/…/firebase”’ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~
node_modules/@angular/fire/firestore/interfaces.d.ts:2:10 - error TS2614: Module ‘"…/…/…/firebase"’ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “…/…/…/firebase”’ instead?
2 import { firestore } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firestore/collection/collection.d.ts:2:10 - error TS2614: Module ‘"…/…/…/…/firebase"’ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “…/…/…/…/firebase”’ instead?
2 import { firestore } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firestore/document/document.d.ts:5:10 - error TS2614: Module ‘"…/…/…/…/firebase"’ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “…/…/…/…/firebase”’ instead?
5 import { firestore } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firestore/collection-group/collection-group.d.ts:2:10 - error TS2614: Module ‘"…/…/…/…/firebase"’ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “…/…/…/…/firebase”’ instead?
2 import { firestore } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firestore/firestore.d.ts:8:10 - error TS2614: Module ‘"…/…/…/firebase"’ has no exported member ‘firestore’. Did you mean to
use ‘import firestore from “…/…/…/firebase”’ instead?
8 import { firestore } from ‘firebase/app’;
Matt Raible
If you use the versions specified in this tutorial, I’m confident it will work.