Compatibility with `firebase` v9 and `@angular/fire` v7

gkalpak commented 3 years ago

Just a heads-up that this package is not compatible with the latest versions of firebase (v9) and @angular/fire (v7), due to them introducing several breaking changes.

In the short term, making a package compatible with the latest versions of firebase and @angular/fire could be just a matter of updating the import paths.

ciriousjoker commented 3 years ago

The compatibility mode compiles properly.

node_modules/ngx-auth-firebaseui/fesm2015/ngx-auth-firebaseui.js

import { AngularFireAuth, AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/compat/firestore';

Obviously changing node_module files locally isn't practical.

When trying to build the project it doesn't work though, here's the list of error messages:

```log ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1966:33-67 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1967:31-63 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1968:30-57 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1969:32-65 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1970:31-63 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1971:34-61 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:1972:30-57 - Error: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:4205:29-45 - Error: export 'FIREBASE_OPTIONS' (imported as 'FIREBASE_OPTIONS') was not found in '@angular/fire' (possible exports: VERSION, keepUnstableUntilFirst, observeInsideAngular, observeOutsideAngular, ɵAngularFireSchedulers, ɵZoneScheduler, ɵcacheInstance, ɵgetAllInstancesOf, ɵgetDefaultInstanceOf, ɵkeepUnstableUntilFirstFactory, ɵmemoizeInstance, ɵzoneWrap) ./node_modules/ngx-auth-firebaseui/__ivy_ngcc__/fesm2015/ngx-auth-firebaseui.js:4209:29-46 - Error: export 'FIREBASE_APP_NAME' (imported as 'FIREBASE_APP_NAME') was not found in '@angular/fire' (possible exports: VERSION, keepUnstableUntilFirst, observeInsideAngular, observeOutsideAngular, ɵAngularFireSchedulers, ɵZoneScheduler, ɵcacheInstance, ɵgetAllInstancesOf, ɵgetDefaultInstanceOf, ɵkeepUnstableUntilFirstFactory, ɵmemoizeInstance, ɵzoneWrap) ```

For the first few errors, I fixed similar errors by changing my imports from:

import firebase from 'firebase';

to

import * as firestore from 'firebase/firestore';

chriscurnow commented 2 years ago

I have created PR #638 which seems to work.

osterland commented 2 years ago

look like your pr got merged, but when adding version 5.3.0 i get the same errors. Any Tips how i can get your version? TY

mattpenner commented 2 years ago

How are others currently unit testing their firebase rules? I am attempting to start doing this but I'm hitting roadblocks and haven't been successfully able to do so. All the latest firebase testing packages are built on v9. The older packages that target v8 don't seem to work with Angular 12+. At this point it seems that I can't unit test firebase if I'm using ngx-auth.

@AnthonyNahas is there some help we might provide to get a new release of ngx-auth published with the latest PRs? Testing, documentation updates, etc.? Let us know if the community here can help out in some ways.

My next step is to build locally, pack and include the local version in our project and see if this will help us upgrade to v9.

mattpenner commented 2 years ago

@CiriousJoker I cloned the repo, which contains your PR. I then ran npm run build:lib to build the library. I then used npm link in the dist folder to link it.

When I import it into my project and attempt to build I get the following error twice:

⠋ Generating browser application bundles (phase: setup)...
Compiling ngx-auth-firebaseui : es2015 as esm2015

An error occurred during the build:
Error: Failed to compile entry-point ngx-auth-firebaseui (`es2015` as esm2015) due to compilation errors:
node_modules/ngx-auth-firebaseui/fesm2015/ngx-auth-firebaseui.js:1634:26 - error NG1010: Value at position 22 in the NgModule.imports of NgxAuthFirebaseUIModule is not a reference
  Value could not be determined statically.

1634                 imports: [
                              ~
1635                     CommonModule,
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ...
1664                     AngularFirestoreModule,
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1665                 ],
     ~~~~~~~~~~~~~~~~~

  node_modules/ngx-auth-firebaseui/fesm2015/ngx-auth-firebaseui.js:1663:21
    1663                     AngularFireAuthModule,
                             ~~~~~~~~~~~~~~~~~~~~~
    Unknown reference.

Were you able to successfully build a project that imports the package with your changes? I'm doing a lot of research but not finding what the issue is that is causing this.

docaohuynh commented 2 years ago

@mattpenner I have same problem

ciriousjoker commented 2 years ago

Idk, sorry. I ended up going back to the old version in the meantime.

Judp0m commented 2 years ago

Also blocked by this... Have to decide between waiting for this package to be upgraded to support firebase V9 (at least via Compat mode, preferably via Modular mode to get the size reduction benefits) or dropping the dependency.

mattpenner commented 2 years ago

Agreed. We are getting close to being forced to make that decision.

@AnthonyNahas I would be happy to try and help assist with the upgrade but I would need some assistance getting familiar with the package. Without the testing in place and my lack of familiarity with some of the features we don't use the last thing I would want to do is submit a patch and call it done only to break some parts for others. I can help but it will require some joint time for education on the project.

AnthonyNahas commented 2 years ago

https://www.npmjs.com/package/ngx-auth-firebaseui v6 is now live

this is fixed now

thank you<3

AnthonyNahas / ngx-auth-firebaseui

Compatibility with `firebase` v9 and `@angular/fire` v7 #631