Angular Demo App

examples/Web Apps/Framework Examples/Angular/README.md

@@ -0,0 +1,20 @@
+# SystemLink Angular Web Apps
+
+This directory contains a collection of Angular-based web apps designed to work
+with SystemLink services. Each app demonstrates how to build Web Apps that are
+visually uniform with SystemLink's production environment and demonstrates how
+to use SystemLink API's both from within and outside of the production
+environment.
+
+The [Nimble Angular package](https://www.npmjs.com/package/@ni/nimble-angular) can
+be used to import components and styling that are uniform with those of the
+SystemLink production environment.
+
+- For more information about React see [here](https://angular.dev/).
+- For more information about Nimble see [here](https://nimble.ni.dev/).
+
+## Apps Included
+
+- **[SystemLinkAuthExample](./SystemLinkAuthExample/)** – Demonstrates how to make API calls to
+  SystemLink by calling a simple endpoint and displaying information about a
+  user's API keys.

examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/.editorconfig

@@ -0,0 +1,17 @@
+# 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
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/.gitignore

@@ -0,0 +1,44 @@
+# 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
+*.nipkg
+
+
+# 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

examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/README.md

@@ -0,0 +1,77 @@
+# Angular Demo for SystemLink
+
+A minimal setup to get this demo working on your local machine with a Angular
+frontend and Node.js backend proxy.
+
+For how to deploy the webapp to SystemLink, jump to
+[here](#deploying-to-systemlink-website-using-the-systemlink-cli).
+
+## Prerequisites
+
+- **Node.js** v22.16.0 or higher
+
+## Getting Started -- Running Locally
+
+### Backend Proxy Setup
+
+> **Note:** The frontend calls a backend proxy running on `localhost:4000`,
+> which in turn calls the SystemLink API server. This avoids CORS errors that
+> would occur from direct frontend-to-server calls.
+
+Make sure you have the [ApiServiceProxy](../../../Dev%20Tools/ApiServiceProxy/)
+installed and have followed the setup in the README.
+
+### Frontend Setup
+
+1. Install dependencies:
+
+   ```bash
+   npm ci
+   ```
+
+2. Start the development server:
+
+   ```bash
+   npm run start
+   ```
+
+3. Open your browser and navigate to the URL that was printed in the console. For example:
+
+   ```
+   http://localhost:5173
+   ```
+
+   Or type in `o + enter` to have vite open the browser and navigate for you.
+
+## Testing
+
+1. Click the **Make API Call** button in the application
+2. You should see the response printed on the browser
+
+---
+
+## Deployment using the SystemLink CLI
+
+Prereq:
+**[Install](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)**
+the SystemLink CLI to your machine and
+**[login](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)**
+to the CLI.
+
+1. `cd` into the project folder and run `npm run build` to create `dist/` folder
+2. Create .nipkg file using `slcli webapp pack dist/`
+3. Publish the webapp with
+   `slcli webapp publish dist.nipkg --name NAME --workspace WORKSPACE`. Specify
+   the webapp NAME and the user WORKSPACE
+4. After any changes are made, repack the webapp (step 2) and update the webapp
+   with `slcli webapp publish dist.nipkg --id ID`. (Use `slcli webapp list` to
+   get the ID)
+
+For more details on
+[WebApp Management](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)
+see the SL-CLI docs
+
+#
+
+For more information, visit the
+[SystemLink Enterprise Examples repository](https://github.com/ni/systemlink-enterprise-examples)

examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/angular.json

@@ -0,0 +1,162 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "SystemLinkAuthExample": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "standalone": false
+        },
+        "@schematics/angular:directive": {
+          "standalone": false
+        },
+        "@schematics/angular:pipe": {
+          "standalone": false
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/SystemLinkAuthExample",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "SystemLinkAuthExample:build:production"
+            },
+            "development": {
+              "buildTarget": "SystemLinkAuthExample:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.js",
+              "src/**/*.mjs",
+              "src/**/*.html"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false,
+    "schematicCollections": [
+      "angular-eslint"
+    ]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}

examples/Web Apps/Framework Examples/Angular/SystemLinkAuthExample/eslint.config.mjs

@@ -0,0 +1,40 @@
+import { defineConfig } from 'eslint/config';
+import { angularTypescriptConfig, angularTemplateConfig } from '@ni/eslint-config-angular';
+import { javascriptConfig, importNodeEsmConfig } from '@ni/eslint-config-javascript';
+
+export default defineConfig([
+    {
+        // JavaScript rules fail to parse the HTML files that are added below. Therefore, the JavaScript
+        // configuration must now match the correct files to avoid an error.
+        files: ['**/*.js', '**/*.mjs'],
+        extends: [javascriptConfig, importNodeEsmConfig]
+    },
+    {
+        files: ['**/*.ts'],
+        extends: angularTypescriptConfig,
+        languageOptions: {
+            parserOptions: {
+                // The `languageOptions.parserOptions.projectService` option is recommended but does not identify
+                // tsconfig.*.json files. Use the older `project` configuration instead. `project` has an order of
+                // precedence, so include `tsconfig.json` last.
+                // https://typescript-eslint.io/troubleshooting/typed-linting/#project-service-issues
+                project: ['tsconfig.app.json', 'tsconfig.spec.json', 'tsconfig.json']
+                // In projects (e.g. libraries) using `parserOptions.project`, Angular requires that the paths be
+                // relative to the root, but the VSCode extension requires them to be relative to the project
+                // directory. Set the root to be the project directory to satisfy both. The `parserOptions.projectService`
+                // configuration would likely resolve this, but is not used for reasons described above.
+                // https://typescript-eslint.io/blog/project-service
+                // tsconfigRootDir: import.meta.dirname
+            }
+
+        }
+    },
+    {
+        files: ['**/*.html'],
+        extends: angularTemplateConfig,
+        rules: {
+          // Disable internationalization for simplicity in this example app
+          "@angular-eslint/template/i18n": 'off'
+        }
+    }
+]);