@angular/fire 7.5.0 → 7.6.0-canary.60943d6

package/docs/install-and-setup.md

@@ -3,6 +3,21 @@
 ### 1. Create a new project
 
 ```bash
+# Using yarn create
+yarn create @angular <project-name>
+cd <project-name>
+```
+or 
+
+```bash
+# Using npm create
+npm create @angular <project-name>
+cd <project-name>
+```
+
+optionally installing the tooling directly:
+```bash
+# Installing the tooling directly
 npm install -g @angular/cli
 ng new <project-name>
 cd <project-name>
@@ -16,85 +31,18 @@ The Angular CLI's `new` command will set up the latest Angular build in a new pr
 ng add @angular/fire
 ```
 
-Now that you have a new project setup, install AngularFire and Firebase from npm.
-
-### 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). Click the Gear icon next to Project Overview, in the Your Apps section, create a new app and choose the type Web. Give the app a name and copy the config values provided.
-
-```ts
-export const environment = {
-  production: false,
-  firebase: {
-    apiKey: '<your-key>',
-    authDomain: '<your-project-authdomain>',
-    databaseURL: '<your-database-URL>',
-    projectId: '<your-project-id>',
-    storageBucket: '<your-storage-bucket>',
-    messagingSenderId: '<your-messaging-sender-id>',
-    appId: '<your-app-id>',
-    measurementId: '<your-measurement-id>'
-  }
-};
-```
-
-### 4. Setup `@NgModule` for the `AngularFireModule`
-
-Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule } from '@angular/fire/compat';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase)
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
-
-### 5. Setup individual `@NgModule`s
+Now that you have a new project setup, install AngularFire and Firebase from npm. This will complete the following tasks:
 
-After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
+1. Add Firebase config to environments variables
+2. Configure `@NgModule` for the `AngularFireModule`
 
-For example if your application was using both Google Analytics and the Firestore you would add `AngularFireAnalyticsModule` and `AngularFirestoreModule`:
+### 3. Inject `Firestore`
 
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule } from '@angular/fire/compat';
-import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
-import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFireAnalyticsModule,
-    AngularFirestoreModule
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
-
-### 7. Inject `AngularFirestore`
-
-Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
+Open `/src/app/app.component.ts`, and make the following changes to :
 
 ```ts
-import { Component } from '@angular/core';
-import { AngularFirestore } from '@angular/fire/compat/firestore';
+import { Component, inject } from '@angular/core';
+import { Firestore } from '@angular/fire/firestore';
 
 @Component({
   selector: 'app-root',
@@ -102,19 +50,21 @@ import { AngularFirestore } from '@angular/fire/compat/firestore';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  constructor(firestore: AngularFirestore) {
+  firestore: Firestore = inject(Firestore);
+
+  constructor() {
 
   }
 }
 ```
 
-### 8. Bind a Firestore collection to a list
+### 4. Bind a Firestore collection to a list
 
 In `/src/app/app.component.ts`:
 
 ```ts
-import { Component } from '@angular/core';
-import { AngularFirestore } from '@angular/fire/compat/firestore';
+import { Component, inject } from '@angular/core';
+import { Firestore, collection, collectionData } from '@angular/fire/firestore';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -123,9 +73,12 @@ import { Observable } from 'rxjs';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  items: Observable<any[]>;
-  constructor(firestore: AngularFirestore) {
-    this.items = firestore.collection('items').valueChanges();
+  firestore: Firestore = inject(Firestore)
+  items$: Observable<any[]>;
+
+  constructor() {
+    const aCollection = collection(this.firestore, 'items')
+    this.items$ = collectionData(aCollection);
   }
 }
 ```
@@ -134,25 +87,25 @@ Open `/src/app/app.component.html`:
 
 ```html
 <ul>
-  <li class="text" *ngFor="let item of items | async">
+  <li class="text" *ngFor="let item of items$ | async">
     {{item.name}}
   </li>
 </ul>
 ```
 
-### 9. Run your app locally
+### 5. Run your app locally
 
 ```bash
 ng serve
 ```
 
