root: upgraded angular to use SSG and SSR + PWA capabilities

The existing Angular workspace is severely outdated and confusing. Since Angular 17 released SSG, SSR, and PWA, we should implement them. Hence, let's do this. This patch upgrades angular to use SSG and SSR + PWA capabilities in root repository. Co-authored-by: Shuralyov, Jean <[email protected]> Co-authored-by: Galyna, Cory <[email protected]> Co-authored-by: (Holloway) Chew, Kean Ho <[email protected]> Signed-off-by: (Holloway) Chew, Kean Ho <[email protected]>
ChewKeanHo · Oct 27, 2024 · e42bf6d · e42bf6d
1 parent 6287871
commit e42bf6d
Show file tree

Hide file tree

Showing 84 changed files with 1,078 additions and 269 deletions.
diff --git a/srcANGULAR/.ci/build_unix-any.sh → Angular/.ci/build_unix-any.sh b/srcANGULAR/.ci/build_unix-any.sh → Angular/.ci/build_unix-any.sh
@@ -33,6 +33,7 @@ ${PROJECT_SKU}-docs_any-any
 "
 
 
+FS_Remake_Directory "${PROJECT_PATH_ROOT}/${PROJECT_PATH_BUILD}"
 
 
 I18N_Activate_Environment
@@ -56,6 +57,19 @@ fi
 
 
 
+___source="${PROJECT_PATH_ROOT}/${PROJECT_ANGULAR}/dist/browser"
+___dest="${PROJECT_PATH_ROOT}/${PROJECT_PATH_DOCS}"
+I18N_Export "$___dest"
+FS_Make_Directory "$___dest"
+FS_Copy_All "${___source}/" "$___dest"
+if [ $? -ne 0 ]; then
+        I18N_Export_Failed
+        return 1
+fi
+
+
+
+
 # placeholding flag files
 old_IFS="$IFS"
 while IFS="" read -r __line || [ -n "$__line" ]; do

diff --git a/srcANGULAR/.ci/build_windows-any.ps1 → Angular/.ci/build_windows-any.ps1 b/srcANGULAR/.ci/build_windows-any.ps1 → Angular/.ci/build_windows-any.ps1
@@ -32,6 +32,7 @@ $__placeholders = @(
 )
 
 
+$null = FS-Remake-Directory "${env:PROJECT_PATH_ROOT}\${env:PROJECT_PATH_BUILD}"
 
 
 $null = I18N-Activate-Environment
