feat: implement experimental builders for build (browser) and `serv…

…er` (dev-browser) targets

.gitignore

@@ -60,10 +60,6 @@ typings/
 # next.js build output
 .next
 
-# TypeScript
-*/**/*.js
-*.d.ts
-
 # Angular
 .angular
 

.prettierignore

@@ -1,2 +1,3 @@
+.angular
 coverage
 dist

README.md

@@ -1,10 +1,5 @@
 # angular-server-side-configuration
 
-![](https://img.shields.io/azure-devops/build/kyubisation/894749fe-3edd-41f8-818f-ba14e6a3cc22/2/master.svg)
-![](https://img.shields.io/azure-devops/coverage/kyubisation/angular-server-side-configuration/2/master.svg)
-![](https://img.shields.io/npm/v/angular-server-side-configuration.svg)
-![](https://img.shields.io/npm/l/angular-server-side-configuration.svg)
-
 Configure an angular application at runtime on the server or in a docker container via environment variables.
 
 ## Motivation
@@ -21,6 +16,10 @@ environment variables into index.html file(s) into the head tag or by replacing
 (Missing environment variables will be represented by `null`). This should be done
 on the host serving the bundled angular files.
 
+Starting with version 13, there are experimental builders for the `build` and `serve` commands.
+To install the experimental builders run `ng add angular-server-side-configuration` and answer
+`Would you like to use the experimental builders for build and serve?` with `y(es)`.
+
 ## Getting Started
 
 ```

angular.json

@@ -25,8 +25,13 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -77,14 +82,134 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ngssc-app:build"
+            "browserTarget": "ngssc-app:build",
+            "format": "json",
+            "outputPath": "src/locales"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
+        },
+        "ngsscbuild": {
+          "builder": "./dist/angular-server-side-configuration:ngsscbuild",
+          "options": {
+            "additionalEnvironmentVariables": [
+              "MANUAL_VALUE"
+            ],
+            "browserTarget": "ngssc-app:build",
+            "ngsscEnvironmentFile": "src/environments/environment.prod.ts"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ngssc-app:build:production"
+            }
+          }
+        }
+      }
+    },
+    "ngssc-builders-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "i18n": {
+        "locales": {
+          "de-CH": "src/locales/messages.de-CH.json"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "./dist/angular-server-side-configuration:browser",
+          "options": {
+            "outputPath": "dist/ngssc-builders-app",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "localize": false,
+            "ngsscEnvironmentFile": "src/environments/environment.prod.ts",
+            "additionalEnvironmentVariables": ["MANUAL_KEY"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "i18n": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all",
+              "localize": true
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.ngssc.ts"
+                }
+              ],
+              "ngsscEnvironmentFile": "src/environments/environment.ngssc.ts"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "./dist/angular-server-side-configuration:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "ngssc-builders-app:build:production"
+            },
+            "development": {
+              "browserTarget": "ngssc-builders-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
         }
       }
     },
@@ -122,4 +247,4 @@
     }
   },
   "defaultProject": "angular-server-side-configuration"
-}
+}

package.json

@@ -7,11 +7,16 @@
     "build:cli": "docker-compose run build-go",
     "build:cli:upx": "docker-compose run -e BUILD_UPX=true build-go",
     "build:ngssc": "ng run ngssc-app:ngsscbuild:production",
+    "build:demo": "ng build ngssc-builders-app",
+    "build:demo-i18n": "ng build ngssc-builders-app -c i18n",
     "build": "run-s build:*",
     "format": "prettier --write **/*.{js,ts,css,scss,json,md,html}",
     "test:lib": "jest --config jest.config.ts",
     "test:cli": "cd cli && go test",
     "test": "run-s test:*",
+    "serve:demo": "cross-env VARIABLE=demo ng serve ngssc-builders-app",
+    "prepack:lib": "yarn -s build:lib",
+    "pack:lib": "cd dist/angular-server-side-configuration && yarn pack",
     "lint": "ng lint",
     "release": "standard-version"
   },
@@ -60,12 +65,14 @@
     "@angular-eslint/template-parser": "13.0.0-alpha.0",
     "@angular/cli": "~13.0.1",
     "@angular/compiler-cli": "~13.0.0",
+    "@angular/localize": "13.0.0",
     "@schematics/angular": "~13.0.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^14.14.0",
     "@types/rimraf": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "5.3.0",
     "@typescript-eslint/parser": "5.3.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.1.0",
     "eslint-plugin-import": "^2.25.2",
     "jest": "^27.3.1",
@@ -103,4 +110,4 @@
       }
     ]
   }
-}
+}

projects/angular-server-side-configuration/builders/browser/index.ts

@@ -0,0 +1,48 @@
+import { BuilderContext, createBuilder } from '@angular-devkit/architect';
+import {
+  BrowserBuilderOptions,
+  BrowserBuilderOutput,
+  executeBrowserBuilder,
+  ExecutionTransformer,
+} from '@angular-devkit/build-angular';
+import { IndexHtmlTransform } from '@angular-devkit/build-angular/src/utils/index-file/index-html-generator';
+import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
+import { json } from '@angular-devkit/core';
+import webpack from 'webpack';
+import { Observable, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+import { detectVariablesAndBuildNgsscJson, NgsscBuildSchema } from '../ngsscbuild/index';
+
+export type NgsscBrowserBuilderOptions = BrowserBuilderOptions & NgsscBuildSchema;
+
+/**
+ * Experimental wrapper of the @angular-devkit/build-angular:browser builder for ngssc.
+ */
+export function ngsscBuildWebpackBrowser(
+  options: NgsscBrowserBuilderOptions,
+  context: BuilderContext,
+  transforms: {
+    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
+    logging?: WebpackLoggingCallback;
+    indexHtml?: IndexHtmlTransform;
+  } = {}
+): Observable<BrowserBuilderOutput> {
+  return executeBrowserBuilder(options, context, transforms).pipe(
+    switchMap(async (result) => {
+      if (result.success) {
+        await detectVariablesAndBuildNgsscJson(
+          options,
+          options,
+          context,
+          result.outputPaths.length > 1
+        );
+      }
+      return result;
+    })
+  );
+}
+
+export default createBuilder<json.JsonObject & NgsscBrowserBuilderOptions>(
+  ngsscBuildWebpackBrowser
+);