Serve static content
You can serve static content with the standard deployment command:
firebase
deploy
Pre-render dynamic content
To prerender dynamic content in Angular, you need to set up Angular SSR.
ng
add
@angular/ssr
See the Angular Prerendering (SSG) guide for more information.
Optional: add a server module
Deploy
When you deploy with firebase deploy
, Firebase builds your browser bundle,
your server bundle, and prerenders the application. These elements are deployed
to Hosting
and Cloud Functions for Firebase
.
Custom deploy
The Firebase
CLI assumes that you have a single application defined in your angular.json
with a production build configuration.
If need to tailor the CLI's assumptions, you can either use the FIREBASE_FRAMEWORKS_BUILD_TARGET
environment variable or add AngularFire
and modify your angular.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, guard
against runtime errors by checking isSupported()
before using the product.
Not all products are supported in all environments
.
Optional: integrate with the Firebase Admin SDK
Admin bundles will fail if they are included in your browser build, so consider providing them in your server module and injecting as an optional dependency:
// your-component.ts
import
type
{
app
}
from
'firebase-admin'
;
import
{
FIREBASE_ADMIN
}
from
'../app.module'
;
@Component
({...})
export
class
YourComponent
{
constructor
(
@Optional
()
@Inject
(
FIREBASE_ADMIN
)
admin
:
app.App
)
{
...
}
}
// app.server.module.ts
import
*
as
admin
from
'firebase-admin'
;
import
{
FIREBASE_ADMIN
}
from
'./app.module'
;
@NgModule
({
…
providers
:
[
…
{
provide
:
FIREBASE_ADMIN
,
useFactory
:
()
=
>
admin
.
apps
[
0
]
||
admin
.
initializeApp
()
}
],
})
export
class
AppServerModule
{}
// app.module.ts
import
type
{
app
}
from
'firebase-admin'
;
export
const
FIREBASE_ADMIN
=
new
InjectionToken<app
.
App
> (
'firebase-admin'
);
Serve fully dynamic content with SSR
Optional: integrate with Firebase Authentication
The web framework-aware Firebase deployment tooling automatically keeps client
and server state in sync using cookies. The Express res.locals
object will
optionally contain an authenticated Firebase App instance ( firebaseApp
) and
the currently signed in user ( currentUser
). This can be injected into your
module via the REQUEST token (exported from @nguniversal/express-engine/tokens).
