build: switch docs site to application builder

Switches the docs site to use the `application` builder which should be faster than the existing one.

Author: crisbeto

docs/README.md

@@ -43,3 +43,15 @@ Run `pnpm bazel build //docs:build.production` to build the project.
 ## Running unit tests
 
 1. Run `pnpm bazel test //docs/...` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Scenes Development server
+
+1. Run `pnpm bazel run //docs/scenes:build.serve` for a dev server. Navigate to `http://localhost:4200/`.
+
+# Build
+
+Run `pnpm bazel build //docs/scenes:build.production` to build the project.
+
+## Running unit tests
+
+1. Run `pnpm bazel test //docs/scenes/...` to execute the unit tests via [Karma](https://karma-runner.github.io).

docs/angular.json

@@ -14,15 +14,16 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "sourceMap": true,
+            "preserveSymlinks": true,
             "allowedCommonJsDependencies": ["moment", "path-normalize"],
             "outputPath": "dist/material-angular-io",
             "index": "src/index.html",
-            "polyfills": "src/polyfills.ts",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
+            "polyfills": ["zone.js", "@angular/localize/init"],
             "assets": [
               {
                 "glob": "**/*",
@@ -74,9 +75,7 @@
               "includePaths": ["node_modules", "src", "src/styles"]
             },
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "optimization": false,
             "namedChunks": true
           },
@@ -88,14 +87,11 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "commonChunk": false,
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -130,7 +126,6 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
             "karmaConfig": "karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
             "scripts": [],
@@ -205,19 +200,18 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/scenes",
             "index": "scenes/src/index.html",
-            "main": "scenes/src/main.ts",
-            "polyfills": "scenes/src/polyfills.ts",
+            "browser": "scenes/src/main.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "scenes/tsconfig.app.json",
             "assets": ["scenes/src/favicon.ico", "scenes/src/assets"],
             "styles": ["scenes/src/styles.scss"],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
+            "preserveSymlinks": true,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true
@@ -235,8 +229,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -273,7 +265,6 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "scenes/src/test.ts",
-            "polyfills": "scenes/src/polyfills.ts",
             "tsConfig": "scenes/tsconfig.spec.json",
             "karmaConfig": "scenes/karma.conf.js",
             "assets": ["scenes/src/favicon.ico", "scenes/src/assets"],

docs/package.json

@@ -19,9 +19,9 @@
     "publish-prod": "bash ./tools/deploy.sh stable prod",
     "publish-dev": "bash ./tools/deploy.sh",
     "publish-beta": "bash ./tools/deploy.sh stable beta",
-    "test:audit:localhost": "node tools/audit-docs dist/material-angular-io",
+    "test:audit:localhost": "node tools/audit-docs dist/material-angular-io/browser",
     "test:audit:bazel": "node tools/audit-docs $(bazel cquery --output=files //:build.production)",
-    "test:audit:ci": "node tools/audit-docs ../dist/material-angular-io"
+    "test:audit:ci": "node tools/audit-docs ../dist/material-angular-io/browser"
   },
   "engines": {
     "node": "^20.11.1 || >=22.0.0",

docs/scenes/src/polyfills.ts

@@ -8,6 +8,7 @@
 
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
+import 'zone.js';
 import 'zone.js/testing';
 import {getTestBed} from '@angular/core/testing';
 import {BrowserTestingModule, platformBrowserTesting} from '@angular/platform-browser/testing';

docs/scenes/src/test.ts

@@ -4,6 +4,6 @@
     "outDir": "../../out-tsc/app",
     "types": []
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"]
 }

docs/scenes/tsconfig.app.json

@@ -4,6 +4,6 @@
     "outDir": "../../out-tsc/spec",
     "types": ["jasmine", "node"]
   },
-  "files": ["src/test.ts", "src/polyfills.ts"],
+  "files": ["src/test.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

docs/scenes/tsconfig.spec.json

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import * as normalize from 'path-normalize';
+import normalize from 'path-normalize';
 
 /**
  * Normalizes the given path by:

docs/src/app/shared/normalize-path.ts

@@ -21,12 +21,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/example-app",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js", "@angular/localize/init"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/assets"],
@@ -59,9 +59,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

docs/src/assets/stack-blitz/angular.json

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import '@angular/localize/init';
 import {bootstrapApplication} from '@angular/platform-browser';
 import {provideHttpClient} from '@angular/common/http';
 import {provideAnimations} from '@angular/platform-browser/animations';

docs/src/assets/stack-blitz/src/main.ts

@@ -8,6 +8,7 @@
 
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
+import 'zone.js';
 import 'zone.js/testing';
 import {getTestBed} from '@angular/core/testing';
 import {BrowserTestingModule, platformBrowserTesting} from '@angular/platform-browser/testing';

docs/src/polyfills.ts

@@ -26,6 +26,7 @@ const sh = require('shelljs');
 sh.set('-e');
 
 const lightServer = require('light-server');
+const path = require('path');
 
 // Constants
 
@@ -97,7 +98,7 @@ if (!/https?:\/\//.test(urlOrDeployDir)) {
   lightServer({
     port,
     bind,
-    serve: urlOrDeployDir,
+    serve: path.join(urlOrDeployDir, 'browser'),
     quiet: true,
     noReload: true,
     historyindex: '/index.html',

docs/src/test.ts

@@ -4,6 +4,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"]
 }

docs/tools/audit-docs.js

@@ -4,6 +4,7 @@
     "baseUrl": "./",
     "outDir": "../dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,

docs/tsconfig.app.json

@@ -4,6 +4,6 @@
     "outDir": "./out-tsc/spec",
     "types": ["jasmine", "node"]
   },
-  "files": ["src/test.ts", "src/polyfills.ts"],
+  "files": ["src/test.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

docs/tsconfig.json

@@ -55,6 +55,5 @@ export async function buildDocsSite() {
   await $`pnpm bazel build --config=snapshot-build //docs:build.production`;
   await $`rm -Rf docs/dist`;
   await $`mkdir -p docs/dist`;
-  await $`cp -R dist/bin/docs/material-angular-io.production docs/dist`;
-  await $`chmod -R u+w docs/dist/material-angular-io.production`;
+  await $`cp -R dist/bin/docs/dist/browser docs/dist`;
 }