Skip to content

Commit

Permalink
Docs and fixes for 6.0 (#2316)
Browse files Browse the repository at this point in the history
* Brought a fix in from `5.4.2` ([#2315](#2315))
* Fixed `@angular/fire/analytics` attempting to use `global` ([#2303](#2303))
* Fix the error message on storage ([#2313](#2313))
* Starting on documentation for 6.0
  • Loading branch information
jamesdaniels committed Feb 6, 2020
1 parent 014911b commit 504303b
Show file tree
Hide file tree
Showing 18 changed files with 178 additions and 161 deletions.
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

0 comments on commit 504303b

Please sign in to comment.