feat(database): support Angular 4.x and AngularFire2 4.x

BREAKING CHANGE: database has moved to the /database directory.

Follow the upgrade guide at: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md

Fixes: #11, #21

Author: adriancarriger

README.md

@@ -16,6 +16,12 @@
 
 [![Example Gif](https://raw.githubusercontent.com/adriancarriger/angularfire2-offline/master/images/example.gif)](https://angularfire2-offline.firebaseapp.com/write-list)
 
+## Legacy Versions
+
+- Upgrading from `2.x` to `4.x` for AngularFire2? Try the [upgrade tutorial](https://github.com/adriancarriger/angularfire2-offline/blob/master/docs/version-4-upgrade.md)
+- To support **`AngularFire2 2.x`** use the [@two branch of this repo](https://github.com/adriancarriger/angularfire2-offline/tree/two) for [install instructions](https://github.com/adriancarriger/angularfire2-offline/tree/two#install) and tutorials ([Angular](https://github.com/adriancarriger/angularfire2-offline/tree/two/examples/angular-cli#angular-cli-offline-tutorial-)/[Ionic](https://github.com/adriancarriger/angularfire2-offline/tree/two/examples/ionic#ionic-offline-tutorial-)).
+- This branch (master) is a wrapper for the latest version of AngularFire2 (4.x)
+
 ## Install
 
 ```bash
@@ -29,10 +35,10 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AngularFireModule } from 'angularfire2';
 import { AngularFireOfflineModule } from 'angularfire2-offline';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
 
 import { AppComponent } from './app.component';
 
-// Must export the config
 export const firebaseConfig = {
   apiKey: '<your-key>',
   authDomain: '<your-project-authdomain>',
@@ -43,6 +49,7 @@ export const firebaseConfig = {
 @NgModule({
   declarations: [AppComponent],
   imports: [
+    AngularFireDatabaseModule,
     AngularFireModule.initializeApp(firebaseConfig),
     AngularFireOfflineModule,
     BrowserModule
@@ -65,7 +72,7 @@ import { Component } from '@angular/core';
 import {
   AfoListObservable,
   AfoObjectObservable,
-  AngularFireOffline } from 'angularfire2-offline';
+  AngularFireOfflineDatabase } from 'angularfire2-offline/database';
 
 @Component({
   selector: 'project-name-app',
@@ -81,9 +88,9 @@ import {
 export class MyApp {
   info: AfoObjectObservable<any>;
   items: AfoListObservable<any[]>;
-  constructor(afo: AngularFireOffline) {
-    this.info = afo.database.object('/info');
-    this.items = afo.database.list('/items');
+  constructor(afoDatabase: AngularFireOfflineDatabase) {
+    this.info = afoDatabase.object('/info');
+    this.items = afoDatabase.list('/items');
   }
 }
 ```
@@ -98,10 +105,10 @@ If writes are made offline followed by a page refresh, the writes will be sent w
 
 ## How it works
 
- - While online, Firebase data is stored locally (as data changes the local store is updated)
- - While offline, local data is served if available, and writes are stored locally
- - On reconnect, app updates with new Firebase data, and writes are sent to Firebase
- - Even while online, local data is used first when available which results in a faster load
+- While online, Firebase data is stored locally (as data changes the local store is updated)
+- While offline, local data is served if available, and writes are stored locally
+- On reconnect, app updates with new Firebase data, and writes are sent to Firebase
+- Even while online, local data is used first when available which results in a faster load
 
 ## Contributing to AngularFire2 Offline
 

config/spec-bundle.js

@@ -43,7 +43,7 @@ testing.TestBed.initTestEnvironment(
  * any file that ends with spec.ts and get its path. By passing in true
  * we say do this recursively
  */
-var testContext = require.context('../tests', true, /\.spec\.ts/);
+var testContext = require.context('../src', true, /\.spec\.ts/);
 
 /*
  * get all the files, for each file, call the context function

docs/version-4-upgrade.md

@@ -0,0 +1,103 @@
+# Upgrading to AngularFire2 4.0
+
+This tutorial will help if you are upgrading an existing AngularFire2 Offline app that is already using AngularFire2 version 2.x.
+
+## Not upgrading?
+
+Checkout a full install tutorial for AngularFire2 Offline:
+
+* [Angular Cli Tutorial 📗](https://github.com/adriancarriger/angularfire2-offline/tree/master/examples/angular-cli#angular-cli-offline-tutorial-)
+* [Ionic Tutorial 📘](https://github.com/adriancarriger/angularfire2-offline/tree/master/examples/ionic#ionic-offline-tutorial-)
+
+## 1. Upgrade @NgModule
+
+Open [`/src/app/app.module.ts`](https://github.com/adriancarriger/angularfire2-offline/blob/master/examples/angular-cli/src/app/app.module.ts) and add `AngularFireDatabaseModule` to your imports:
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AngularFireModule } from 'angularfire2';
+import { AngularFireOfflineModule } from 'angularfire2-offline';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ...OtherComponents
+  ],
+  imports: [
+    AngularFireDatabaseModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireOfflineModule,
+    BrowserModule,
+    ...OtherModules
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+## 2. Upgrade components
+
+### Change your import
+
+Add `/database` to your AngularFire2 Offline import
+
+```ts
+import { AfoObjectObservable, AngularFireOfflineDatabase } from 'angularfire2-offline/database';
+```
+
+Replace calls to `AngularFireOffline.database` with AngularFireOfflineDatabase
+
+#### Before
+
+```ts
+constructor(afo: AngularFireOffline) {
+  afo.database.list('foo');
+}
+```
+
+#### After
+
+```ts
+constructor(afoDatabase: AngularFireOfflineDatabase) {
+  afoDatabase.list('foo');
+}
+```
+
+#### Full Component
+
+```ts
+import { Component } from '@angular/core';
+import {
+  AfoListObservable,
+  AfoObjectObservable,
+  AngularFireOfflineDatabase } from 'angularfire2-offline/database';
+
+@Component({
+  selector: 'project-name-app',
+  template: `
+  <h1>{{ (info | async)?.name }}</h1>
+  <ul>
+    <li *ngFor="let item of items | async">
+      {{ item?.name }}
+    </li>
+  </ul>
+  `
+})
+export class MyApp {
+  info: AfoObjectObservable<any>;
+  items: AfoListObservable<any[]>;
+  constructor(afoDatabase: AngularFireOfflineDatabase) {
+    this.info = afoDatabase.object('/info');
+    this.items = afoDatabase.list('/items');
+  }
+}
+```
+
+## AngularFire2 upgrade guide
+
+Also, checkout the [AngularFire2 upgrade guide](https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md).

examples/angular-cli/.angular-cli.json

@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.31",
     "name": "angular-cli"
   },
   "apps": [
@@ -17,7 +16,8 @@
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
         "styles.scss"
@@ -37,12 +37,13 @@
   },
   "lint": [
     {
-      "files": "src/**/*.ts",
-      "project": "src/tsconfig.json"
+      "project": "src/tsconfig.app.json"
     },
     {
-      "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
     }
   ],
   "test": {
@@ -52,18 +53,6 @@
   },
   "defaults": {
     "styleExt": "scss",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
+    "component": {}
   }
 }

examples/angular-cli/.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 
 # dependencies
 /node_modules
@@ -14,6 +15,7 @@
 .c9/
 *.launch
 .settings/
+*.sublime-workspace
 
 # IDE - VSCode
 .vscode/*
@@ -25,7 +27,7 @@
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage
 /libpeerconnection.log
 npm-debug.log
 testem.log
@@ -35,6 +37,6 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
-#System Files
+# System Files
 .DS_Store
 Thumbs.db