Skip to main content

Quickstart

The Angular CLI​

Angular requires an active LTS or maintenance LTS version of Node.js. See Angular's version compatibility guide for more information.

To install the Angular CLI, open a terminal and run the following command:

npm install -g @angular/cli

If you are having issues running this command, check out the CLI docs for more info.

Building Angular apps​

Follow the steps in the Spring Boot quickstart guide then in a terminal, run:

# In the project's /frontend directory

npm install

ng build --configuration="development" serendipity-utils-lib && \
ng build --configuration="development" serendipity-auth-lib && \
ng build --configuration="development" serendipity-components-lib && \
ng build --configuration="development" serendipity-camunda-lib && \
ng build --configuration="development" serendipity-party-lib && \
ng build --configuration="development" serendipity-workflow-lib && \
ng build --configuration="development" serendipity-pwa
tip

You must build your libraries from the lowest-level foundation up to the highest functional feature. Since serendipity-auth-lib relies on serendipity-utils-lib, the utils library must be compiled first.

Serving Angular apps​

info

Angular Is Bound to localhost Instead of 0.0.0.0
By default, when you run ng serve, the underlying Vite/Esbuild engine binds strictly to your internal loopback address (127.0.0.1 / localhost). Because Docker containers run inside an isolated virtual Linux network layer, requests coming from host.docker.internal look like external network traffic. If Angular is only listening for local requests, it will silently ignore connections from Nginx, resulting in a 502 error.

To fix this, you must instruct Angular to listen on all network interfaces by adding the --host 0.0.0.0 flag:

npx ng serve serendipity-pwa --host 0.0.0.0

The Angular CLI will compile the application, skip unnecessary optimisations, start a devserver, and automatically rebuild and live reload any subsequent changes.

Navigate to:

https://serendipity.localhost

You can stop the server by pressing Ctrl+C.

To clear the cache:

npx ng cache clean
rm -rf .angular/cache node_modules/.cache node_modules/.vite dist/

To disable the cache:

npx ng cache disable

To enable the cache:

npx ng cache enable

Aliases​

To add support for aliases update the "paths" array in the compilerOptions section of tsconfig.json:

  "paths": {
    "@app/*": [
      "src/app/*"
    ],
    "@env/*": [
      "src/environments/*"
    ],

    ...
    
  }

Assets​

You use the assets array inside the build target in angular.json to list files or folders you want to copy as-is when building your project:

  "assets": [
    "projects/serendipity-pwa/src/favicon.ico",
    "projects/serendipity-pwa/src/assets",
    {
      "glob": "**/*",
      "input": "projects/serendipity-party-lib/src/assets",
      "output": "/assets"
    }
  ]

Styles​

You use the styles array inside the build target in angular.json to list files you want to include when building your project:

  "styles": [
    "projects/serendipity-pwa/src/styles.scss",
    "projects/serendipity-pwa/src/theme.scss",
    "projects/serendipity-components-lib/src/styles.scss",
    "projects/serendipity-flowable-lib/src/styles.scss",
    "./node_modules/@bpmn-io/form-js-viewer/dist/assets/form-js.css",
    "./node_modules/leaflet/dist/leaflet.css"
  ]

You can override global styles in the Serendipity PWA's styles.css, for example:

// form-js

.cds--grid {
  padding-inline: 0!important;
}
@media (min-width: 42rem) {
  .cds--grid {
    padding-inline: 0!important;
  }
}
@media (min-width: 99rem) {
  .cds--grid {
    padding-inline: 0!important;
  }
}

.fjs-container .fjs-powered-by {
  display: none!important;
}

Angular Schematics​

You use the schematics entry for applications and libraries in angular.json to set the stylesheet format when generating components:

      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

Source control​

Check in:

git add .
git commit -m "Updated the README.md file"
git push -u origin main

Tag Format:

v4.0.0-beta.1
v4.0.0-rc.1

To create a local tag on your current branch, run this:

git tag <tagname>
git tag -a v20.2.2 -m "Angular 20.2.2"

To push the local tags to GitHub:

git push origin --tags

or

git push origin <tag>

References​

Angular​

Angular Material​

System hardening​

OAuth 2.0​

Keycloak​

Keycloak-based development​

Keycloak support​

Nginx​

Additional resources​