Skip to content

Docs and fixes for 6.0 #2316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Feb 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 50 additions & 13 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
<a name="6.0.0-rc.1"></a>
# [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

<a name="6.0.0-rc.0"></a>
# [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.

Expand All @@ -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`

Expand All @@ -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`

Expand All @@ -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`

<a name="5.4.2"></a>
## [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))


<a name="5.4.1"></a>
## [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))

<a name="5.4.0"></a>
# [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))


<a name="5.3.1"></a>
# [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))

<a name="5.3.0"></a>
# [5.3.0](https://github.com/angular/angularfire2/compare/5.2.3...5.3.0) (2020-01-07)

Expand Down
6 changes: 4 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,10 @@ and help you to craft the change so that it is successfully accepted into the pr

```shell
$ git clone <your fork SSH/HTTPS from GitHub>
$ yarn install
$ yarn test
$ cd angularfire
$ yarn
$ yarn build
$ yarn test:all
```

3) Make your changes in a new git branch:
Expand Down
44 changes: 20 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<p align="center">
<h1 align="center">AngularFire</h1>
<p align="center">The official library for Firebase and Angular</p>
</p>
# 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
```

---

Expand All @@ -22,29 +22,19 @@
- **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:

```ts
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import 'firebase/firestore';

@Component({
selector: 'app-root',
Expand All @@ -58,17 +48,23 @@ import { Observable } from 'rxjs';
})
export class MyApp {
items: Observable<any[]>;
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

Expand Down
10 changes: 5 additions & 5 deletions docs/auth/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

`AngularFireAuth.user` provides you an `Observable<User|null>` 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)

Expand All @@ -16,7 +16,7 @@ import { auth } from 'firebase/app';
@Component({
selector: 'app-root',
template: `
<div *ngIf="afAuth.user | async as user; else showLogin">
<div *ngIf="auth.user | async as user; else showLogin">
<h1>Hello {{ user.displayName }}!</h1>
<button (click)="logout()">Logout</button>
</div>
Expand All @@ -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();
}
}
```
Expand Down
4 changes: 2 additions & 2 deletions docs/auth/router-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand Down
6 changes: 6 additions & 0 deletions docs/firestore/collections.md
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand Down Expand Up @@ -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; }

Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions docs/firestore/documents.md
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand Down
1 change: 1 addition & 0 deletions docs/firestore/querying-collections.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 7 additions & 7 deletions docs/functions/functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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 {}
Expand All @@ -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: [
Expand All @@ -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 {}
Expand Down Expand Up @@ -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 {}
Expand Down
Loading