With the Firebase framework-aware CLI, you can deploy your Angular applicationto Firebase and serve dynamic content to your users.

Before you begin

Before you get started deploying your app to Firebase,review the following requirements and options:

• Firebase CLI version 12.1.0 or later. Make sure toinstall the CLIusing your preferred method.

• Optional: Billing enabled on your Firebase project(required if you plan to use SSR)

• Optional: AngularFire

Initialize Firebase

To get started, initialize Firebase for your framework project.Use theFirebase CLI for a new project, or modifyfirebase.json for anexisting project.

Initialize a new project

1. In theFirebase CLI, enable the web frameworks preview:

   firebase experiments:enable webframeworks

2. Run the initialization command from the CLI and then follow the prompts:

   firebase init hosting

3. Answer yes to "Do you want to use a web framework? (experimental)"

4. Choose your hosting source directory; this could be an existing Angular app.

5. If prompted, choose Angular.

Initialize an existing project

Change your hosting config infirebase.json to have asource option, ratherthan apublic option. For example:

{"hosting":{"source":"./path-to-your-angular-workspace"}}

Serve static content

After initializing Firebase, you can serve static content with the standarddeployment command:

firebasedeploy

Pre-render dynamic content

To prerender dynamic content in Angular, you need to set up Angular SSR.

ngadd@angular/ssr

See theAngular Prerendering (SSG) guidefor more information.

Optional: add a server module

Deploy

When you deploy withfirebase deploy, Firebase builds your browser bundle,your server bundle, and prerenders the application. These elements are deployedtoHosting andCloud Functions for Firebase.

Custom deploy

TheFirebase CLI assumes that you have a single application defined in yourangular.json with a production build configuration.

If need to tailor the CLI's assumptions, you can either use theFIREBASE_FRAMEWORKS_BUILD_TARGET environment variable or addAngularFire and modify yourangular.json:

{"deploy":{"builder":"@angular/fire:deploy","options":{"version":2,"buildTarget":"OVERRIDE_YOUR_BUILD_TARGET"}}}

Optional: integrate with the Firebase JS SDK

When including Firebase JS SDK methods in both server and client bundles, guardagainst runtime errors by checkingisSupported() before using the product.Not all products aresupported in all environments.

Optional: integrate with the Firebase Admin SDK

Admin bundles will fail if they are included in your browser build, so considerproviding them in your server module and injecting as an optional dependency:

// your-component.tsimporttype{app}from'firebase-admin';import{FIREBASE_ADMIN}from'../app.module';@Component({...})exportclassYourComponent{constructor(@Optional()@Inject(FIREBASE_ADMIN)admin:app.App){...}}// app.server.module.tsimport*asadminfrom'firebase-admin';import{FIREBASE_ADMIN}from'./app.module';@NgModule({…providers:[…{provide:FIREBASE_ADMIN,useFactory:()=>admin.apps[0]||admin.initializeApp()}],})exportclassAppServerModule{}// app.module.tsimporttype{app}from'firebase-admin';exportconstFIREBASE_ADMIN=newInjectionToken<app.App>('firebase-admin');

Serve fully dynamic content with SSR

Optional: integrate with Firebase Authentication

The web framework-aware Firebase deployment tooling automatically keeps clientand server state in sync using cookies. The Expressres.locals object willoptionally contain an authenticated Firebase App instance (firebaseApp) andthe currently signed in user (currentUser). This can be injected into yourmodule via the REQUEST token (exported from @nguniversal/express-engine/tokens).