@@ -56,6 +57,19 @@ if ($___process -ne 0) {
 
 
 
+$___source = "${env:PROJECT_PATH_ROOT}\${env:PROJECT_ANGULAR}\dist\browser"
+$___dest = "${env:PROJECT_PATH_ROOT}\${env:PROJECT_PATH_DOCS}"
+$null = I18N-Export "${___dest}"
+$null = FS-Make-Directory "${___dest}"
+$___process = FS-Copy-All "${___source}\" "${___dest}"
+if ($___process -ne 0) {
+	$null = I18N-Export-Failed
+	return 1
+}
+
+
+
+
 # placeholding flag files
 foreach ($__line in $__placeholders) {
 	if ($(STRINGS-Is-Empty "${__line}") -eq 0) {

diff --git a/srcANGULAR/.ci/materialize_unix-any.sh → Angular/.ci/materialize_unix-any.sh b/srcANGULAR/.ci/materialize_unix-any.sh → Angular/.ci/materialize_unix-any.sh
diff --git a/srcANGULAR/.ci/materialize_windows-any.ps1 → Angular/.ci/materialize_windows-any.ps1 b/srcANGULAR/.ci/materialize_windows-any.ps1 → Angular/.ci/materialize_windows-any.ps1
diff --git a/srcANGULAR/.ci/prepare_unix-any.sh → Angular/.ci/prepare_unix-any.sh b/srcANGULAR/.ci/prepare_unix-any.sh → Angular/.ci/prepare_unix-any.sh
diff --git a/srcANGULAR/.ci/prepare_windows-any.ps1 → Angular/.ci/prepare_windows-any.ps1 b/srcANGULAR/.ci/prepare_windows-any.ps1 → Angular/.ci/prepare_windows-any.ps1
diff --git a/srcANGULAR/.ci/test_unix-any.sh → Angular/.ci/test_unix-any.sh b/srcANGULAR/.ci/test_unix-any.sh → Angular/.ci/test_unix-any.sh
diff --git a/srcANGULAR/.ci/test_windows-any.ps1 → Angular/.ci/test_windows-any.ps1 b/srcANGULAR/.ci/test_windows-any.ps1 → Angular/.ci/test_windows-any.ps1
diff --git a/Angular/README.md b/Angular/README.md
@@ -0,0 +1,79 @@
+# AutomataCI Static Site Generator Angular Setup
+
+This document is mainly for Angular developer to understand what is going on
+with the organization here. Most of the resources are the same.
+
+
+
+
+## Directory Structures
+
+Unlike what was recommended by Angular, AutomataCI prepares 2 separate
+components directories:
+
+1. `contents/` - organize the pages
+2. `services/` - where your libraries and components stays
+
+The `contents/` structures the website page hirarchy and imports the `services/`
+libraries to construct the page.
+
+
+
+
+## Server-Side Rendering (SSR) or Static Site Generation (SSG) First
+
+There is a high chance this project is likely being used to generate JAM Stack.
+Hence, AutomataCI prioritizes the SSR and SSG (pre-rendering) facilities.
+
+
+
+
+## Setting website Base URL
+
+To set the Base URL, make sure you update the `baseHref` and `deployUrl` data
+inside `angular.json`:
+
+```
+diff --git a/angular/angular.json b/angular/angular.json
+index 5379d9e..fb2e8fa 100644
+--- a/angular/angular.json
++++ b/angular/angular.json
+@@ -46,6 +46,8 @@
+           },
+           "configurations": {
+             "production": {
++              "baseHref": "https://www.example.com/",
++              "deployUrl": "https://www.example.com/",
+               "budgets": [
+                 {
+                   "type": "initial",
+```
+
+Then make sure you edit `assets/CNAME` and add only the domain name inside. This
+is for GitHub or GitLab authentication use.
+
+Then update the `assets/manifest.webmanifest` for PWA settings. Specifically,
+look for `start_url` and etc.
+
+
+
+
+## For development
+
+Everything is the same as Angular: `$ ng serve`
+
+
+
+
+## For Tests
+
+Everything is the same as Angular: `$ ng test` OR `$ ng e2e`
+
+
+
+
+## For Production
+
+Everything is the same as Angular: `$ ng build`
+
+For full automation, use: `$ ./automataCI/ci.sh.ps1 build`
diff --git a/srcANGULAR/angular.json → Angular/angular.json b/srcANGULAR/angular.json → Angular/angular.json
@@ -7,32 +7,47 @@
       "projectType": "application",
       "schematics": {},
       "root": "",
-      "sourceRoot": "src",
+      "sourceRoot": ".",
       "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
+            "crossOrigin": "anonymous",
             "outputPath": {
-              "base": "../public"
+              "base": "dist",
+              "browser": "browser",
+              "server": "server"
             },
-            "index": "src/index.html",
+            "index": "app.html",
             "polyfills": [
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": [{
+              "glob": "**/*",
+              "input": "assets",
+              "output": "."
+            }],
             "styles": [
-              "src/styles.css"
+              "app.css"
+            ],
+            "scripts": [
+              "app.js"
             ],
-            "scripts": [],
-            "browser": "src/main.ts"
+            "browser": "main.ts",
+            "server": "main.server.ts",
+            "prerender": {
+              "routesFile": "prerender-routes.txt"
+            },
+            "ssr": {
+              "entry": "server.ts"
+            }
           },
           "configurations": {
             "production": {
+              "baseHref": "https://www.example.com/",
+              "deployUrl": "https://www.example.com/",
               "budgets": [
                 {
                   "type": "initial",
@@ -45,7 +60,8 @@
                   "maximumError": "4kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,
@@ -83,14 +99,17 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": [{
+              "glob": "**/*",
+              "input": "assets",
+              "output": "."
+            }],
             "styles": [
-              "src/styles.css"
+              "app.css"
             ],
-            "scripts": []
+            "scripts": [
+              "app.js"
+            ]
           }
         }
       }

