fix: ensure cd is ran on route change if routed scene is used

Author: nartc

apps/example/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { extend, NgtCanvas, NgtRoutedScene } from 'angular-three';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { extend } from 'angular-three';
 import * as THREE from 'three';
 
 extend(THREE);
@@ -11,15 +11,17 @@ extend(THREE);
     template: `
         <ul>
             <li>
-                <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Red</a>
+                <a routerLink="/routed" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Red</a>
             </li>
             <li>
-                <a routerLink="/blue" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Blue</a>
+                <a routerLink="/routed/blue" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+                    Blue
+                </a>
             </li>
         </ul>
-        <ngt-canvas [sceneGraph]="scene" />
+        <router-outlet />
     `,
-    imports: [NgtCanvas, RouterLink, RouterLinkActive],
+    imports: [RouterOutlet, RouterLink, RouterLinkActive],
     styles: [
         `
             ul {
@@ -40,6 +42,4 @@ extend(THREE);
         `,
     ],
 })
-export class AppComponent {
-    readonly scene = NgtRoutedScene;
-}
+export class AppComponent {}

apps/example/src/app/blue-scene.component.ts

@@ -0,0 +1,33 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
+import { injectBeforeRender, NgtStore } from 'angular-three';
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-spot-light [position]="5" />
+        <ngt-point-light [position]="-5" />
+
+        <ngt-mesh #cube>
+            <ngt-icosahedron-geometry />
+            <ngt-mesh-standard-material color="blue" />
+        </ngt-mesh>
+    `,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export default class BlueScene {
+    @ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
+
+    readonly store = inject(NgtStore);
+
+    constructor() {
+        injectBeforeRender(({ clock }) => {
+            this.cube.nativeElement.rotation.x = clock.elapsedTime;
+            this.cube.nativeElement.rotation.y = clock.elapsedTime;
+        });
+        console.log(this.store.get('scene'));
+    }
+
+    ngOnDestroy() {
+        console.log('blue destroyed');
+    }
+}

apps/example/src/app/scene/blue-scene.component.ts

@@ -1,23 +1,33 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';
-import { injectBeforeRender } from 'angular-three';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, ViewChild } from '@angular/core';
+import { injectBeforeRender, NgtStore } from 'angular-three';
 
 @Component({
     standalone: true,
     template: `
+        <ngt-point-light [position]="5" />
+        <ngt-spot-light [position]="-5" />
+
         <ngt-mesh #cube>
             <ngt-box-geometry />
-            <ngt-mesh-basic-material color="red" />
+            <ngt-mesh-standard-material color="red" />
         </ngt-mesh>
     `,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export default class RedScene {
     @ViewChild('cube', { static: true }) cube!: ElementRef<THREE.Mesh>;
 
+    readonly store = inject(NgtStore);
+
     constructor() {
         injectBeforeRender(({ clock }) => {
             this.cube.nativeElement.rotation.x = clock.elapsedTime;
             this.cube.nativeElement.rotation.y = clock.elapsedTime;
         });
+        console.log(this.store.get('scene'));
+    }
+
+    ngOnDestroy() {
+        console.log('red destroyed');
     }
 }

apps/example/src/app/red-scene.component.ts renamed to apps/example/src/app/scene/red-scene.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { NgtCanvas, NgtRoutedScene } from 'angular-three';
+
+@Component({
+    standalone: true,
+    template: ` <ngt-canvas [sceneGraph]="scene" /> `,
+    imports: [NgtCanvas],
+})
+export default class Scene {
+    readonly scene = NgtRoutedScene;
+}

apps/example/src/app/scene/scene.component.ts

@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+    {
+        path: '',
+        loadComponent: () => import('./red-scene.component'),
+    },
+    {
+        path: 'blue',
+        loadComponent: () => import('./blue-scene.component'),
+    },
+];
+
+export default routes;

apps/example/src/app/scene/scene.routes.ts

@@ -1,18 +1,23 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withDebugTracing } from '@angular/router';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
     providers: [
-        provideRouter([
-            {
-                path: '',
-                loadComponent: () => import('./app/red-scene.component'),
-            },
-            {
-                path: 'blue',
-                loadComponent: () => import('./app/blue-scene.component'),
-            },
-        ]),
+        provideRouter(
+            [
+                {
+                    path: '',
+                    redirectTo: 'routed',
+                    pathMatch: 'full',
+                },
+                {
+                    path: 'routed',
+                    loadComponent: () => import('./app/scene/scene.component'),
+                    loadChildren: () => import('./app/scene/scene.routes'),
+                },
+            ],
+            withDebugTracing()
+        ),
     ],
 }).catch((err) => console.error(err));

apps/example/src/main.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { ActivationEnd, Router, RouterOutlet } from '@angular/router';
+import { filter, takeUntil } from 'rxjs';
+import { injectNgtDestroy } from './di/destroy';
 
 @Component({
     standalone: true,
@@ -9,4 +11,16 @@ import { RouterOutlet } from '@angular/router';
 })
 export class NgtRoutedScene {
     static isRoutedScene = true;
+
+    constructor(router: Router) {
+        const { destroy$, cdr } = injectNgtDestroy();
+        router.events
+            .pipe(
+                filter((event) => event instanceof ActivationEnd),
+                takeUntil(destroy$)
+            )
+            .subscribe(() => {
+                cdr.detectChanges();
+            });
+    }
 }