RaulGM
April 3, 2023, 3:35pm
1
Hi!
I am updating an Ionic project from 6 to 7 and I am trying to install @angular /fire on it and there are no modules. So where exactly should we implement all firebase settings? Within a service?
I already tried ng add @angular/fire and got this message:
Specified module path /src/app/app.module.ts does not exist
It installed the packages node_modules, but I am wondering if there is any good practice about this so far. Will post an update if I figure something out meanwhile.
1 Like
I was in the same boat until i dug around into their issues on github. Here’s what i found:
opened 12:03PM - 18 Nov 22 UTC
<!--
IMPORTANT! YOU MUST FOLLOW THESE INSTRUCTIONS OR YOUR ISSUE WILL BE CLOS… ED.
Thank you for contributing to the Angular and Firebase communities!
Have a usage question?
=======================
We get lots of those and we love helping you, but GitHub is not the best place for them and they will be closed. Here are some resources to get help:
- Go through the Developer's Guide: https://github.com/angular/angularfire2#developer-guide
If the official documentation doesn't help, try asking through our officially supported channels:
- Firebase Google Group: https://groups.google.com/forum/#!forum/firebase-talk
- Stack Overflow: https://stackoverflow.com/questions/tagged/angular (include the firebase and angularfire tags, too!)
*Please avoid double posting across multiple channels!*
Think you found a bug?
=======================
Yeah, we're definitely not perfect! Please use the bug report template below and include a minimal repro when opening the issue.
Have a feature request?
========================
Great, we love hearing how we can improve our products! Remove the template below and
provide an explanation of your feature request. Provide code samples if applicable. Try to
think about what it will allow you to do that you can't do today? How will it make current
workarounds straightforward? What potential bugs and edge cases does it help to avoid?
-->
### Version info
<!-- What versions of the following libraries are you using? Note that your issue may already
be fixed in the latest versions. -->
**Angular:** 15.0.0
**Firebase:** 9.14.0
**AngularFire:** 7.4.1
**Node:** v16.18.1
**NPM:** 8.19.2
**Operating system:** macOS
### How to reproduce these conditions
**Failing test unit, Stackblitz demonstrating the problem**
<!--
Provide a failing test unit, or create a minimal, complete, and
verifiable example (http://stackoverflow.com/help/mcve) using
StackBlitz (https://stackblitz.com/edit/angular-fire-start).
-->
**Steps to set up and reproduce**
1) Angular version upgraded v14 to v15. (blank project)
2) ng add @angular/fire
3) ng serve
**Sample data and security rules**
### Debug output
Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:18 - error TS2430: Interface 'DocumentSnapshotExists<T>' incorrectly extends interface 'DocumentSnapshot<DocumentData>'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData | undefined'.
Type 'T' is not assignable to type 'DocumentData'.
13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
~
This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
~
This type parameter might need an `extends firebase.firestore.DocumentData | undefined` constraint.
Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:18 - error TS2430: Interface 'QueryDocumentSnapshot<T>' incorrectly extends interface 'QueryDocumentSnapshot<DocumentData>'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.
23 export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot {
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:40
23 export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot {
~
This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:18 - error TS2430: Interface 'QuerySnapshot<T>' incorrectly extends interface 'QuerySnapshot<DocumentData>'.
Types of property 'docs' are incompatible.
Type 'QueryDocumentSnapshot<T>[]' is not assignable to type 'QueryDocumentSnapshot<DocumentData>[]'.
Type 'QueryDocumentSnapshot<T>' is not assignable to type 'QueryDocumentSnapshot<DocumentData>'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.
26 export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot {
~~~~~~~~~~~~~
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:32
26 export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot {
~
This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:18 - error TS2430: Interface 'DocumentChange<T>' incorrectly extends interface 'DocumentChange<DocumentData>'.
The types returned by 'doc.data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.
29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange {
~~~~~~~~~~~~~~
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:33
29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange {
~
This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
** Errors in the JavaScript console **
** Output from `firebase.database().enableLogging(true);` **
** Screenshots **
### Expected behavior
### Actual behavior
You need to import in the main.ts now.