diff --git a/Angular/app.config.server.ts b/Angular/app.config.server.ts
@@ -0,0 +1,16 @@
+/*
+ * COPYRIGHT LICENSE NOTICE HERE
+ */
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+
+
+
+const serverConfig: ApplicationConfig = {
+	providers: [
+		provideServerRendering()
+	]
+};
+export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/Angular/app.config.ts b/Angular/app.config.ts
@@ -0,0 +1,23 @@
+/*
+ * COPYRIGHT LICENSE NOTICE HERE
+ */
+import { ApplicationConfig, isDevMode } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideServiceWorker } from '@angular/service-worker';
+
+
+
+
+export const appConfig: ApplicationConfig = {
+	providers: [
+		provideRouter(routes),
+		provideClientHydration(),
+		provideServiceWorker('ngsw-worker.js', {
+			enabled: !isDevMode(),
+			registrationStrategy: 'registerWhenStable:30000'
+		})
+	]
+};
diff --git a/Angular/app.css b/Angular/app.css
@@ -0,0 +1,3 @@
+/*
+ * COPYRIGHT LICENSE NOTICE HERE
+ */
diff --git a/Angular/app.html b/Angular/app.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Website</title>
+	<base href="/">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<!-- PWA -->
+	<link rel="icon" type="image/x-icon" href="/logos/icon.ico">
+	<link rel="manifest" href="/manifest.webmanifest">
+	<meta name="theme-color" content="#0000FF">
+	<meta name="msapplication-TileColor" content="#021B79" />
+	<meta name="msapplication-config" content="/browserconfig.xml" />
+	<link rel='mask-icon'
+		type='image/svg+xml'
+		href='/logos/icon-monochrome_1200x1200.svg'
+		color='#0000FF' />
+
+	<!-- favicon 57x57 -->
+	<link rel='icon' type='image/png' sizes='57x57' href='/logos/icon_57x57.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='57x57'
+		href='/logos/icon_57x57.png' />
+
+	<!-- favicon 60x60 -->
+	<link rel='icon' type='image/png' sizes='60x60' href='/logos/icon_60x60.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='60x60'
+		href='/logos/icon_60x60.png' />
+
+	<!-- favicon 70x70 -->
+	<link rel='icon' type='image/png' sizes='70x70' href='/logos/icon_70x70.png' />
+
+	<!-- favicon 72x72 -->
+	<link rel='icon' type='image/png' sizes='72x72' href='/logos/icon_72x72.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='72x72'
+		href='/logos/icon_72x72.png' />
+
+	<!-- favicon 76x76 -->
+	<link rel='icon' type='image/png' sizes='76x76' href='/logos/icon_76x76.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='76x76'
+		href='/logos/icon_76x76.png' />
+
+	<!-- favicon 96x96 -->
+	<link rel='icon' type='image/png' sizes='96x96' href='/logos/icon_96x96.png' />
+
+	<!-- favicon 114x114 -->
+	<link rel='icon' type='image/png' sizes='114x114' href='/logos/icon_114x114.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='114x114'
+		href='/logos/icon_114x114.png' />
+
+	<!-- favicon 120x120 -->
+	<link rel='icon' type='image/png' sizes='120x120' href='/logos/icon_120x120.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='120x120'
+		href='/logos/icon_120x120.png' />
+
+	<!-- favicon 128x128 -->
+	<link rel='icon' type='image/png' sizes='128x128' href='/logos/icon_128x128.png' />
+
+	<!-- favicon 144x144 -->
+	<link rel='icon' type='image/png' sizes='144x144' href='/logos/icon_144x144.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='144x144'
+		href='/logos/icon_144x144.png' />
+	<meta name='msapplication-TileImage' content='/logos/icon_144x144.png' />
+
+	<!-- favicon 150x150 -->
+	<link rel='icon' type='image/png' sizes='150x150' href='/logos/icon_150x150.png' />
+
+	<!-- favicon 152x152 -->
+	<link rel='icon' type='image/png' sizes='152x152' href='/logos/icon_152x152.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='152x152'
+		href='/logos/icon_152x152.png' />
+
+	<!-- favicon 180x180 -->
+	<link rel='icon' type='image/png' sizes='152x152' href='/logos/icon_152x152.png' />
+	<link rel='apple-touch-icon'
+		type='image/png'
+		sizes='180x180'
+		href='/logos/icon_180x180.png' />
+
+	<!-- favicon 192x192 -->
+	<link rel='icon' type='image/png' sizes='192x192' href='/logos/icon_192x192.png' />
+
+	<!-- favicon 310x310 -->
+	<link rel='icon' type='image/png' sizes='310x310' href='/logos/icon_310x310.png' />
+
+	<!-- favicon 384x384 -->
+	<link rel='icon' type='image/png' sizes='384x384' href='/logos/icon_384x384.png' />
+
+	<!-- favicon 480x480 -->
+	<link rel='icon' type='image/png' sizes='480x480' href='/logos/icon_480x480.png' />
+
+	<!-- favicon 512x512 -->
+	<link rel='icon' type='image/png' sizes='512x512' href='/logos/icon_512x512.png' />
+
+	<!-- favicon 1024x1024 -->
+	<link rel='icon' type='image/png' sizes='1024x1024' href='/logos/icon_1024x1024.png' />
+
+	<!-- favicon 1200x1200 -->
+	<link rel='icon' type='image/png' sizes='1200x1200' href='/logos/icon_1200x1200.png' />
+	<link rel='icon' type='image/svg+xml' href='/logos/icon_1200x1200.svg' />
+</head>
+<body>
+	<app-root></app-root>
+	<noscript>Please enable JavaScript to continue using this application.</noscript>
+</body>
+</html>
diff --git a/Angular/app.js b/Angular/app.js
@@ -0,0 +1,3 @@
+/*
+ * COPYRIGHT LICENSE NOTICE HERE
+ */