protiev/add an angular app

.vscode/settings.json

@@ -5,6 +5,7 @@
     "./libs/ts/detect-runtimwwwe",
     "libs/ts/jsr-metadata/tests.bun.spec.ts",
     "libs/ts/detect-runtime/tests.bun.spec.ts",
-    "masonmark/2024-06-16/wow/that/is/sad/no/glob/support/here"
+    "masonmark/2024-06-16/wow/that/is/sad/no/glob/support/here",
+    "./apps/angular-app"
   ]
 }

README.md

@@ -17,6 +17,121 @@ Can we construct a megarepo that contains multiple, interdependent TypeScript li
 
 ## Change log
 
+### add Angular app
+
+Even the big dog enterprise JS framework supports Bun now, at least for the package management parts. 
+
+```text
+┌[protiev@fed-40-container] [/dev/pts/18] [protiev/add-an-angular-app ⚡] 
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps]> bunx ng config -g cli.packageManager bun
+┌[protiev@fed-40-container] [/dev/pts/18] [protiev/add-an-angular-app ⚡] 
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps]> bunx ng config cli.packageManager bun
+Error: Confguration file cannot be found.
+┌[protiev@fed-40-container] [/dev/pts/18] [protiev/add-an-angular-app ⚡] [1]
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps]> # OK fine, I guess that is just for existing shitz
+┌[protiev@fed-40-container] [/dev/pts/18] [protiev/add-an-angular-app ⚡] [1]
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps]> 
+┌[protiev@fed-40-container] [/dev/pts/18] [protiev/add-an-angular-app ⚡] [1]
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps]> bunx ng new angular-app
+? Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
+? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
+CREATE angular-app/README.md (1071 bytes)
+CREATE angular-app/.editorconfig (274 bytes)
+CREATE angular-app/.gitignore (587 bytes)
+CREATE angular-app/angular.json (2784 bytes)
+CREATE angular-app/package.json (1042 bytes)
+CREATE angular-app/tsconfig.json (1021 bytes)
+CREATE angular-app/tsconfig.app.json (424 bytes)
+CREATE angular-app/tsconfig.spec.json (434 bytes)
+CREATE angular-app/.vscode/extensions.json (130 bytes)
+CREATE angular-app/.vscode/launch.json (470 bytes)
+CREATE angular-app/.vscode/tasks.json (938 bytes)
+CREATE angular-app/src/main.ts (250 bytes)
+CREATE angular-app/src/index.html (296 bytes)
+CREATE angular-app/src/styles.scss (80 bytes)
+CREATE angular-app/src/app/app.component.scss (0 bytes)
+CREATE angular-app/src/app/app.component.html (19903 bytes)
+CREATE angular-app/src/app/app.component.spec.ts (931 bytes)
+CREATE angular-app/src/app/app.component.ts (308 bytes)
+CREATE angular-app/src/app/app.config.ts (310 bytes)
+CREATE angular-app/src/app/app.routes.ts (77 bytes)
+CREATE angular-app/public/favicon.ico (15086 bytes)
+✔ Packages installed successfully.
+    Directory is already under version control. Skipping initialization of git.
+┌[protiev@fed-40-container] [/dev/pts/18] [protiev/add-an-angular-app ⚡] 
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps]> 
+```
+
+hmm! seems `bunx ng serve` is working, too. 
+
+```text
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps/angular-app]> bunx ng serve 
+
+Would you like to share pseudonymous usage data about this project with the Angular Team
+at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
+details and how to change this setting, see https://angular.dev/cli/analytics.
+
+   Yes
+
+Thank you for sharing pseudonymous usage data. Should you change your mind, the following
+command will disable this feature entirely:
+
+    ng analytics disable
+
+Global setting: enabled
+Local setting: enabled
+Effective status: enabled
+Initial chunk files | Names         |  Raw size
+polyfills.js        | polyfills     |  88.34 kB | 
+main.js             | main          |  22.63 kB | 
+styles.css          | styles        |  96 bytes | 
+
+                    | Initial total | 111.06 kB
+
+Application bundle generation complete. [0.562 seconds]
+
+Watch mode enabled. Watching for file changes...
+NOTE: Raw file sizes do not reflect development server per-request transformations.
+  ➜  Local:   http://localhost:4200/
+  ➜  press h + enter to show help
+```
+
+#### TL;DR Angular doesn't fit well into this kind of env
+
+##### You cannot build the Angular app if you make it's tsconfig.json extend the root one:
+
+```text
+└[~/axhxrx-megarepo-jsr-deno-bun-node-hootenanny/apps/angular-app]> bunx ng serve
+Application bundle generation failed. [0.535 seconds]
+
+✘ [ERROR] File 'src/main.ts' is missing from the TypeScript compilation. [plugin angular-compiler]
+
+  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.
+
+
+Watch mode enabled. Watching for file changes...
+```
+
+##### You can't use the monorepo libs in the Angular app, because Angular can't use non-insane imports
+
+If we give the Angular app its own tsconfig.json, the app works. But, it cannot use the libs:
+
+```text
+Application bundle generation failed. [0.048 seconds]
+
+✘ [ERROR] TS5097: An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled. [plugin angular-compiler]
+
+    ../../libs/ts/assert-never/mod.ts:1:14:
+      1 │ export * from './assertNever.ts';
+        ╵               ~~~~~~~~~~~~~~~~~~
+```
+
+That was expected, and seems true. And you can't enable the "allowImportingTsExtensions" option in the Angular app's tsconfig.json, because it's not supported. The build doesn't work then, because it (I presume) relies on tsc to emit code.
+
+So ANYWAY at a glance the only solution for Angular is to build the monorepo libs, and import them from `./dist` or wherever. But that requires some tooling like Nx or Turborepo (maybe?) or moonrepo or.... *waves hands vaguely*
+
+In other words, pretty much what we expected!
+
 ### miscellany
 
 - "deno.disablePaths" settings do not support globs, so to avoid Deno language server annoyingess, we must specify every single incompatible file individually (e.g. "libs/ts/detect-runtime/tests.bun.spec.ts") — obvious candidate for automation

apps/angular-app/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

apps/angular-app/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

apps/angular-app/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

apps/angular-app/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

apps/angular-app/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

apps/angular-app/README.md

@@ -0,0 +1,27 @@
+# AngularApp
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

apps/angular-app/angular.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular-app",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-app:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "08c2debf-3b5a-4a8f-b86c-3eaea897fac5"
+  }
+}