You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blogs/series-6-ai-app-features/6.3-angular-ai-chat-widget.md
+4-13Lines changed: 4 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,6 @@ This article is part of the **AngularNetTutorial** series. The full-stack tutori
19
19
***Angular nested child routes** — How to register a `{ path: 'ai', children: [...] }` block so four pages share the same `/ai/*` URL prefix
20
20
***Sidebar sub-menu in ng-matero** — Adding a `"type": "sub"` entry with children to `menu.json` and translation keys in `en-US.json`
21
21
***One component, one responsibility** — Why extracting each AI feature into its own standalone component is better than growing a single tabbed component
22
-
***Backward-compatibility redirect** — How `{ path: 'ai-chat', redirectTo: 'ai/assistant' }` keeps old bookmarks working after a route rename
23
22
***`AiService`** — A lightweight, focused service that calls the AI endpoints without inheriting the base CRUD service
24
23
25
24
---
@@ -317,7 +316,7 @@ See the repository for the full files in:
317
316
318
317
The key change from the old approach is **nesting** the four AI routes under a parent `ai` path.
319
318
320
-
**`src/app/app.routes.ts`** — replace the old flat `ai-chat` route:
319
+
**`src/app/app.routes.ts`** — add the nested `ai` route group:
**Why a `children` block instead of flat routes?**
343
341
344
342
Flat routes like `{ path: 'ai/assistant', component: ... }` would work for navigation but the URL structure would not be understood by the ng-matero sidebar. The sidebar resolves `route: "assistant"` relative to the parent `route: "ai"` — the routes file must mirror this nesting for the active-route highlighting to work correctly.
345
343
346
-
**Why keep the backward-compat redirect?**
347
-
348
-
Any bookmarks, Playwright tests, or external links pointing to `/ai-chat` will silently redirect to `/ai/assistant` without a 404 or broken navigation.
349
-
350
344
---
351
345
352
346
### Step 5: Add the Sidebar Sub-Menu
353
347
354
-
**`public/data/menu.json`** — replace the old `ai-chat` entry:
348
+
**`public/data/menu.json`** — add the AI sub-menu group:
355
349
356
350
```json
357
351
{
@@ -425,9 +419,6 @@ Click a suggestion chip — *"Which department has the most employees?"* — and
425
419
426
420

427
421
428
-
**Test the backward-compat redirect:**
429
-
Navigate to `http://localhost:4200/ai-chat` — it should silently redirect to `/ai/assistant`.
430
-
431
422
**Test the disabled state:**
432
423
Set `aiEnabled: false` → hot-reload → all four pages show the info banner.
433
424
@@ -444,7 +435,7 @@ src/app/
444
435
│ └── ai-vector-search/ ← semantic position search (Article 6.6)
445
436
├── services/api/
446
437
│ └── ai.service.ts ← AiService (4 methods)
447
-
└── app.routes.ts ← nested ai children + backward-compat redirect
438
+
└── app.routes.ts ← nested ai children
448
439
449
440
public/
450
441
├── data/menu.json ← ai sub-menu entry with 4 children
@@ -466,7 +457,7 @@ public/
466
457
* ✅ Four focused pages — each component is ~80 lines, easy to read and test independently
0 commit comments