Skip to content

Latest commit

 

History

History

sample

README.md

AngularFire 22 Sample App

This project was generated using Angular CLI version 22.2.6.

Node.js

Use Node.js 24.15 or later for every command below. The sample declares firebase 13, whose packages require Node.js 24.12 or later, and Angular 22 requires 24.15 on that line. On Node.js 22.22.3 or later the install still works but prints EBADENGINE warnings for the firebase packages.

AngularFire tarball

The sample consumes the library as file:../angular-fire-22.0.0.tgz. Produce that file from the repository root before installing here:

npm ci
npm run build

The root build ends with npm pack ./dist/packages-dist, which writes angular-fire-<version>.tgz next to this folder. When the root package version changes, update the file: path in package.json and the install command below to match.

Then, from this sample/ folder, install the dependencies by naming the tarball explicitly:

npm install ../angular-fire-22.0.0.tgz

A plain npm install is not reliable here. package-lock.json records the integrity hash of the tarball built by whoever committed the lockfile, and a tarball you build yourself can hash differently. With a cold npm cache the install then fails with an EINTEGRITY error. With a warm cache that holds the recorded hash, npm installs the stale cached copy and exits successfully, so you would be testing a library you did not build. Naming the tarball installs the file on disk and rewrites the recorded hash in your local package-lock.json. Leave that lockfile change uncommitted.

Cloud Functions demo

The Functions demo calls a Cloud Function whose source lives in functions/. It is its own small project, so install and build it once before starting the emulators, or the functions emulator will skip it with a warning:

cd functions
npm install
npm run build

Development server

Every demo in the sample talks to the local Firebase emulators, so start the emulator suite and the dev server together:

npm start

This boots the emulators with seeded data and then runs ng serve. Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files. A bare ng serve also works, but the demos will have no backend to talk to.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running the server build

npm run serve:ssr:ng22-test starts the built Express server on port 4000. Angular 22 answers 400 Bad Request to any host it was not told about, and angular.json allows only localhost (security.allowedHosts). A deployment adds its own hostnames there or in the NG_ALLOWED_HOSTS environment variable.

Running unit tests

To execute unit tests with Vitest, use the following command:

ng test

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.