Skip to main content

Web UI with Angular Material M3

This folder is the successor of the web folder. The web folder contained plain TypeScript with Material Desgin M2 libraries, without using JavaScript component Frameworks such as Angular or React.

This web-ng-m3 folder is the next generation of the UI which uses Angular Material framework with Material Design 3 components.

Understanding Tech Stack​

Angular framework uses npm and webpack underlying framework, but provides another layer of abstraction using the ng cli.

Folder structure:

  1. dist folder contains the webpack compiled build artifacts
  2. src folder contains the Web UI Sources (typescript, html/ejs, scss)
  3. node_modules contains the npm dependencies installed via npm install based on the dependnecies declared in ./package.json and ./package-lock.json
  4. ./angular.json contains angular build configuration, equivalent to webpack.config.js
  5. tsconfig.json contains configuration to compile TypeScript in JavaScript.

Prompt template for Material 2 to Material 3 Migration​

Let's continue migrating our legacy plain TypeScript + Material M2 application from the web folder to the web-ng-m3 folder with angular material. Let's do this step-by-step. We already have the ... created. Now let's migrate the ...

Software Development Lifecycle​

To build the application run

# ⚠️ IMPORTANT: These commands MUST be run from within the Devcontainer (See Issue #399).
# Angular's esbuild depends on platform-specific binaries (Linux in container vs Darwin on macOS).
cd web-ng-m3

export ENV=dev

source ../env/${ENV}/setvars.sh
source ../env/${ENV}/firebase/m3/setvars.sh

# If repository just cloned from github install NodeJS dependencies
npm install

git clone https://github.com/googleapis/googleapis ../env/dependencies/googleapis

# Generate sources for gRPC in src/generated.commonjs/
protoc -I=../src/main/proto \
  -I=../env/dependencies/googleapis \
  --js_out=import_style=commonjs,binary:src/generated.commonjs \
  --grpc-web_out=import_style=typescript,mode=grpcwebtext:src/generated.commonjs \
  ../src/main/proto/*.proto \
  ../env/dependencies/googleapis/google/type/date.proto \
  ../env/dependencies/googleapis/google/api/*.proto

# By default builds the application for development environment
npm run build

npm start

# Deploy to firebase from within `web-ng-m3` folder
firebase deploy --project=${GCP_PROJECT_ID} --only hosting:dev

# Deploy firebase rules
firebase deploy --project=${GCP_PROJECT_ID} --only firestore:rules

To deploy the demo environment:

npm run build:demo
firebase deploy --project=${GCP_PROJECT_ID} --only hosting:demo

To run Jasmine tests

npm test -- --browsers=ChromeHeadless --watch=false

Running a specific test in DevContainer:

CHROME_BIN=/usr/bin/chromium \
npm test -- \
--include=src/app/components/compliance/compliance.component.spec.ts \
--browsers=ChromeHeadless --watch=false

Decoding Protobuf Messages​

Example:

# As obtained from Chrome DevTools Network tab, for example:
PROTO_MESSAGE="AAAAAB8KFVIyMDI0LjAwOTEtMjAyNC0xMC0xNBAGGgQyMjE3"
PROTO_MESSAGE="AAAAAB8KFVIyMDI0LjAwOTEtMjAyNC0xMC0xNBAGGgQzODE1"
# Note: The message contains a 5-byte prefix (00 00 00 00 1f in hex) that is not part of the protobuf message itself. 
# This is common when messages are transmitted in a stream or have custom framing.
# The -c +6 option tells tail to output the data starting from the 6th byte to the end of the stream. 
# This effectively skips the first 5 problematic bytes.
echo ${PROTO_MESSAGE} | base64 --decode | tail -c +6 | protoc --decode_raw