diff --git a/CHANGELOG.md b/CHANGELOG.md index 516a26388..81142b24b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ + +# [6.0.0-rc.1](https://github.com/angular/angularfire2/compare/6.0.0-rc.0...6.0.0-rc.1) (2020-02-06) + +Continued work on version 6. + +* Brought a fix in `5.4.2` ([#2315](https://github.com/angular/angularfire2/issues/2315)) +* Fixed `@angular/fire/analytics` attempting to use `global` ([#2303](https://github.com/angular/angularfire/issues/2303)) +* Fix the error message on storage ([#2313](https://github.com/angular/angularfire/issues/2313)) +* Starting on documentation for 6.0 + -# [6.0.0-rc.0](https://github.com/angular/angularfire2/compare/5.3.0...6.0.0-rc.0) (2020-01-30) +# [6.0.0-rc.0](https://github.com/angular/angularfire2/compare/5.4.1...6.0.0-rc.0) (2020-01-30) Version 6 of AngularFire drops support for Angular version 8 and below, older versions of typescript, Firebase, drops `firebase-node`, `database-deprecated`, and more. @@ -11,9 +21,6 @@ Version 6 of AngularFire drops support for Angular version 8 and below, older ve * Using `ng-packagr` to build the library, bringing us back up to speed on APF * All of our `@NgModules` are now `providedIn: 'any'` rather than singletons * We make use of Proxy in more modules, you'll need to polyfill if you want to support IE 11 -* Fixed the `ng add` and `ng deploy` commands -* `ng deploy` now supports a `buildTarget` option -* We've addressed a number of memory leaks and Zone.js issues in SSR applications #### `@angular/fire` @@ -26,7 +33,8 @@ Version 6 of AngularFire drops support for Angular version 8 and below, older ve #### `@angular/fire/auth` -* `AngularFireAuthModule` no longer imports `firebase/auth` on it's own to remain side-effect free, you'll need to `import 'firebase/auth'` on your own +* `AngularFireAuthModule` is now side-effect free and `AngularFireAuth` will dynamically import `firebase/auth` when a request is made +* `AngularFireAuth` has dropped the `auth` property and instead Promise Proxies the underlying Firebase `auth.Auth` instance #### `@angular/fire/auth-guard` @@ -48,27 +56,56 @@ Version 6 of AngularFire drops support for Angular version 8 and below, older ve * Dropped the `FunctionsRegionToken` and `FUNCTIONS_REGION` DI tokens in favor of `REGION` * Dropped the `FUNCTIONS_ORIGIN` DI token in favor of `ORIGIN` -* `AngularFireFunctions` is now side-effect free and now lazy loads `firebase/functions` when a request is made -* `AngularFireFunctions` has dropped the `functions` property and instead Proxies the underlying Firebase `functions.Functions` instance +* `AngularFireFunctionsModule` is now side-effect free and `AngularFireFunctions` will dynamically import `firebase/functions` when a request is made +* `AngularFireFunctions` has dropped the `functions` property and instead Promise Proxies the underlying Firebase `functions.Functions` instance #### `@angular/fire/messaging` * `AngularFireMessaging`'s dynamic import of `firebase/messaging` is now lazy, if you don't call any methods the SDK will not be loaded -* `AngularFireMessaging` has dropped the `messaging` property and instead Proxies the underlying Firebase `messaging.Messaging` instance +* `AngularFireMessaging` has dropped the `messaging` property and instead Promise Proxies the underlying Firebase `messaging.Messaging` instance #### `@angular/fire/performance` -* `AngularFirePerformance` now Proxies the underlying Firebase `messaging.Messaging` instance - -#### `@angular/fire/remote-config` - -* `AngularFireRemoteConfig` now uses `ensureInitialized()` in it's observables, protecting their value emissions better against race conditions +* `AngularFirePerformance` has dropped the `performance` property and instead Promise Proxies the underlying Firebase `performance.Performance` instance #### `@angular/fire/storage` * `AngularFireStorageModule` no longer imports `firebase/storage` on it's own to remain side-effect free, you'll need to `import 'firebase/storage'` on your own * Dropped `StorageBucket` DI token in favor of `BUCKET` + +## [5.4.2](https://github.com/angular/angularfire2/compare/5.4.1...5.4.2) (2020-02-06) + +### Bug Fixes + +* **core:** fixing a problem with hot/cold observables resulting in missed events ([#2315](https://github.com/angular/angularfire2/issues/2315)) ([f24df35](https://github.com/angular/angularfire2/commit/f24df35)) + + + +## [5.4.1](https://github.com/angular/angularfire2/compare/5.4.0...5.4.1) (2020-02-05) + +### Bug Fixes + +* **auth:** `authState` should be using `onAuthStateChanged` ([#2308](https://github.com/angular/angularfire2/issues/2308)) ([9506f85](https://github.com/angular/angularfire2/commit/9506f85)) + + +# [5.4.0](https://github.com/angular/angularfire2/compare/5.3.1...5.4.0) (2020-02-01) + +### Features + +* **core:** Register AngularFire and Angular versions with the JS SDK ([6096c95](https://github.com/angular/angularfire2/commit/6096c95)) +* **ng-deploy:** add option for buildTarget ([#2281](https://github.com/angular/angularfire2/issues/2281)) ([28a4e54](https://github.com/angular/angularfire2/commit/28a4e54)) +* **core:** Major changes to the Zone.js wrapping to address SSR memory leaks and more ([#2294](https://github.com/angular/angularfire2/issues/2294)) ([56df941](https://github.com/angular/angularfire2/commit/56df941)) + + + +# [5.3.1](https://github.com/angular/angularfire2/compare/5.3.0...5.3.1) (2020-02-01) + +### Bug Fixes +* **schematics**: The schematics should be functional again. The version of `firebase-tools` we were installing when you called `ng add @angular/fire` was using deprecated API. ([#2285](https://github.com/angular/angularfire2/issues/2285)) ([5867eeb](https://github.com/angular/angularfire2/commit/5867eebbd2ec7eaad0bbc8da94e38aca1fe7580b)) +* **schematics**: fix issues with FS and Devkit Paths ([#2279](https://github.com/angular/angularfire2/issues/2279)) ([5ccf5db](https://github.com/angular/angularfire2/commit/5ccf5db3302be4a77529c33eda9ce39e5503b3c4)) +* **rc**: Need to `ensureInitialized()` ([#2290](https://github.com/angular/angularfire2/issues/2290)) ([0d95523](https://github.com/angular/angularfire2/commit/0d955231a0c91d8abd4effe0e02044f40451a891)) + # [5.3.0](https://github.com/angular/angularfire2/compare/5.2.3...5.3.0) (2020-01-07) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f72c78642..47484db41 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -56,8 +56,10 @@ and help you to craft the change so that it is successfully accepted into the pr ```shell $ git clone -$ yarn install -$ yarn test +$ cd angularfire +$ yarn +$ yarn build +$ yarn test:all ``` 3) Make your changes in a new git branch: diff --git a/README.md b/README.md index 09ccd89d7..222165d44 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -

