@abgov/nx-adsp 12.4.1 → 12.6.0

package/generators.json

@@ -43,6 +43,12 @@
       "factory": "./src/generators/angular-app/angular-app",
       "schema": "./src/generators/angular-app/schema.json",
       "description": "Generator that creates a Angular based frontend application."
+    },
+    "mean": {
+      "factory": "./src/generators/mean/mean",
+      "schema": "./src/generators/mean/schema.json",
+      "description": "Generator that creates a MEAN fullstack solution.",
+      "hidden": true
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "12.4.1",
+  "version": "12.6.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/angular-app/angular-app.js

@@ -56,6 +56,7 @@ function removeFiles(host, options) {
 }
 function default_1(host, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         const normalizedOptions = yield normalizeOptions(host, options);
         const { applicationGenerator: initAngular } = yield Promise.resolve().then(() => require('@nx/angular/generators'));
         yield initAngular(host, {
@@ -64,17 +65,31 @@ function default_1(host, options) {
             linter: 'none',
             directory: `apps/${options.name}`
         });
-        (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
-            '@abgov/angular-components': '^3.0.0',
-            '@abgov/web-components': '^1.19.0',
-            'oidc-client': '~1.11.5',
-        });
+        (0, devkit_1.addDependenciesToPackageJson)(host, {
+            '@abgov/angular-components': '5.2.1',
+            '@abgov/design-tokens': '1.8.0',
+            '@abgov/ui-components-common': '^2.0.0',
+            '@abgov/web-components': '1.39.3',
+            'keycloak-angular': '^19.0.2',
+            'keycloak-js': '^23.0.7',
+            'zone.js': '~0.15.0',
+        }, {});
         const addedProxy = addFiles(host, normalizedOptions);
-        removeFiles(host, normalizedOptions);
+        // @nx/angular generates app.ts/html/css/spec.ts (new naming) and nx-welcome.ts;
+        // our templates use app.component.* and don't use nx-welcome.
+        for (const file of ['app.ts', 'app.html', 'app.css', 'app.spec.ts', 'nx-welcome.ts']) {
+            host.delete(`${normalizedOptions.projectRoot}/src/app/${file}`);
+        }
         const layout = (0, devkit_1.getWorkspaceLayout)(host);
         const config = (0, devkit_1.readProjectConfiguration)(host, options.name);
-        config.targets.build.options = Object.assign(Object.assign({}, config.targets.build.options), { assets: [
+        // Remove the generated fileReplacements for production — single environment.ts
+        // is pre-populated from tenant config at generation time.
+        if ((_b = (_a = config.targets.build.configurations) === null || _a === void 0 ? void 0 : _a.production) === null || _b === void 0 ? void 0 : _b.fileReplacements) {
+            delete config.targets.build.configurations.production.fileReplacements;
+        }
+        config.targets.build.options = Object.assign(Object.assign({}, config.targets.build.options), { polyfills: ['zone.js'], assets: [
                 ...config.targets.build.options.assets,
+                `${normalizedOptions.projectRoot}/src/silent-check-sso.html`,
                 {
                     glob: 'nginx.conf',
                     input: `${layout.appsDir}/${options.name}`,

package/src/generators/angular-app/angular-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"angular-app.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/angular-app/angular-app.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"angular-app.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/angular-app/angular-app.ts"],"names":[],"mappings":"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"}

package/src/generators/angular-app/files/AGENTS.md__tmpl__

@@ -0,0 +1,96 @@
+# AGENTS.md — <%= projectName %>
+
+Angular 19 frontend for the Alberta Digital Service Platform (ADSP).
+Generated by `nx g @abgov/nx-adsp:angular-app`.
+
+## Stack
+
+- **UI**: Angular 19 standalone + GoA design system (`@abgov/angular-components` — `Goab*` components)
+- **Auth**: `keycloak-angular` with `keycloak-js`
+- **Router**: Angular Router with `createAuthGuard` from `keycloak-angular`
+
+## Key files
+
+| File | Purpose |
+|------|---------|
+| `src/main.ts` | Entry — bootstraps `AppComponent` with `appConfig`, imports `zone.js` |
+| `src/app/app.config.ts` | `provideKeycloak` (PKCE, silent SSO), `provideRouter`, `provideHttpClient` |
+| `src/app/app.component.ts` | Shell — auth state, hero banner background workaround, public API call |
+| `src/app/app.routes.ts` | Routes — `/protected` with `createAuthGuard` |
+| `src/app/protected/protected.component.ts` | Protected route — shows authenticated user info |
+| `src/environments/environment.ts` | Access URL, realm, client ID — pre-set from ADSP tenant |
+
+## Auth pattern
+
+```typescript
+import Keycloak from 'keycloak-js';
+import { inject } from '@angular/core';
+
+private keycloak = inject(Keycloak); // provided by provideKeycloak in app.config.ts
+
+this.keycloak.authenticated          // boolean
+this.keycloak.tokenParsed?.['name']  // user display name
+this.keycloak.login()
+this.keycloak.logout({ redirectUri: window.location.origin })
+```
+
+Route guard using `createAuthGuard` from `keycloak-angular`:
+
+```typescript
+const authGuard = createAuthGuard(async (_route, _state, { authenticated, keycloak }) => {
+  if (authenticated) return true;
+  await keycloak.login({ redirectUri: window.location.href });
+  return false;
+});
+```
+
+## GoA design system
+
+Components are imported from `@abgov/angular-components` with the `Goab` prefix
+and added to each standalone component's `imports` array:
+
+```typescript
+import { GoabButton, GoabAppHeader } from '@abgov/angular-components';
+
+@Component({ imports: [GoabButton, GoabAppHeader], ... })
+```
+
+**Known limitation:** `GoabHeroBanner.backgroundUrl` does not bind reliably via
+Angular's template binding due to an `@if(isReady)` timing issue inside the
+component wrapper. Use `MutationObserver` to set the property directly after
+the inner `<goa-hero-banner>` element appears — see `app.component.ts` for the
+established pattern.
+
+## Backend API calls (mean / proxy setup)
+
+If `proxy.conf.json` exists at the project root, API calls are proxied to the
+backend service in development. Use relative `/api/` paths — do not hardcode
+the service URL:
+
+```typescript
+// ✓ correct — works through proxy in dev, nginx in production
+this.http.get('/api/v1/my-resource')
+
+// ✗ wrong — bypasses proxy, won't work in production
+this.http.get('http://localhost:3333/my-service/v1/my-resource')
+```
+
+`includeBearerTokenInterceptor` (configured in `app.config.ts`) automatically
+attaches the Keycloak access token to all outgoing HTTP requests.
+In production, `nginx.conf` contains the same proxy rule routing `/api/` to
+the backend service hostname.
+
+## Adding a new route
+
+1. Create `src/app/my-feature/my-feature.component.ts` as a standalone component
+2. Add the route to `src/app/app.routes.ts`
+3. Add required `Goab*` components to the new component's `imports` array
+
+## What NOT to change
+
+- `app.config.ts` — `provideKeycloak` initialises keycloak-js once; do not
+  create a second Keycloak instance elsewhere
+- `silent-check-sso.html` — served from `public/`; required for keycloak-js
+  silent SSO check on page load
+- `environments/environment.ts` — access URL and realm are pre-configured for
+  the ADSP tenant; override at runtime via environment variables

package/src/generators/angular-app/files/src/app/app.component.css__tmpl__

@@ -1,36 +1,16 @@
-.container {
-  width: 100%;
-  margin: 0 auto;
-  padding: 0;
+.app {
+  margin: 0;
 }
 
-@media (min-width: 640px) {
-  .container {
-    margin: 0 auto;
-    padding: 3rem 1rem;
-    width: 640px;
-  }
+main {
+  display: grid;
+  grid-template-columns: repeat(6, auto);
 }
-@media (min-width: 768px) {
-  .container {
-    margin: 0 auto;
-    padding: 3rem 1rem;
-    width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    padding: 3rem 1rem;
-    margin: 0 auto;
-    width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-  .container {
-    padding: 3rem 1rem;
-    margin: 0 auto;
-    width: 1280px;
-  }
+
+section {
+  grid-column: 2 / span 2;
+  margin-top: 40px;
+  margin-bottom: 40px;
 }
 
 .nextSteps {
@@ -42,27 +22,3 @@
   margin-bottom: 0;
   line-height: 50px;
 }
-
-.nextSteps li button {
-  margin: 20px 0 0 10px;
-}
-
-
-.footer {
-  background-color: #f1f1f1;
-  padding-top: 56px;
-  padding-bottom: 56px;
-  padding-left: 150px;
-  padding-right: 150px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  border-bottom: 16px solid #0081a2;
-}
-
-@media (max-width: 767px) {
-  /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
-  .body-content {
-    padding-top: 50px;
-  }
-}

package/src/generators/angular-app/files/src/app/app.component.html__tmpl__

@@ -1,58 +1,27 @@
 <div class="app">
-  <goa-microsite-header type="alpha"></goa-microsite-header>
-  <goa-app-header heading="Digital Service Example" url="/"></goa-app-header>
-  <goa-hero-banner
-    backgroundUrl="../assets/banner.jpg"
-    heading="Quick start of a digital service"
-  >
-  </goa-hero-banner>
-  <main class="container">
+  <goab-microsite-header type="alpha"></goab-microsite-header>
+  <goab-app-header url="/" heading="<%= projectName %>">
+    <goab-button-group alignment="end">
+      @if (userName) { <span>{{ userName }}</span> }
+      @if (!isLoggedIn) {
+        <goab-button type="tertiary" (onClick)="login()">Sign in</goab-button>
+      } @else {
+        <goab-button type="tertiary" (onClick)="logout()">Sign out</goab-button>
+      }
+    </goab-button-group>
+  </goab-app-header>
+  <goab-hero-banner #heroBanner heading="<%= projectName %>"></goab-hero-banner>
+  <main>
     <section>
       <h2>Welcome to {{ title }}!</h2>
-      <p>
-        Don't panic. Start editing the project to build your digital service.
-      </p>
+      <p>Don't panic. Start editing the project to build your digital service.</p>
       <h3>A few things you might want to do next:</h3>
       <ul class="nextSteps">
-        <li>Create the 'my-app' client in your realm to let users sign in</li>
-        <li>
-          Make requests to the backend API by either updating nginx.conf or
-          enabling CORS on the API.
-        </li>
-        <li>Add requests to public API resources:</li>
-        <li>Add requests to private API resources:</li>
+        <li>Register the '<%= projectName %>' client in your realm and set CLIENT_SECRET.</li>
+        <li>Add requests to public API resources: {{ publicResource }}</li>
+        <li>Add requests to private API resources: {{ privateResource }}</li>
       </ul>
     </section>
-    <div class="container-fluid">
-      <div class="row">
-        <h3><a routerLink="/">Home</a> | <a routerLink="/protected">Admin Area</a></h3>
-        <div *ngIf="isLoggedIn(); else elseBlock">
-          <goa-button (click)="logout()">
-            Sign Out
-          </goa-button>
-        </div>
-        <ng-template #elseBlock>
-          <goa-button (click)="login()">
-            Sign In
-          </goa-button>
-        </ng-template>
-        <div class="col-sm-12 body-content">
-          <router-outlet></router-outlet>
-        </div>
-      </div>
-    </div>
+    <router-outlet></router-outlet>
   </main>
-  <footer class="footer">
-    <div class="goa-socialconnect">
-      <div class="goa-title">Connect with us on</div>
-      <ul>
-        <div>
-          <img src="./assets/github-1.svg" height="15px" />
-          <a href="https://github.com/abgov" rel="noreferrer" target="_blank">
-            GitHub
-          </a>
-        </div>
-      </ul>
-    </div>
-  </footer>
 </div>

package/src/generators/angular-app/files/src/app/app.component.spec.ts__tmpl__

@@ -1,44 +1,39 @@
-import { TestBed, getTestBed } from '@angular/core/testing';
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { GoabAppHeader, GoabButton, GoabButtonGroup, GoabHeroBanner, GoabMicrositeHeader } from '@abgov/angular-components';
+import Keycloak from 'keycloak-js';
 import { AppComponent } from './app.component';
-import { AngularComponentsModule } from '@abgov/angular-components';
-import { RouterTestingModule } from '@angular/router/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from "@angular/platform-browser-dynamic/testing";
-
 
 describe('AppComponent', () => {
-  beforeAll( ()=> {
-    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-  });
-  beforeEach(async () => {
-    let envData = {"production":false,"access":{"url":"https://testurl.com","realm":"123","client_id":"urn:ads:platform:tenant-admin-app"},"tenantApi":{"host":"http://localhost:3333","endpoints":{"tenantNameByRealm":"/api/tenant/v1/realm"}}}
+  const keycloakMock = {
+    authenticated: false,
+    tokenParsed: null,
+    login: jasmine.createSpy('login'),
+    logout: jasmine.createSpy('logout'),
+  };
 
-    localStorage.setItem('envData', JSON.stringify(envData));
+  beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      imports: [AngularComponentsModule, RouterTestingModule],
+      imports: [AppComponent, GoabAppHeader, GoabButton, GoabButtonGroup, GoabHeroBanner, GoabMicrositeHeader],
+      providers: [
+        provideRouter([]),
+        { provide: Keycloak, useValue: keycloakMock },
+        { provide: ElementRef, useValue: { nativeElement: { querySelector: () => null } } },
+      ],
     }).compileComponents();
   });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title '<%= projectName %>'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('<%= projectName %>');
+    expect(fixture.componentInstance).toBeTruthy();
   });
 
-  it('should render title', () => {
+  it('should have welcome heading', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('h2').textContent).toContain(
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h2')?.textContent).toContain(
       'Welcome to <%= projectName %>!'
     );
   });

package/src/generators/angular-app/files/src/app/app.component.ts__tmpl__

@@ -1,36 +1,76 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AuthService } from './services/auth.service';
-import { environment } from '../environments/environment'
-
+import { AfterViewInit, Component, ElementRef, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { RouterOutlet } from '@angular/router';
+import {
+  GoabAppHeader,
+  GoabButton,
+  GoabButtonGroup,
+  GoabHeroBanner,
+  GoabMicrositeHeader,
+} from '@abgov/angular-components';
+import Keycloak from 'keycloak-js';
+import { getAccessToken } from './user.slice';
 
 @Component({
-  selector: '<%= projectName %>-app-root',
+  selector: '<%= projectName %>-root',
+  standalone: true,
+  imports: [RouterOutlet, GoabAppHeader, GoabButton, GoabButtonGroup, GoabHeroBanner, GoabMicrositeHeader],
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
+export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
+  title = '<%= projectName %>';
 
-export class AppComponent implements OnInit, OnDestroy  {
-  title = "<%= projectName %>";
+  @ViewChild('heroBanner', { read: ElementRef, static: false }) heroBannerRef!: ElementRef;
 
-  constructor(private authService: AuthService) {}
+  private http = inject(HttpClient);
+  private keycloak = inject(Keycloak);
+  private heroObserver?: MutationObserver;
 
-  isLoggedIn(): boolean {
-    return this.authService.isLoggedIn()
-  }
+  publicResource = 'Not retrieved';
+  privateResource = 'Not retrieved';
+
+  get isLoggedIn(): boolean { return this.keycloak.authenticated ?? false; }
+  get userName(): string { return (this.keycloak.tokenParsed?.['name'] as string) ?? ''; }
 
-  logout() {
-    if (this.authService.isLoggedIn()) {
-      this.authService.logout();
+  ngOnInit() {
+    this.http.get<{ message: string }>('/api/v1/public').subscribe({
+      next: (data) => (this.publicResource = data.message),
+      error: () => (this.publicResource = 'Error loading data'),
+    });
+    if (this.isLoggedIn) {
+      getAccessToken().then((token) => {
+        this.http.get<{ message: string }>('/api/v1/private', {
+          headers: { Authorization: `Bearer ${token}` },
+        }).subscribe({
+          next: (data) => (this.privateResource = data.message),
+          error: () => (this.privateResource = 'Error loading data'),
+        });
+      });
     }
   }
 
-  login() {
-    if (!this.authService.isLoggedIn()) {
-      this.authService.startAuthentication();
+  ngAfterViewInit() {
+    const host = this.heroBannerRef?.nativeElement;
+    if (!host) return;
+    const setBackground = (inner: Element) => {
+      (inner as any).backgroundurl = '/assets/banner.jpg';
+      this.heroObserver?.disconnect();
+    };
+    const existing = host.querySelector('goa-hero-banner');
+    if (existing) {
+      setBackground(existing);
+    } else {
+      this.heroObserver = new MutationObserver(() => {
+        const inner = host.querySelector('goa-hero-banner');
+        if (inner) setBackground(inner);
+      });
+      this.heroObserver.observe(host, { childList: true, subtree: true });
     }
   }
 
-  ngOnInit() {}
+  ngOnDestroy() { this.heroObserver?.disconnect(); }
 
-  ngOnDestroy(): void {}
+  login() { this.keycloak.login(); }
+  logout() { this.keycloak.logout({ redirectUri: window.location.origin }); }
 }

package/src/generators/angular-app/files/src/app/app.config.ts__tmpl__

@@ -0,0 +1,27 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { includeBearerTokenInterceptor, provideKeycloak } from 'keycloak-angular';
+
+import { routes } from './app.routes';
+import { environment } from '../environments/environment';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([includeBearerTokenInterceptor])),
+    provideKeycloak({
+      config: {
+        url: environment.access.url,
+        realm: environment.access.realm,
+        clientId: environment.access.client_id,
+      },
+      initOptions: {
+        onLoad: 'check-sso',
+        pkceMethod: 'S256',
+        silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`,
+      },
+    }),
+  ],
+};

package/src/generators/angular-app/files/src/app/app.routes.ts__tmpl__

@@ -1,34 +1,13 @@
-import { LogoutComponent } from './logout/logout.component';
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home/home.component';
+import { Routes } from '@angular/router';
+import { createAuthGuard } from 'keycloak-angular';
 import { ProtectedComponent } from './protected/protected.component';
-import { AuthGuardService } from './services/auth-guard.service';
-import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
 
-const routes: Routes = [
-  {
-    path: '',
-    component: HomeComponent,
-    children: [],
-  },
-  {
-    path: 'protected',
-    component: ProtectedComponent,
-    canActivate: [AuthGuardService],
-  },
-  {
-    path: 'auth-callback',
-    component: AuthCallbackComponent,
-  },
-  {
-    path: 'signout/callback',
-    component: LogoutComponent,
-  },
-];
+const authGuard = createAuthGuard(async (_route, _state, { authenticated, keycloak }) => {
+  if (authenticated) return true;
+  await keycloak.login({ redirectUri: window.location.href });
+  return false;
+});
 
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
+export const routes: Routes = [
+  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] },
+];

package/src/generators/angular-app/files/src/app/home/home.component.html__tmpl__

@@ -1,5 +1,3 @@
 <hr />
 <h1>Public Area</h1>
-<div>Making a Public API call to uptime endpoint</div>
-<div>Uptime of API in seconds: {{uptime}}</div>
-
+<p>Public API response: {{ publicMessage() }}</p>

package/src/generators/angular-app/files/src/app/home/home.component.ts__tmpl__

@@ -1,33 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
-  selector: '<%= projectName %>-app-logout',
+  selector: '<%= projectName %>-home',
+  standalone: true,
   templateUrl: 'home.component.html',
 })
 export class HomeComponent implements OnInit {
-  constructor(private http: HttpClient) {}
-  public uptime = 0;
-
-  private getHealthUrl = `${this.configData().tenantApi.host}/health`;
-
-  getHealth() {
-    const uptimePromise = this.http.get(this.getHealthUrl);
-
-    uptimePromise.subscribe(
-      (data: any) => {
-        this.uptime = data.uptime;
-      },
-      (err) => console.error(err),
-      () => console.log('done loading uptime')
-    );
-  }
-
-  configData () {
-    return JSON.parse(localStorage.getItem('envData') || "\"\"");
-  }
+  private http = inject(HttpClient);
+  publicMessage = signal('Not retrieved');
 
   ngOnInit() {
-    this.getHealth();
+    this.http.get<{ message: string }>('/api/v1/public').subscribe({
+      next: (data) => this.publicMessage.set(data.message),
+      error: () => this.publicMessage.set('Error loading data'),
+    });
   }
 }

package/src/generators/angular-app/files/src/app/protected/protected.component.html__tmpl__

@@ -1,4 +1,4 @@
 <hr />
 <h1>Admin Area</h1>
-<div>Making a Protected API call to tenant endpoint using access token</div>
-<div>Tenant Name: {{tenant.name}}</div>
+<p>Welcome, {{ userName }}.</p>
+<p>Private API response: {{ privateMessage() }}</p>