build: add a dev-app

mmalerba · web-flow · commit 25e13e9f96f5 · 2025-11-06T09:05:32.000-08:00
Adds a dev app that can be used to prototype and debug things while
developing Angular. Use `pnpm dev` to run it.
diff --git a/.bazelignore b/.bazelignore
@@ -45,6 +45,7 @@ vscode-ng-language-service/integration/project/dist/
 adev/node_modules
 adev/shared-docs/node_modules
 adev/shared-docs/pipeline/api-gen/node_modules
+dev-app/node_modules
 modules/node_modules
 integration/node_modules
 packages/animations/node_modules
diff --git a/dev-app/BUILD.bazel b/dev-app/BUILD.bazel
@@ -0,0 +1,77 @@
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@rules_angular//src/architect:ng_application.bzl", "ng_application")
+load("@rules_angular//src/architect:ng_config.bzl", "ng_config")
+load("@rules_angular//src/architect:ng_test.bzl", "ng_test")
+
+package(default_visibility = ["//visibility:public"])
+
+npm_link_all_packages(
+    name = "node_modules",
+)
+
+APPLICATION_FILES = [
+    "//dev-app/public",
+] + glob(
+    ["src/**/*"],
+    exclude = ["src/**/*.spec.ts"],
+)
+
+APPLICATION_DEPS = [
+    ":node_modules/typescript",
+]
+
+TEST_FILES = APPLICATION_FILES + glob(["src/app/**/*.spec.ts"])
+
+TEST_DEPS = APPLICATION_DEPS + [
+    ":node_modules/jsdom",
+    ":node_modules/vitest",
+    ":tsconfig.app.json",
+]
+
+ng_config(name = "ng_config")
+
+ng_application(
+    name = "build",
+    srcs = APPLICATION_FILES + APPLICATION_DEPS,
+    args = [
+        "--configuration",
+        "development",
+    ],
+    env = {
+        "NG_BUILD_PARTIAL_SSR": "1",
+    },
+    ng_config = ":ng_config",
+    node_modules = ":node_modules",
+    project_name = "dev-app",
+    tags = [
+        # Tagged as manual as both build and build.production use the same output directory.
+        "manual",
+    ],
+)
+
+ng_application(
+    name = "build.production",
+    srcs = APPLICATION_FILES + APPLICATION_DEPS,
+    args = [
+        "--configuration",
+        "production",
+    ],
+    env = {
+        "NG_BUILD_OPTIMIZE_CHUNKS": "1",
+    },
+    ng_config = ":ng_config",
+    node_modules = ":node_modules",
+    project_name = "dev-app",
+    tags = [
+        # Tagged as manual as both build and build.production use the same output directory.
+        "manual",
+    ],
+)
+
+ng_test(
+    name = "test",
+    srcs = TEST_FILES + TEST_DEPS,
+    ng_config = ":ng_config",
+    node_modules = ":node_modules",
+    project_name = "dev-app",
+)
diff --git a/dev-app/README.md b/dev-app/README.md
@@ -0,0 +1,36 @@
+# Angular dev-app
+
+For experimentation while developing Angular.
+
+## Local Development
+
+For local development, [pnpm](https://pnpm.io/) is the preferred package manager. You can set up a local environment with the following commands:
+
+```bash
+# Clone Angular repo
+git clone https://github.com/angular/angular.git
+
+# Navigate to project directory
+cd angular
+
+# Install dependencies
+pnpm install
+
+# Build and run local dev server
+# NOTE: Initial build will take some time
+pnpm dev
+```
+
+## FAQs
+
+### The build is failing and I'm seeing `bazel:bazel failed: missing input file` messages.
+
+This is most likely due to a bazel dependency / caching issue. To resolve this, run the following command:
+
+```
+# Try this first
+pnpm bazel clean
+
+# If that doesn't work, try it with the expunge flag
+pnpm bazel clean --expunge
+```
diff --git a/dev-app/angular.json b/dev-app/angular.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "pnpm",
+    "analytics": "dca119a9-da31-47f7-a6cb-b60541037021"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "dev-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "externalDependencies": ["xhr2"],
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "server": "src/main.server.ts",
+            "outputMode": "static"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "dev-app:build:production"
+            },
+            "development": {
+              "buildTarget": "dev-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}
diff --git a/dev-app/package.json b/dev-app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "dev-app",
+  "private": true,
+  "scripts": {
+    "dev": "ibazel run //dev-app:build.serve",
+    "dev:build": "bazel build //dev-app:build"
+  },
+  "dependencies": {
+    "@angular/common": "workspace:*",
+    "@angular/compiler": "workspace:*",
+    "@angular/core": "workspace:*",
+    "@angular/forms": "workspace:*",
+    "@angular/platform-browser": "workspace:*",
+    "@angular/platform-server": "workspace:*",
+    "@angular/router": "workspace:*",
+    "@angular/ssr": "21.0.0-rc.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "21.0.0-rc.0",
+    "@angular/cli": "21.0.0-rc.0",
+    "@angular/compiler-cli": "workspace:*",
+    "@types/jasmine": "5.1.12",
+    "@types/node": "^20.17.19",
+    "jasmine-core": "5.12.0",
+    "jsdom": "^27.0.0",
+    "karma": "~6.4.4",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage": "2.2.1",
+    "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.0",
+    "zone.js": "0.15.1"
+  }
+}
diff --git a/dev-app/public/BUILD.bazel b/dev-app/public/BUILD.bazel
@@ -0,0 +1,13 @@
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
+
+exports_files(
+    glob(["*"]),
+)
+
+copy_to_bin(
+    name = "public",
+    srcs = glob(["*"]),
+    visibility = [
+        "//visibility:public",
+    ],
+)
diff --git a/dev-app/public/favicon.ico b/dev-app/public/favicon.ico
diff --git a/dev-app/src/app/app.config.server.ts b/dev-app/src/app/app.config.server.ts
@@ -0,0 +1,10 @@
+import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {appConfig} from './app.config';
+import {serverRoutes} from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/dev-app/src/app/app.config.ts b/dev-app/src/app/app.config.ts
@@ -0,0 +1,15 @@
+import {ApplicationConfig, provideBrowserGlobalErrorListeners} from '@angular/core';
+import {provideRouter} from '@angular/router';
+
+import {routes} from './app.routes';
+import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
+import {provideHttpClient, withFetch} from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideHttpClient(withFetch()),
+    provideClientHydration(withEventReplay()),
+  ],
+};
diff --git a/dev-app/src/app/app.css b/dev-app/src/app/app.css
diff --git a/dev-app/src/app/app.html b/dev-app/src/app/app.html
@@ -0,0 +1,3 @@
+<h1>Welcome to the dev app!</h1>
+
+<router-outlet />
diff --git a/dev-app/src/app/app.routes.server.ts b/dev-app/src/app/app.routes.server.ts
@@ -0,0 +1,8 @@
+import {RenderMode, ServerRoute} from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender,
+  },
+];
diff --git a/dev-app/src/app/app.routes.ts b/dev-app/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import {Routes} from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/dev-app/src/app/app.spec.ts b/dev-app/src/app/app.spec.ts
@@ -0,0 +1,23 @@
+import {TestBed} from '@angular/core/testing';
+import {App} from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toBe('Welcome to the dev app!');
+  });
+});
diff --git a/dev-app/src/app/app.ts b/dev-app/src/app/app.ts
@@ -0,0 +1,12 @@
+import {Component, signal} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+})
+export class App {
+  protected readonly title = signal('dev-app');
+}
diff --git a/dev-app/src/index.html b/dev-app/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DevApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/dev-app/src/main.server.ts b/dev-app/src/main.server.ts
@@ -0,0 +1,7 @@
+import {BootstrapContext, bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {config} from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
+
+export default bootstrap;
diff --git a/dev-app/src/main.ts b/dev-app/src/main.ts
@@ -0,0 +1,5 @@
+import {bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {appConfig} from './app/app.config';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));
diff --git a/dev-app/src/styles.css b/dev-app/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/dev-app/tsconfig.app.json b/dev-app/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}
diff --git a/dev-app/tsconfig.json b/dev-app/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "paths": {
+      "@angular/*": ["../packages/*/index"]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/dev-app/tsconfig.spec.json b/dev-app/tsconfig.spec.json
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
