eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Content-only page transitions + dependency security overrides

Browse Source 
- Persistent ShellComponent hosts the router-outlet so header/footer mount once
  (no re-mount flash); pages nest under a shell route. page-shell is now
  content-only; page-layout removed.
- Native withViewTransitions() cross-fades only the routed content (chrome gets
  stable view-transition-names); respects prefers-reduced-motion.
- package.json overrides pin patched transitive dev/build deps: npm audit 16
  (3 high/9 mod/4 low) -> 5 low; shipped app stays at 0 (npm audit --omit=dev).
  No Angular downgrade, no breaking Babel 8 bump. jsdom 28 -> 29.
- README: page-transitions section + honest dependency-security note.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-06-25 15:46:42 +02:00
parent f1f4f982a6
commit 4e14152758
9 changed files with 202 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/app.routes.ts
View File

@@ -1,10 +1,17 @@
import { Routes } from '@angular/router';
import { ShellComponent } from './templates/shell/shell.component';
export const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'login', loadComponent: () => import('./pages/login/login.page').then(m => m.LoginPage) },
{ path: 'dashboard', loadComponent: () => import('./pages/dashboard/dashboard.page').then(m => m.DashboardPage) },
{ path: 'registratie', loadComponent: () => import('./pages/registration-detail/registration-detail.page').then(m => m.RegistrationDetailPage) },
{ path: 'herregistratie', loadComponent: () => import('./pages/herregistratie/herregistratie.page').then(m => m.HerregistratiePage) },
{ path: '**', redirectTo: 'login' },
{
path: '',
component: ShellComponent, // persistent header/footer; only children swap
children: [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'login', loadComponent: () => import('./pages/login/login.page').then(m => m.LoginPage) },
{ path: 'dashboard', loadComponent: () => import('./pages/dashboard/dashboard.page').then(m => m.DashboardPage) },
{ path: 'registratie', loadComponent: () => import('./pages/registration-detail/registration-detail.page').then(m => m.RegistrationDetailPage) },
{ path: 'herregistratie', loadComponent: () => import('./pages/herregistratie/herregistratie.page').then(m => m.HerregistratiePage) },
{ path: '**', redirectTo: 'login' },
],
},
];