-

AngularFire

-

The official library for Firebase and Angular

-

+# AngularFire +The official Angular library for Firebase -[![Build Status](https://travis-ci.org/angular/angularfire.svg?branch=master)](https://travis-ci.org/angular/angularfire) [![Join the chat at https://gitter.im/angular/angularfire2](https://badges.gitter.im/angular/angularfire2.svg)](https://gitter.im/angular/angularfire2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +```bash +ng add @angular/fire@next +``` --- @@ -22,22 +22,11 @@ - **Manage binary data** - Upload, download, and delete binary files like images, videos, and other blobs. - **Call server code** - Directly call serverless Cloud Functions with user context automatically passed. - **Push notifications** - Register and listen for push notifications -- **Modular** - Include only what's needed. No AngularFire package is above 3kb with most under 2kb (gzipped). - -#### Quick links -[Contributing](CONTRIBUTING.md) - -[Stackblitz Template](https://stackblitz.com/edit/angular-1iment) - Remember to set your Firebase configuration in `app/app.module.ts`. - -[Upgrading to v5.0? Check out our guide.](docs/version-5-upgrade.md) +- **Modular** - Include only what's needed. No AngularFire package is above 4kb with most under 2kb (gzipped). -**Having troubles?** Get help on the [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk) (officially supported), the [Firebase Community Slack](https://firebase.community/) (look for the `#angularfire2` room), [Gitter](https://gitter.im/angular/angularfire2), or [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2). +## Quickstart -## Install - -```bash -npm install firebase @angular/fire --save -``` +Get your first application up and running by following [our quickstart guide](docs/install-and-setup.md). ## Example use: @@ -45,6 +34,7 @@ npm install firebase @angular/fire --save import { Component } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; +import 'firebase/firestore'; @Component({ selector: 'app-root', @@ -58,17 +48,23 @@ import { Observable } from 'rxjs'; }) export class MyApp { items: Observable; - constructor(db: AngularFirestore) { - this.items = db.collection('items').valueChanges(); + constructor(firestore: AngularFirestore) { + this.items = firestore.collection('items').valueChanges(); } } ``` -## Developer Guide +## Resources -### Getting started +[Contributing](CONTRIBUTING.md) + +[Stackblitz Template](https://stackblitz.com/edit/angular-1iment) - Remember to set your Firebase configuration in `app/app.module.ts`. -- [Installation & Setup](docs/install-and-setup.md) +[Upgrading to v6.0? Check out our guide.](docs/version-6-upgrade.md) + +**Having troubles?** Get help on the [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk) (officially supported), the [Firebase Community Slack](https://firebase.community/) (look for the `#angularfire2` room), [Gitter](https://gitter.im/angular/angularfire2), or [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2). + +## Developer Guide ### **NEW:** Monitor usage of your application in production diff --git a/docs/auth/getting-started.md b/docs/auth/getting-started.md index f79c55d78..764adad93 100644 --- a/docs/auth/getting-started.md +++ b/docs/auth/getting-started.md @@ -2,7 +2,7 @@ `AngularFireAuth.user` provides you an `Observable` to monitor your application's authentication State. -`AngularFireAuth.auth` returns an initialized +`AngularFireAuth` promise proxies an initialized `firebase.auth.Auth` instance, allowing you to log users in, out, etc. [See the Firebase docs for more information on what methods are available.](https://firebase.google.com/docs/reference/js/firebase.auth.Auth) @@ -16,7 +16,7 @@ import { auth } from 'firebase/app'; @Component({ selector: 'app-root', template: ` -
+

