@angular/fire 7.6.1 → 16.0.0-canary.e04cd7f

package/docs/install-and-setup.md

@@ -1,114 +0,0 @@
-# AngularFire Quickstart
-
-### 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>
-```
-
-The Angular CLI's `new` command will set up the latest Angular build in a new project structure.
-
-### 2. Install AngularFire and Firebase
-
-```bash
-ng add @angular/fire
-```
-
-Now that you have a new project setup, install AngularFire and Firebase from npm. This will complete the following tasks:
-
-1. Add Firebase config to environments variables
-2. Configure `@NgModule` for the `AngularFireModule`
-
-### 3. Inject `Firestore`
-
-Open `/src/app/app.component.ts`, and make the following changes to :
-
-```ts
-import { Component, inject } from '@angular/core';
-import { Firestore } from '@angular/fire/firestore';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
-})
-export class AppComponent {
-  firestore: Firestore = inject(Firestore);
-
-  constructor() {
-
-  }
-}
-```
-
-### 4. Bind a Firestore collection to a list
-
-In `/src/app/app.component.ts`:
-
-```ts
-import { Component, inject } from '@angular/core';
-import { Firestore, collection, collectionData } from '@angular/fire/firestore';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
-})
-export class AppComponent {
-  firestore: Firestore = inject(Firestore)
-  items$: Observable<any[]>;
-
-  constructor() {
-    const aCollection = collection(this.firestore, 'items')
-    this.items$ = collectionData(aCollection);
-  }
-}
-```
-
-Open `/src/app/app.component.html`:
-
-```html
-<ul>
-  <li class="text" *ngFor="let item of items | async">
-    {{item.name}}
-  </li>
-</ul>
-```
-
-### 5. Run your app locally
-
-```bash
-ng serve
-```
-
-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 find data streaming into your Angular application and being rendered in your browser.
-
-### 6. Deploy your app
-
-Finally, we can deploy the application to Firebase hosting:
-
-```bash
-ng deploy
-```

package/docs/install-angular-cli-windows10.md

@@ -1,82 +0,0 @@
-# Installing Angular CLI on Windows 10
-
-> There had been installation issues of `@angular/cli` on Windows 10 system. Most of the time these errors are related to Python dependencies and node-gyp.
-
-Something as below :
-
-```bash
-execSync@1.0.2 install C:\Users\User\AppData\Roaming\npm\node_modules\angu
-lar-cli\node_modules\angular2-template-loader\node_modules\codecov\node_modules\
-execSync
- node install.js
-
-[execsync v1.0.2] Attempting to compile native extensions.
-{ [Error: spawn node-gyp ENOENT]
-  code: 'ENOENT',
-  errno: 'ENOENT',
-  syscall: 'spawn node-gyp',
-  path: 'node-gyp',
-  spawnargs: [ 'rebuild' ] }
-[execSync v1.0.2]
-    Native code compile failed!!
-    Will try to use win32 extension.
-npm WARN deprecated tough-cookie@2.2.2: ReDoS vulnerability parsing Set-Cookie h
-ttps://nodesecurity.io/advisories/130
-npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher
-to avoid a RegExp DoS issue
-npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher
- to avoid a RegExp DoS issue
-
- node-zopfli@2.0.1 install C:\Users\User\AppData\Roaming\npm\node_modules\a
-ngular-cli\node_modules\compression-webpack-plugin\node_modules\node-zopfli
- node-pre-gyp install --fallback-to-build
-.......................
-```
-
-To resolve this issue, make sure you've upgraded to the latest version of **NPM** and try installing `@angular/cli` again. This seems to have worked on certain scenarios.
-
-If the above doesn't work then the below steps should help. Please ensure all the commands are executed as an **Administrator**.
-
-## Steps:
-
-### 1) Install `node-gyp` from [here](https://github.com/nodejs/node-gyp) using NPM
-
-```bash
-npm install -g node-gyp
-```
-
-### 2) Install Windows build tools from [here](https://github.com/felixrieseberg/windows-build-tools) using NPM
-
-```bash
-npm install --global windows-build-tools
-```
-
-*This will also install Python
-
-### 3) Install Angular CLI
-
-```bash
-npm install -g @angular/cli
-```
-
-This should install `@angular/cli` without errors.
-
-#### Post this installation, follow the installation [guide](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to install AngularFire and everything should work as expected.
-
-
-### Note:
-
-When you start your app using `ng serve` in the console, you might still see the below errors. Despite these errors, the application should work as expected and should be able to talk to Firebase.
-
-```bash
-ERROR in [default] C:\angularFire2Test\node_modules\angularfire2\interfaces.d.ts:12:34
-Cannot find namespace 'firebase'.
-
-ERROR in [default] C:\angularFire2Test\src\typings.d.ts:6:12
-Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'NodeRequire',
-but here has type 'any'.
-
-ERROR in [default] C:\angularFire2Test\src\typings.d.ts:7:12
-Subsequent variable declarations must have the same type.  Variable 'module' must be of type 'NodeModule',
-but here has type 'any'.
-```

package/docs/messaging.md

@@ -1,25 +0,0 @@
-<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

@@ -1,57 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-<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

@@ -1,75 +0,0 @@
-# Deploying your Universal application on Cloud Functions for Firebase
-
-After [setting up your application with Angular Universal as outlined in Getting Started](getting-started.md), you're now ready to build your application for Firebase Hosting & Cloud Functions.
-
-> Cloud Functions for Firebase lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your code is stored in Google's cloud and runs in a managed environment. There's no need to manage and scale your own servers. [Learn more about Cloud Functions for Firebase](https://firebase.google.com/docs/functions/).
-
-If you don't already have the Firebase CLI installed, do so:
-
-```bash
-npm i -g firebase-tools
-firebase login
-```
-
-Then inside your project root, setup your Firebase CLI project:
-
-```bash
-firebase init
-```
-
-Configure whichever features you'd want to manage but make sure to select at least `functions` and `hosting`. Choose Typescript for Cloud Functions and use the default `public` directory for Hosting.
-
-After you're configured, you should now see a `firebase.json` file in your project root. Let's add the following `rewrites` directive to it:
-
-```js
-{
-  // ...
-  "hosting": {
-    // ...
-    "rewrites": [
-      { "source": "**", "function": "universal" }
-    ]
-  }
-}
-```
-
-This will inform Firebase Hosting that it should proxy all requests to Cloud Functions, if a file isn't already present in the hosting directory.
-
-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:functions": "npm run --prefix functions build"
-},
-```
-
-Change the build script in your `functions/package.json` to the following:
-
-```js
-"scripts": {
-    // ... omitted
-    "build": "rm -r ./dist && cp -r ../dist . && tsc",
-}
-```
-
-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);
-});
-```
-
-We 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 it's working go ahead and `firebase deploy`.
-
-### [Next Step: Prerendering your Universal application](prerendering.md)
-
-## Additional Resources
-
-- [Universal Starter Template](https://github.com/angular/universal-starter)
-- [FireShip: Angular Universal SSR with Firebase](https://fireship.io/lessons/angular-universal-firebase/)

package/docs/universal/getting-started.md

@@ -1,153 +0,0 @@
-# Getting started with AngularFire and Universal
-
-Server-side rendering (SSR) is the process of converting a JavaScript app to plain HTML at request-time, allowing search engine crawlers and linkbots to understand page content reliably. 
-
-## 0. Prerequisites
-
-- @angular/cli >= v6.0
-- @angular/fire >= v5.0.0
-
-## 1. Generate the Angular Universal Server Module
-
-First, create a server module with the Angular CLI.
-
-```
-ng generate universal --client-project <your-project>
-```
-
-## 2. Build a Server with ExpressJS
-
-[ExpressJS](https://expressjs.com/) is a lightweight web framework that can serve http requests in Node. First, install the dev dependencies:
-
-```bash
-npm install --save-dev @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader express webpack-cli ts-loader ws xhr2
-```
-
-Create a file called `server.ts` in the root of you project.
-
-```ts
-// These are important and needed before anything else
-import 'zone.js/dist/zone-node';
-import 'reflect-metadata';
-
-import { enableProdMode } from '@angular/core';
-import { ngExpressEngine } from '@nguniversal/express-engine';
-import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
-
-import * as express from 'express';
-import { join } from 'path';
-import { readFileSync } from 'fs';
-
-// Polyfills required for Firebase
-(global as any).WebSocket = require('ws');
-(global as any).XMLHttpRequest = require('xhr2');
-
-// Faster renders in prod mode
-enableProdMode();
-
-// Export our express server
-export const app = express();
-
-const DIST_FOLDER = join(process.cwd(), 'dist');
-const APP_NAME = 'YOUR_PROJECT_NAME'; // TODO: replace me!
-
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(`./dist/${APP_NAME}-server/main`);
-
-// index.html template
-const template = readFileSync(join(DIST_FOLDER, APP_NAME, 'index.html')).toString();
-
-app.engine('html', ngExpressEngine({
-  bootstrap: AppServerModuleNgFactory,
-  providers: [
-    provideModuleMap(LAZY_MODULE_MAP)
-  ]
-}));
-
-app.set('view engine', 'html');
-app.set('views', join(DIST_FOLDER, APP_NAME));
-
-// Serve static files 
-app.get('*.*', express.static(join(DIST_FOLDER, APP_NAME)));
-
-// All regular routes use the Universal engine
-app.get('*', (req, res) => {
-    res.render(join(DIST_FOLDER, APP_NAME, 'index.html'), { req });
-});
-
-// If we're not in the Cloud Functions environment, spin up a Node server
-if (!process.env.FUNCTION_NAME) {
-  const PORT = process.env.PORT || 4000;
-  app.listen(PORT, () => {
-    console.log(`Node server listening on http://localhost:${PORT}`);
-  });
-}
-```
-
-## 3. Add a Webpack Config for the Express Server
-
-Create a new file named `webpack.server.config.js` to bundle the express app from previous step.
-
-
-```js
-const path = require('path');
-const webpack = require('webpack');
-
-const APP_NAME = 'YOUR_PROJECT_NAME'; // TODO: replace me!
-
-module.exports = {
-  entry: {  server: './server.ts' },
-  resolve: { extensions: ['.js', '.ts'] },
-  mode: 'development',
-  target: 'node',
-  externals: [
-    /* Firebase has some troubles being webpacked when in
-       in the Node environment, let's skip it.
-       Note: you may need to exclude other dependencies depending
-       on your project. */
-    /^firebase/
-  ],
-  output: {
-    // Export a UMD of the webpacked server.ts & deps, for
-    // rendering in Cloud Functions
-    path: path.join(__dirname, `dist/${APP_NAME}-webpack`),
-    library: 'app',
-    libraryTarget: 'umd',
-    filename: '[name].js'
-  },
-  module: {
-    rules: [
-      { test: /\.ts$/, loader: 'ts-loader' }
-    ]
-  },
-  plugins: [
-    new webpack.ContextReplacementPlugin(
-      /(.+)?angular(\\|\/)core(.+)?/,
-      path.join(__dirname, 'src'), // location of your src
-      {} // a map of your routes
-    ),
-    new webpack.ContextReplacementPlugin(
-      /(.+)?express(\\|\/)(.+)?/,
-      path.join(__dirname, 'src'),
-      {}
-    )
-  ]
-}
-```
-
-## 4.0 Build Scripts
-
-Update your `package.json` with the following build scripts, replacing `YOUR_PROJECT_NAME` with the name of your project.
-
-```js
-"scripts": {
-  // ... omitted
-  "build": "ng build && npm run build:ssr",
-  "build:ssr": "ng run YOUR_PROJECT_NAME:server && npm run webpack:ssr",
-  "webpack:ssr": "webpack --config webpack.server.config.js",
-  "serve:ssr": "node dist/YOUR_PROJECT_NAME-webpack/server.js"
-},
-```
-
-Test your app locally by running `npm run build && npm run serve:ssr`. 
-
-### [Next Step: Deploying your Universal application on Cloud Functions for Firebase](cloud-functions.md)