-Your Angular app will compile and serve locally, visit it we should see an empty list.
+Your Angular app will compile and serve locally, visit it we should find an empty list.
 
 In another tab [start adding data to an `items` collection in Firestore](https://firebase.google.com/docs/firestore/manage-data/add-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`).*
 
-Once you've created a `items` collection and are inserting documents, you should see data streaming into your Angular application.
+Once you've created a `items` collection and are inserting documents, you should find data streaming into your Angular application and being rendered in your browser.
 
-### 10. Deploy your app
+### 6. Deploy your app
 
 Finally, we can deploy the application to Firebase hosting:
 

package/docs/install-firebase-tools.md

@@ -0,0 +1,78 @@
+# Firebase Tools Install and Setup
+
+### 1. Install package
+
+```bash
+npm install -g firebase-tools
+```
+
+or with `yarn`
+
+```bash
+yarn global add firebase-tools
+```
+
+You can also choose to install it as a dependency for your project rather than globally
+
+```bash
+npm install --save-dev firebase-tools
+```
+
+or with `yarn`
+
+```bash
+yarn add -D firebase-tools
+```
+
+### 2. Configure Firebase Tools
+
+In your projects root directory run:
+
+```bash
+firebase init
+```
+
+or if your installed it within your project rather than globally
+
+```bash
+npx firebase init
+```
+
+or with `yarn`
+
+```bash
+yarn firebase init
+```
+
+This will ask you to login if you are not logged in already, the process will take you through a browser
+redirect to log you into Firebase.
+
+### 3. Choose what Firebase features
+
+`firebase-tools` displays Firebase features you want to configure.
+
+```bash
+? Which Firebase features do you want to set up for this directory? Press Space 
+to select features, then Enter to confirm your choices. (Press <space> to select
+, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
+ ◯ Realtime Database: Configure a security rules file for Realtime Database and 
+(optionally) provision default instance
+ ◯ Firestore: Configure security rules and indexes files for Firestore
+ ◯ Functions: Configure a Cloud Functions directory and its files
+ ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub 
+Action deploys
+ ◯ Hosting: Set up GitHub Action deploys
+(Move up and down to reveal more choices)
+```
+
+### 4. Connect your repo to a Firebase project
+
+The CLI will then walk you through making sure your repo is configured with a Firebase project.
+
+```bash
+? Please select an option: 
+  ◯ Use an existing project 
+  ◯ Create a new project 
+  ◯ Add Firebase to an existing Google Cloud Platform project 
+  ◯ Don't set up a default project
+  ```

package/docs/messaging.md

@@ -0,0 +1,25 @@
+<img align="right" width="30%" src="images/cloud-messaging-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Cloud Messaging
+</small>
+
+# Cloud Messaging
+
+The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.
+
+[Learn More](https://firebase.google.com/docs/cloud-messaging/)
+
+## Dependency Injection
+
+YADA YADA YADA
+
+## Firebase API
+
+Something something look at the offical docs
+
+## Convenience observables
+
+### Foo
+
+bar baz

package/docs/performance.md

@@ -0,0 +1,57 @@
+<img align="right" width="30%" src="images/performance-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Performance Monitoring
+</small>
+
+# Performance Monitoring
+
+Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your Apple, Android, and web apps.
+
+[Learn More](https://firebase.google.com/docs/perf-mon)
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Performance instance and configuration in the application's `NgModule` (`app.module.ts`):
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { getPerformance, providePerformance} from '@angular/fire/performance';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    providePerformance(() => getPerformance()),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { Performance } from '@angular/fire/performance';
+
+@Component({ ... })
+export class PerformanceComponent {
+  private performance: Performance = inject(Performance);
+  ...
+}
+```
+
+## Firebase API
+
+The [Performance documentation](https://firebase.google.com/docs/reference/js/performance.md#performance_package) is available on the Firebase website.
+
+## Services
+
+Coming soon.
+
+## Convenience observables
+
+Coming soon.

package/docs/remote-config.md

@@ -0,0 +1,53 @@
+<img align="right" width="30%" src="images/remote-config-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Remote Config
+</small>
+
+# Remote Config
+
+Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update.
+
+[Learn More](https://firebase.google.com/docs/remote-config/)
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Performance instance and configuration in the application's `NgModule` (`app.module.ts`):
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { getRemoteConfig, provideRemoteConfig} from '@angular/fire/remote-config';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideRemoteConfig(() => getRemoteConfig()),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { RemoteConfig } from '@angular/fire/remote-config';
+
+@Component({ ... })
+export class RemoteConfigComponent {
+  private remoteConfig: RemoteConfig = inject(RemoteConfig);
+  ...
+}
+```
+
+## Firebase API
+
+The [Remote Config documentation](https://firebase.google.com/docs/reference/js/remote-config) is available on the Firebase website.
+
+## Convenience observables
+
+Coming soon.

package/docs/storage.md

@@ -0,0 +1,90 @@
+<img align="right" width="30%" src="images/storage-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Cloud Storage
+</small>
+
+# Cloud Storage
+
+Cloud Storage allows developers to upload and share user generated content such as images, video and more. Data is stored in Google Cloud Storage. 
+
+[Learn more](https://firebase.google.com/docs/storage)
+
+## Dependency Injection
+
+AngularFire allows you to work with Firebase Storage via Angular's Dependency Injection.
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Firebase Storage instance in the application's `NgModule` (`app.module.ts`):
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { getStorage, provideStorage } from '@angular/fire/storage';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideStorage(() => getStorage()),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { Storage } from '@angular/fire/storage';
+
+@Component({ ... })
+export class StorageComponent {
+  private storage: Storage = inject(Storage);
+  ...
+}
+```
+
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/storage'` to `import { ... } from '@angular/fire/storage'` and follow the offical documentation.
+
+[Getting Started](https://firebase.google.com/docs/storage/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/storage)
+
+## File Upload Example
+
+```ts
+import { Component, inject } from '@angular/core';
+import { Storage, ref, uploadBytesResumable } from '@angular/fire/storage';
+
+@Component({
+    selector: 'app-storage',
+    template: `
+        <h1>Storage</h1>
+        <label for="fileUpload">Choose a File</label>
+        <input id="fileUpload" type="file" #upload>
+        <button (click)="uploadFile(upload)">Upload</button>
+    `,
+})
+export class StorageComponent {
+    private readonly storage: Storage = inject(Storage);
+
+    uploadFile(input: HTMLInputElement) {
+        if (!input.files) return
+
+        const files: FileList = input.files;
+
+        for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            if (file) {
+                const storageRef = ref(this.storage, file.name);
+                uploadBytesResumable(storageRef, file);
+            }
+        }
+    }
+}
+```

package/docs/universal/cloud-functions.md

@@ -40,8 +40,8 @@ Let's go ahead and modify your `package.json` to build for Cloud Functions:
 ```js
 "scripts": {
   // ... omitted
-  "build": "ng build && npm run copy:hosting && npm run build:ssr && npm run build:functions",
-  "copy:hosting": "cp -r ./dist/YOUR_PROJECT_NAME/* ./public && rm ./public/index.html",
+  "build": "ng build && npm run build:ssr && npm run copy:hosting && npm run build:functions",
+  "copy:hosting": "cp -r ./dist/YOUR_PROJECT_NAME/* ./public && rm -f ./public/index.html",
   "build:functions": "npm run --prefix functions build"
 },
 ```
@@ -51,21 +51,42 @@ Change the build script in your `functions/package.json` to the following:
 ```js
 "scripts": {
     // ... omitted
-    "build": "rm -r ./dist && cp -r ../dist . && tsc",
+    "build": "rm -rf ./dist && cp -r ../dist . && tsc",
 }
 ```
 
+You will either need to install the dependencies from the `functions/package.json` or add them to your root `package.json`.
+
 Finally, add the following to your `functions/src/index.ts`:
 
 ```ts
 export const universal = functions.https.onRequest((request, response) => {
-  require(`${process.cwd()}/dist/YOUR_PROJECT_NAME-webpack/server`).app(request, response);
+  require(`${process.cwd()}/dist/YOUR_PROJECT_NAME/server/main`).app()(request, response);
 });
 ```
 
-We you should now be able to run `npm run build` to build your project for Firebase Hosting and Cloud Functions.
+In the `server.ts` file generated by the Angular CLI ensure that the `index.html` is being read from the correct place.
+
+As of writing the Angular CLI generates:
+
+```typescript
+const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
+```
+
+this needs to be changed to:
+
+```typescript
+const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : join(distFolder, 'index.html');
+```
+
+So that the `index.html` is read from the correct `dist` folder.
+
+You should now be able to run `npm run build` to build your project for Firebase Hosting and Cloud Functions.
+
+To test, spin up the emulator with `firebase serve`. Once you've confirmed its working go ahead and `firebase deploy`.
 
-To test, spin up the emulator with `firebase serve`. Once you've confirmed it's working go ahead and `firebase deploy`.
+_Note: Universal will now SSR your application and serve it, depending on how you have your deployment setup some assets may fail to 
+serve because the Cloud Function is at a different route than the `APP_BASE_REF` configured._
 
 ### [Next Step: Prerendering your Universal application](prerendering.md)