feat: various improvements

angular.json

@@ -80,7 +80,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

e2e/example.spec.ts

@@ -4,5 +4,5 @@ test("has title", async ({ page }) => {
   await page.goto("/");
 
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/StarterAngular19/);
+  await expect(page).toHaveTitle(/home/i);
 });

src/app/app.component.spec.ts

@@ -1,5 +1,5 @@
+import { AppComponent } from "@/app/app.component";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { AppComponent } from "./app.component";
 
 describe("AppComponent", () => {
   let component: AppComponent;

src/app/app.config.server.ts

@@ -1,6 +1,6 @@
+import { appConfig } from "@/app/app.config";
 import { ApplicationConfig, mergeApplicationConfig } from "@angular/core";
 import { provideServerRendering } from "@angular/platform-server";
-import { appConfig } from "./app.config";
 
 const serverConfig: ApplicationConfig = {
   providers: [provideServerRendering()],

src/app/app.config.ts

@@ -1,16 +1,24 @@
-import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
+import { routes } from "@/app/app.routes";
+import { GlobalErrorHandler } from "@/app/global-error-handler";
+import {
+  ApplicationConfig,
+  ErrorHandler,
+  provideZoneChangeDetection,
+} from "@angular/core";
 import {
   provideClientHydration,
   withEventReplay,
 } from "@angular/platform-browser";
 import { provideRouter } from "@angular/router";
 
-import { routes } from "./app.routes";
-
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideClientHydration(withEventReplay()),
+    {
+      provide: ErrorHandler,
+      useClass: GlobalErrorHandler,
+    },
   ],
 };

src/app/app.routes.ts

@@ -1,15 +1,19 @@
 import { Routes } from "@angular/router";
-import { HomePageComponent } from "./pages/home-page/home-page.component";
-import { NotFoundPageComponent } from "./pages/not-found-page/not-found-page.component";
 
 export const routes: Routes = [
   {
     path: "",
     pathMatch: "full",
-    component: HomePageComponent,
+    loadComponent: async () =>
+      (await import("@/app/pages/home-page/home-page.component"))
+        .HomePageComponent,
+    title: "Home",
   },
   {
     path: "**",
-    component: NotFoundPageComponent,
+    loadComponent: async () =>
+      (await import("@/app/pages/not-found-page/not-found-page.component"))
+        .NotFoundPageComponent,
+    title: "Not Found",
   },
 ];

src/app/global-error-handler.ts

@@ -0,0 +1,11 @@
+import { ErrorHandler } from "@angular/core";
+
+/**
+ * Handle uncaught client-side errors.
+ */
+export class GlobalErrorHandler implements ErrorHandler {
+  handleError(e: unknown): void {
+    console.error(e);
+    alert("An unknown error has occurred. Please try again later.");
+  }
+}

src/app/pages/home-page/home-page.component.html

@@ -1 +1 @@
-<p>home-page works!</p>
+<p>Deployment successful!</p>

src/environments/angular-environment.ts

@@ -0,0 +1,3 @@
+export type AngularEnvironment = {
+  name: "development" | "production";
+};

src/environments/environment.development.ts

@@ -0,0 +1,5 @@
+import { AngularEnvironment } from "@/environments/angular-environment";
+
+export const environment: AngularEnvironment = {
+  name: "development",
+};

src/environments/environment.ts

@@ -0,0 +1,5 @@
+import { AngularEnvironment } from "@/environments/angular-environment";
+
+export const environment: AngularEnvironment = {
+  name: "production",
+};

src/main.server.ts

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

src/main.ts

@@ -1,6 +1,6 @@
+import { AppComponent } from "@/app/app.component";
+import { appConfig } from "@/app/app.config";
 import { bootstrapApplication } from "@angular/platform-browser";
-import { AppComponent } from "./app/app.component";
-import { appConfig } from "./app/app.config";
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>
   console.error(err),

src/server.ts

@@ -1,9 +1,9 @@
+import bootstrap from "@/main.server";
 import { APP_BASE_HREF } from "@angular/common";
 import { CommonEngine, isMainModule } from "@angular/ssr/node";
 import express from "express";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import bootstrap from "./main.server";
 
 const serverDistFolder = dirname(fileURLToPath(import.meta.url));
 const browserDistFolder = resolve(serverDistFolder, "../browser");

tsconfig.json

@@ -16,7 +16,11 @@
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022"
+    "module": "ES2022",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,