Hello {{ user.displayName }}!

@@ -27,13 +27,13 @@ import { auth } from 'firebase/app'; `, }) export class AppComponent { - constructor(public afAuth: AngularFireAuth) { + constructor(public auth: AngularFireAuth) { } login() { - this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider()); + this.auth.signInWithPopup(new auth.GoogleAuthProvider()); } logout() { - this.afAuth.auth.signOut(); + this.auth.signOut(); } } ``` diff --git a/docs/auth/router-guards.md b/docs/auth/router-guards.md index 5000e4edd..e326f68f6 100644 --- a/docs/auth/router-guards.md +++ b/docs/auth/router-guards.md @@ -68,7 +68,7 @@ import { map } from 'rxjs/operators'; // This pipe redirects a user to their "profile edit" page or the "login page" if they're unauthenticated // { path: 'profile', ...canActivate(redirectToProfileEditOrLogin) } -const redirectToProfileEditOrLogin = map(user => user ? ['profiles', user.uid, 'edit'] : ['login']); +const redirectToProfileEditOrLogin = () => map(user => user ? ['profiles', user.uid, 'edit'] : ['login']); ``` The `auth-guard` modules provides a `customClaims` operator to reduce boiler plate when checking a user's claims: @@ -80,7 +80,7 @@ import { customClaims } from '@angular/fire/auth-guard'; // This pipe will only allow users with the editor role to access the route // { path: 'articles/:id/edit', component: ArticleEditComponent, ...canActivate(editorOnly) } -const editorOnly = pipe(customClaims, map(claims => claims.role === "editor")); +const editorOnly = () => pipe(customClaims, map(claims => claims.role === "editor")); ``` ### Using router state diff --git a/docs/firestore/collections.md b/docs/firestore/collections.md index 8099f5988..5ae84e038 100644 --- a/docs/firestore/collections.md +++ b/docs/firestore/collections.md @@ -11,6 +11,7 @@ The `AngularFirestoreCollection` service is a wrapper around the native Firestor import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; +import 'firebase/firestore'; export interface Item { name: string; } @@ -89,6 +90,7 @@ There are multiple ways of streaming collection data from Firestore. import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; +import 'firebase/firestore'; export interface Item { id: string; name: string; } @@ -141,6 +143,7 @@ import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import 'firebase/firestore'; export interface Shirt { name: string; price: number; } export interface ShirtId extends Shirt { id: string; } @@ -189,6 +192,7 @@ import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import 'firebase/firestore'; export interface AccountDeposit { description: string; amount: number; } export interface AccountDepoistId extends AccountDeposit { id: string; } @@ -234,6 +238,7 @@ import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import 'firebase/firestore'; export interface AccountLogItem { description: string; amount: number; } export interface AccountLogItemId extends AccountLogItem { id: string; } @@ -283,6 +288,7 @@ There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `mod import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; +import 'firebase/firestore'; @Component({ selector: 'app-root', diff --git a/docs/firestore/documents.md b/docs/firestore/documents.md index d127e7bae..69dd2e9f7 100644 --- a/docs/firestore/documents.md +++ b/docs/firestore/documents.md @@ -11,6 +11,7 @@ The `AngularFirestoreDocument` service is a wrapper around the native Firestore import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; +import 'firebase/firestore'; export interface Item { name: string; } diff --git a/docs/firestore/querying-collections.md b/docs/firestore/querying-collections.md index a3d849374..94eabfa26 100644 --- a/docs/firestore/querying-collections.md +++ b/docs/firestore/querying-collections.md @@ -86,6 +86,7 @@ import { Component } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; import { Observable, BehaviorSubject, combineLatest } from 'rxjs'; import { switchMap } from 'rxjs/operators'; +import 'firebase/firestore'; export interface Item { text: string; diff --git a/docs/functions/functions.md b/docs/functions/functions.md index e49456c51..a9713e80b 100644 --- a/docs/functions/functions.md +++ b/docs/functions/functions.md @@ -73,11 +73,11 @@ Notice that calling `httpsCallable()` does not initiate the request. It creates ### Functions Region -Allow configuration of the Function's region by adding `FUNCTIONS_REGION` to the `providers` section of your `NgModule`. The default is `us-central1`. +Allow configuration of the Function's region by adding `REGION` to the `providers` section of your `NgModule`. The default is `us-central1`. ```ts import { NgModule } from '@angular/core'; -import { AngularFireFunctionsModule, FUNCTIONS_REGION } from '@angular/fire/functions'; +import { AngularFireFunctionsModule, REGION } from '@angular/fire/functions'; @NgModule({ imports: [ @@ -87,7 +87,7 @@ import { AngularFireFunctionsModule, FUNCTIONS_REGION } from '@angular/fire/func ], ... providers: [ - { provide: FUNCTIONS_REGION, useValue: 'asia-northeast1' } + { provide: REGION, useValue: 'asia-northeast1' } ] }) export class AppModule {} @@ -96,11 +96,11 @@ export class AppModule {} ### Cloud Functions emulator -Point callable Functions to the Cloud Function emulator by adding `FUNCTIONS_ORIGIN` to the `providers` section of your `NgModule`. +Point callable Functions to the Cloud Function emulator by adding `ORIGIN` to the `providers` section of your `NgModule`. ```ts import { NgModule } from '@angular/core'; -import { AngularFireFunctionsModule, FUNCTIONS_ORIGIN } from '@angular/fire/functions'; +import { AngularFireFunctionsModule, ORIGIN } from '@angular/fire/functions'; @NgModule({ imports: [ @@ -110,7 +110,7 @@ import { AngularFireFunctionsModule, FUNCTIONS_ORIGIN } from '@angular/fire/func ], ... providers: [ - { provide: FUNCTIONS_ORIGIN, useValue: 'http://localhost:5005' } + { provide: ORIGIN, useValue: 'http://localhost:5005' } ] }) export class AppModule {} @@ -155,7 +155,7 @@ import { AngularFireFunctionsModule, FUNCTIONS_ORIGIN } from '@angular/fire/func ], ... providers: [ - { provide: FUNCTIONS_ORIGIN, useValue: 'https://project-name.web.app' } + { provide: ORIGIN, useValue: 'https://project-name.web.app' } ] }) export class AppModule {} diff --git a/docs/install-and-setup.md b/docs/install-and-setup.md index 1fa54c8d4..906680432 100644 --- a/docs/install-and-setup.md +++ b/docs/install-and-setup.md @@ -1,42 +1,24 @@ -# 1. Installation and Setup - -> Using Ionic and the Ionic CLI? Check out these [specific instructions](ionic/cli.md) for Ionic and their CLI. - -### 0. Prerequisites - -AngularFire provides multiple module formats for different types of builds. The guide is based on the Angular CLI. It is possible to do a manual setup with Webpack or a SystemJS build as well. - -```bash -npm install @angular/cli -``` +# AngularFire Quickstart ### 1. Create a new project ```bash +npm install -g @angular/cli ng new cd ``` The Angular CLI's `new` command will set up the latest Angular build in a new project structure. -### 2. Test your setup - -```bash -ng serve -open http://localhost:4200 -``` - -You should see a message on the page that says *App works!* - -### 3. Install AngularFire and Firebase +### 2. Install AngularFire and Firebase ```bash -npm install @angular/fire firebase --save +ng add @angular/fire@next ``` Now that you have a new project setup, install AngularFire and Firebase from npm. -### 4. Add Firebase config to environments variable +### 3. Add Firebase config to environments variable Open `/src/environments/environment.ts` and add your Firebase configuration. You can find your project configuration in [the Firebase Console](https://console.firebase.google.com). From the project overview page, click **Add Firebase to your web app**. @@ -54,7 +36,7 @@ export const environment = { }; ``` -### 5. Setup @NgModule for the AngularFireModule +### 4. Setup `@NgModule` for the `AngularFireModule` Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration. @@ -76,39 +58,11 @@ import { environment } from '../environments/environment'; export class AppModule {} ``` -#### Custom `FirebaseApp` names - -You can optionally provide a custom FirebaseApp name with `initializeApp`. - -```ts -@NgModule({ - imports: [ - BrowserModule, - AngularFireModule.initializeApp(environment.firebase, 'my-app-name') - ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### 6. Setup individual `@NgModules` +### 5. Setup individual `@NgModule`s After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs. - - `AngularFireAnalytics` - - `AngularFireAuthModule` - - `AngularFireDatabaseModule` - - `AngularFireFunctionsModule` - - `AngularFirestoreModule` - - `AngularFireRemoteConfigModule` - - `AngularFireStorageModule` - - `AngularFireMessagingModule` - - `AngularFirePerformanceModule` - -#### Adding the Firebase Database and Auth Modules - -For example if your application was using both Firebase authentication and the Firebase database you would add: +For example if your application was using both Google Analtyics and the Firestore you would add `AngularFireAnalyticsModule` and `AngularFirestoreModule`: ```ts import { BrowserModule } from '@angular/platform-browser'; @@ -117,18 +71,14 @@ import { AppComponent } from './app.component'; import { AngularFireModule } from '@angular/fire'; import { AngularFireAnalyticsModule } from '@angular/fire/analytics'; import { AngularFirestoreModule } from '@angular/fire/firestore'; -import { AngularFireStorageModule } from '@angular/fire/storage'; -import { AngularFireAuthModule } from '@angular/fire/auth'; import { environment } from '../environments/environment'; @NgModule({ imports: [ BrowserModule, - AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything - AngularFireAnalyticsModule, // dynamically imports firebase/analytics - AngularFirestoreModule, // imports firebase/firestore, only needed for database features - AngularFireAuthModule, // imports firebase/auth, only needed for auth features, - AngularFireStorageModule // imports firebase/storage only needed for storage features + AngularFireModule.initializeApp(environment.firebase) + AngularFireAnalyticsModule + AngularFirestoreModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] @@ -143,6 +93,7 @@ Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to ge ```ts import { Component } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; +import 'firebase/firestore'; @Component({ selector: 'app-root', @@ -150,7 +101,7 @@ import { AngularFirestore } from '@angular/fire/firestore'; styleUrls: ['app.component.css'] }) export class AppComponent { - constructor(db: AngularFirestore) { + constructor(firestore: AngularFirestore) { } } @@ -164,6 +115,7 @@ In `/src/app/app.component.ts`: import { Component } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; +import 'firebase/firestore'; @Component({ selector: 'app-root', @@ -172,8 +124,8 @@ import { Observable } from 'rxjs'; }) export class AppComponent { items: Observable; - constructor(db: AngularFirestore) { - this.items = db.collection('items').valueChanges(); + constructor(firestore: AngularFirestore) { + this.items = firestore.collection('items').valueChanges(); } } ``` @@ -188,14 +140,22 @@ Open `/src/app/app.component.html`: ``` -### 9. Run your app +### 9. Run your app locally ```bash ng serve ``` -Run the serve command and navigate to `localhost:4200` in your browser. +Your Angular app will compile and serve locally, visit it we should see an empty list. -And that's it! If it's totally *borked*, file an issue and let us know. +In another tab [start adding data to an `items` collection in Firestore](https://firebase.corp.google.com/project/_/database/firestore/data). *As we're not authenticating users yet, be sure to start Firestore in **test mode** or allow reading from the `items` collection in Security Rules (`allow read: if true`).* -### [Next Step: Documents in AngularFirestore](firestore/documents.md) +Once you've created a `items` collection and are inserting documents, you should see data streaming into your Angular application. + +### 10. Deploy your app + +Finally, we can deploy the application to Firebase hosting: + +```bash +ng deploy +``` \ No newline at end of file diff --git a/docs/rtdb/lists.md b/docs/rtdb/lists.md index 9699b8b02..25eebcfd2 100644 --- a/docs/rtdb/lists.md +++ b/docs/rtdb/lists.md @@ -18,6 +18,7 @@ Replace your `/src/app/app.component.ts` from previous step to look like below. ```ts import { Component } from '@angular/core'; import { AngularFireDatabase } from '@angular/fire/database'; +import 'firebase/database'; @Component({ selector: 'app-root', @@ -52,6 +53,7 @@ Update `/src/app/app.component.ts` to import `AngularFireList` from `@angular/fi import { Component } from '@angular/core'; import { AngularFireDatabase } from '@angular/fire/database'; import { Observable } from 'rxjs'; +import 'firebase/database'; @Component({ selector: 'app-root', @@ -209,6 +211,7 @@ import { Component } from '@angular/core'; import { AngularFireDatabase, AngularFireList } from '@angular/fire/database'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import 'firebase/database'; @Component({ selector: 'app-root', diff --git a/docs/rtdb/objects.md b/docs/rtdb/objects.md index 2ee979330..09e1d389a 100644 --- a/docs/rtdb/objects.md +++ b/docs/rtdb/objects.md @@ -18,6 +18,7 @@ If you've followed the earlier step "Installation and Setup" your `/src/app/app import { Component } from '@angular/core'; import { AngularFireDatabase } from '@angular/fire/database'; import { Observable } from 'rxjs'; +import 'firebase/database'; @Component({ selector: 'app-root', @@ -50,6 +51,7 @@ Then in your template, you can use the `async` pipe to unwrap the binding. import { Component } from '@angular/core'; import { AngularFireDatabase } from '@angular/fire/database'; import { Observable } from 'rxjs'; +import 'firebase/database'; @Component({ selector: 'app-root', @@ -128,6 +130,7 @@ itemRef.remove(); import { Component } from '@angular/core'; import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database'; import { Observable } from 'rxjs'; +import 'firebase/database'; @Component({ selector: 'app-root', diff --git a/docs/rtdb/querying-lists.md b/docs/rtdb/querying-lists.md index cafabd12e..213a66ddb 100644 --- a/docs/rtdb/querying-lists.md +++ b/docs/rtdb/querying-lists.md @@ -82,6 +82,7 @@ import { Component } from '@angular/core'; import { AngularFireDatabase, AngularFireAction } from '@angular/fire/database'; import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { switchMap } 'rxjs/operators'; +import 'firebase/database'; @Component({ selector: 'app-root', diff --git a/docs/storage/storage.md b/docs/storage/storage.md index 79e583d46..96101394d 100644 --- a/docs/storage/storage.md +++ b/docs/storage/storage.md @@ -13,6 +13,7 @@ import { AppComponent } from './app.component'; import { AngularFireModule } from '@angular/fire'; import { AngularFireStorageModule } from '@angular/fire/storage'; import { environment } from '../environments/environment'; +import 'firebase/storage'; @NgModule({ imports: [ @@ -26,14 +27,14 @@ import { environment } from '../environments/environment'; export class AppModule {} ``` -The `StorageBucket` injection token can be used to customise the storage bucket. +The `BUCKET` injection token can be used to customise the storage bucket. ```ts -import {AngularFireStorageModule, StorageBucket} from '@angular/fire/storage'; +import {AngularFireStorageModule, BUCKET } from '@angular/fire/storage'; @NgModule({ providers: [ - { provide: StorageBucket, useValue: 'my-bucket-name' } + { provide: BUCKET, useValue: 'my-bucket-name' } ], ... }) @@ -47,6 +48,7 @@ Once the `AngularFireStorageModule` is registered you can inject the `AngularFir ```ts import { Component } from '@angular/core'; import { AngularFireStorage } from '@angular/fire/storage'; +import 'firebase/storage'; @Component({ selector: 'app-component', @@ -75,6 +77,7 @@ There are three options for uploading files. ```ts import { Component } from '@angular/core'; import { AngularFireStorage } from '@angular/fire/storage'; +import 'firebase/storage'; @Component({ selector: 'app-root', @@ -98,6 +101,7 @@ export class AppComponent { ```ts import { Component } from '@angular/core'; import { AngularFireStorage } from '@angular/fire/storage'; +import 'firebase/storage'; @Component({ selector: 'app-root', @@ -121,6 +125,7 @@ export class AppComponent { ```ts import { Component } from '@angular/core'; import { AngularFireStorage } from '@angular/fire/storage'; +import 'firebase/storage'; @Component({ selector: 'app-root', diff --git a/docs/version-6-upgrade.md b/docs/version-6-upgrade.md new file mode 100644 index 000000000..175417a5e --- /dev/null +++ b/docs/version-6-upgrade.md @@ -0,0 +1,20 @@ +# Upgrading to AngularFire 6.0 + +Intended to be run with Angular 9; version 6 of AngularFire drops support for Angular version 8 and below, older versions of typescript, Firebase, drops `firebase-node`, `database-deprecated`, and more. + +> **WARNING**: Version 6 is still a Release Candidate and subject to change, [please monitor the changelog for up-to-date information on what we've been up to](../CHANGELOG.md). + +We're aiming to release 6.0 with an upgrade schematic to automate most of the required changes, however as of RC.1 that script is not yet available. + +## Breaking changes: + +* Support for Angular versions less than 9 has been dropped +* Support for Firebase JS SDK versions less than 7.8 has been dropped +* Support for `firebase-tools` less than 7.12 has been dropped +* The `angularfire2` NPM library will no longer be updated +* Dropped `@angular/fire/firebase-node` and `@angular/fire/database-depreciated` +* We make use of Proxy in more modules, you'll need to polyfill if you want to support IE 11 +* We've standardized our DI Token naming conventions across all modules +* `AngularFirestoreModule` no longer imports `firebase/firestore` on it's own to remain side-effect free, you'll need to `import 'firebase/firestore'` before you inject it. A similar changes has been made to `AngularFireStorage` and `AngularFireDatabase` +* `AngularFireAuth` has dropped the `auth` property and instead Promise Proxies the underlying Firebase `auth.Auth` instance; allowing your development expirience to more closely mirror the JS SDK. Similar changes have been made to `AngularFireFunctions`, `AngularFireMessaging`, and `AngularFirePerformance`. +* `AngularFireAuthGuard` and `canActivate` have dropped support for raw pipes, this was never working correctly in AOT \ No newline at end of file diff --git a/src/analytics/analytics.ts b/src/analytics/analytics.ts index f579a8954..9862f32f5 100644 --- a/src/analytics/analytics.ts +++ b/src/analytics/analytics.ts @@ -23,19 +23,18 @@ const DATA_LAYER_NAME = 'dataLayer'; export interface AngularFireAnalytics extends ɵPromiseProxy {}; -const ANALYTICS_INSTANCE_CACHE = Symbol(); -const ANALYTICS_INITIALIZED = Symbol(); +let gtag: (...args: any[]) => void; +let analyticsInitialized: Promise; +const analyticsInstanceCache: {[key:string]: Observable} = {}; @Injectable({ providedIn: 'any' }) export class AngularFireAnalytics { - private gtag: (...args: any[]) => void; - async updateConfig(config: Config) { - await global[ANALYTICS_INITIALIZED]; - this.gtag(GTAG_CONFIG_COMMAND, this.options[ANALYTICS_ID_FIELD], { ...config, update: true }); + await analyticsInitialized; + gtag(GTAG_CONFIG_COMMAND, this.options[ANALYTICS_ID_FIELD], { ...config, update: true }); }; constructor( @@ -50,44 +49,28 @@ export class AngularFireAnalytics { zone: NgZone ) { - const schedulers = new ɵAngularFireSchedulers(zone); - - // Analytics errors if it's not unique from a measurementId standpoint, so we need to cache the instances - if (!global[ANALYTICS_INSTANCE_CACHE]) { - global[ANALYTICS_INSTANCE_CACHE] = {} - }; - - let analyticsInitialized: Promise = global[ANALYTICS_INITIALIZED]; - let analyticsInstanceCache: {[key:string]: Observable} = global[ANALYTICS_INSTANCE_CACHE]; - let analytics = analyticsInstanceCache[options[ANALYTICS_ID_FIELD]]; - - if (isPlatformBrowser(platformId)) { - - window[DATA_LAYER_NAME] = window[DATA_LAYER_NAME] || []; - this.gtag = window[GTAG_FUNCTION_NAME] || function() { window[DATA_LAYER_NAME].push(arguments) } - - if (!analyticsInitialized) { + if (!analyticsInitialized) { + if (isPlatformBrowser(platformId)) { + gtag = window[GTAG_FUNCTION_NAME] || function() { window[DATA_LAYER_NAME].push(arguments) }; + window[DATA_LAYER_NAME] = window[DATA_LAYER_NAME] || []; analyticsInitialized = zone.runOutsideAngular(() => new Promise(resolve => { window[GTAG_FUNCTION_NAME] = (...args: any[]) => { if (args[0] == 'js') { resolve() } - this.gtag(...args); + gtag(...args); } }) ); + } else { + gtag = () => {}; + analyticsInitialized = Promise.resolve(); } - - } else { - - analyticsInitialized = Promise.resolve(); - this.gtag = () => {} - } + let analytics = analyticsInstanceCache[options[ANALYTICS_ID_FIELD]]; if (!analytics) { - analytics = of(undefined).pipe( - observeOn(schedulers.outsideAngular), + observeOn(new ɵAngularFireSchedulers(zone).outsideAngular), switchMap(() => isPlatformBrowser(platformId) ? import('firebase/analytics') : empty()), map(() => ɵfirebaseAppFactory(options, zone, nameOrConfig)), map(app => app.analytics()), @@ -96,9 +79,7 @@ export class AngularFireAnalytics { }), shareReplay({ bufferSize: 1, refCount: false }), ); - analyticsInstanceCache[options[ANALYTICS_ID_FIELD]] = analytics; - } if (providedConfig) { this.updateConfig(providedConfig) } diff --git a/src/core/angularfire2.ts b/src/core/angularfire2.ts index a2a07feb2..70c010d78 100644 --- a/src/core/angularfire2.ts +++ b/src/core/angularfire2.ts @@ -85,8 +85,9 @@ export function ɵkeepUnstableUntilFirstFactory( // Run the subscribe body outside of Angular (e.g. calling Firebase SDK to add a listener to a change event) subscribeOn(schedulers.outsideAngular), // Run operators inside the angular zone (e.g. side effects via tap()) - observeOn(schedulers.insideAngular), - share() + observeOn(schedulers.insideAngular) + // INVESTIGATE https://github.com/angular/angularfire/pull/2315 + // share() ); } } diff --git a/src/storage/storage.ts b/src/storage/storage.ts index 00f9e4b41..373a6f572 100644 --- a/src/storage/storage.ts +++ b/src/storage/storage.ts @@ -35,7 +35,7 @@ export class AngularFireStorage { this.storage = zone.runOutsideAngular(() => { const app = ɵfirebaseAppFactory(options, zone, nameOrConfig); - if (!app.storage) { throw "You must import 'firebase/database' before using AngularFireDatabase" } + if (!app.storage) { throw "You must import 'firebase/storage' before using AngularFireDatabase" } return app.storage(storageBucket || undefined); }); }