feat(angular): upgraded to SSR/hybrid. Routes added for ssr, ssg and csr

Author: dackers86

examples/angular/angular.json

@@ -26,7 +26,7 @@
             "styles": ["src/styles.css"],
             "scripts": [],
             "server": "src/main.server.ts",
-            "prerender": true,
+            "prerender": false,
             "ssr": {
               "entry": "src/server.ts"
             }
@@ -36,8 +36,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1MB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",

examples/angular/package.json

@@ -18,17 +18,17 @@
     "format:check": "prettier --check \"src/**/*.{ts,html,css,scss}\""
   },
   "dependencies": {
-    "@angular/animations": "^19.1.0",
-    "@angular/common": "^19.1.0",
-    "@angular/compiler": "^19.1.0",
-    "@angular/core": "^19.1.0",
-    "@angular/fire": "^19.0.0",
-    "@angular/forms": "^19.1.0",
-    "@angular/platform-browser": "^19.1.0",
-    "@angular/platform-browser-dynamic": "^19.1.0",
-    "@angular/platform-server": "^19.1.0",
-    "@angular/router": "^19.1.0",
-    "@angular/ssr": "^19.1.7",
+    "@angular/animations": "^20.2.2",
+    "@angular/common": "^20.2.2",
+    "@angular/compiler": "^20.2.2",
+    "@angular/core": "^20.2.2",
+    "@angular/fire": "^20.0.1",
+    "@angular/forms": "^20.2.2",
+    "@angular/platform-browser": "^20.2.2",
+    "@angular/platform-browser-dynamic": "^20.2.2",
+    "@angular/platform-server": "^20.2.2",
+    "@angular/router": "^20.2.2",
+    "@angular/ssr": "^20.2.2",
     "@firebase-ui/angular": "workspace:*",
     "@firebase-ui/core": "workspace:*",
     "@firebase-ui/styles": "workspace:*",
@@ -42,9 +42,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.1.7",
-    "@angular/cli": "^19.1.7",
-    "@angular/compiler-cli": "^19.1.0",
+    "@angular-devkit/build-angular": "^20.2.2",
+    "@angular/cli": "^20.2.2",
+    "@angular/compiler-cli": "^20.2.2",
     "@eslint/js": "^9.22.0",
     "@tanstack/angular-form": "^0.42.0",
     "@types/express": "^4.17.17",
@@ -60,8 +60,8 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "nanostores": "^0.11.3",
-    "ng-packagr": "^19.1.0",
+    "ng-packagr": "^20.2.0",
     "prettier": "^3.1.1",
-    "typescript": "~5.7.2"
+    "typescript": "~5.9.2"
   }
 }

examples/angular/src/app/app.config.server.ts

@@ -15,11 +15,12 @@
  */
 
 import { mergeApplicationConfig, ApplicationConfig } from "@angular/core";
-import { provideServerRendering } from "@angular/platform-server";
+import { provideServerRendering, withRoutes } from "@angular/ssr";
+import { serverRoutes } from "./app.routes.server";
 import { appConfig } from "./app.config";
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering()],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

examples/angular/src/app/app.routes.server.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { RenderMode, ServerRoute } from "@angular/ssr";
+
+export const serverRoutes: ServerRoute[] = [
+  /** Home page - perfect for SSG as it's a static landing page */
+  {
+    path: "",
+    renderMode: RenderMode.Prerender,
+  },
+  /** Key auth screen demos - good for SSG as they showcase Firebase UI components */
+  {
+    path: "screens/sign-in-auth-screen",
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: "screens/oauth-screen",
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: "screens/sign-up-auth-screen",
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: "screens/email-link-auth-screen",
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: "screens/phone-auth-screen",
+    renderMode: RenderMode.Prerender,
+  },
+  /** Interactive auth routes - better as CSR for user interaction */
+  {
+    path: "sign-in",
+    renderMode: RenderMode.Client,
+  },
+  {
+    path: "register",
+    renderMode: RenderMode.Client,
+  },
+  {
+    path: "forgot-password",
+    renderMode: RenderMode.Client,
+  },
+  /** All other routes will be rendered on the server (SSR) */
+  {
+    path: "**",
+    renderMode: RenderMode.Server,
+  },
+];

examples/angular/src/main.server.ts

@@ -18,6 +18,6 @@ import { bootstrapApplication } from "@angular/platform-browser";
 import { AppComponent } from "./app/app.component";
 import { config } from "./app/app.config.server";
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: any) => bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;

packages/angular/ng-package.json

@@ -8,6 +8,7 @@
     "@firebase-ui/core",
     "@firebase-ui/styles",
     "@tanstack/angular-form",
+    "firebase",
     "nanostores",
     "tslib",
     "zod"

packages/angular/package.json

@@ -14,6 +14,7 @@
     }
   },
   "scripts": {
+    "prepare": "pnpm run build",
     "build": "ng-packagr -p ng-package.json",
     "test": "ng test --watch=false --browsers=ChromeHeadless --project=firebase-ui-angular",
     "test:watch": "ng test --watch=true --project=firebase-ui-angular",