Fix preloading in standalone applications with nested routes

projects/ngx-quicklink/package.json

@@ -1,5 +1,11 @@
 {
   "name": "ngx-quicklink",
+  "homepage": "https://github.com/mgechev/ngx-quicklink",
+  "bugs": "https://github.com/mgechev/ngx-quicklink/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mgechev/ngx-quicklink.git"
+  },
   "version": "0.4.1",
   "peerDependencies": {
     "@angular/common": "^15.0.0",
@@ -8,4 +14,4 @@
   "dependencies": {
     "tslib": "^2.3.0"
   }
-}
+}

projects/ngx-quicklink/src/lib/quicklink-strategy.service.ts

@@ -53,13 +53,15 @@ const findPath = (config: Route[], route: Route): string => {
       if (route && route.children) {
         children = children.concat(route.children);
       }
-      children.forEach((r: Route) => {
-        if (visited.has(r)) return;
-        parent.set(r, el);
-        config.push(r);
-      });
     }
+
+    children.forEach((r) => {
+      if (visited.has(r)) return;
+      parent.set(r, el);
+      config.push(r);
+    });
   }
+
   let path = '';
   let current: Route | undefined = route;
 

projects/standalone-app/src/app/about.component.ts

@@ -1,9 +1,16 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { QuicklinkDirective } from 'ngx-quicklink';
 
 @Component({
   standalone: true,
+  imports: [RouterModule, QuicklinkDirective],
   template: `
     About component
+
+    <a [routerLink]="['/', 'about', 'sub']">SUB</a>
+
+    <router-outlet></router-outlet>
   `,
 })
 export default class AboutComponent {}

projects/standalone-app/src/app/app.component.less

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+  padding: 24px;
+}
+
+.navigation {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  margin-bottom: 24px;
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+}
+
+.side {
+  position: absolute;
+  right: 0;
+  width: 20vw;
+  border: solid 1px;
+}

projects/standalone-app/src/app/app.component.ts

@@ -1,12 +1,44 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { QuicklinkDirective } from 'ngx-quicklink';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterModule],
+  styleUrls: ['./app.component.less'],
+  imports: [RouterModule, QuicklinkDirective],
   template: `
+    <h1>Standalone Example</h1>
+
+    <div class="navigation">
+      <a routerLink="['/']">Root</a>
+      <a [routerLink]="primaryRoutePath">Home</a>
+      <a [routerLink]="['/', 'about']">About</a>
+      <a [routerLink]="secondaryRoutePath">Social</a>
+    </div>
+
     <router-outlet></router-outlet>
+
+    <div class="side">
+      Side Outlet
+      <router-outlet name="side"></router-outlet>
+    </div>
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+  primaryRoutePath: any[] = [];
+  secondaryRoutePath: any[] = [];
+
+  constructor() {
+    // The timeouts are used to demonstrate dynamically preloading routes
+    // Check the network tab to see this in action!
+    setTimeout(() => {
+      this.primaryRoutePath = ['/', 'home'];
+      console.log('Home route added');
+    }, 3000);
+    setTimeout(() => {
+      this.secondaryRoutePath = ['/', { outlets: { side: ['social'] } }];
+      console.log('Social route added');
+    }, 2000);
+  }
+}

projects/standalone-app/src/app/home.component.ts

@@ -5,18 +5,6 @@ import { QuicklinkDirective } from 'ngx-quicklink';
 @Component({
   standalone: true,
   imports: [RouterLink, QuicklinkDirective],
-  template: `
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <br><br><br><br><br><br><br><br><br><br><br>
-    <a routerLink="/about">About</a>
-  `,
+  template: ` Home Component `,
 })
-export default class HomeComponent {
-}
+export default class HomeComponent {}

projects/standalone-app/src/app/root.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { QuicklinkDirective } from 'ngx-quicklink';
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, QuicklinkDirective],
+  template: ` Root Component `,
+})
+export default class RootComponent {}

projects/standalone-app/src/app/social.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { QuicklinkDirective } from 'ngx-quicklink';
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, QuicklinkDirective],
+  template: ` Social Component `,
+})
+export default class SocialComponent {}

projects/standalone-app/src/app/subfolder/subcomponent.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  imports: [],
+  template: ` SUB COMPONENT `,
+})
+export default class SubComponent {}

projects/standalone-app/src/main.ts

@@ -12,12 +12,32 @@ bootstrapApplication(AppComponent, {
         {
           path: 'about',
           loadComponent: () => import('./app/about.component'),
+          children: [
+            {
+              path: 'sub',
+              loadComponent: () => import('./app/subfolder/subcomponent'),
+            },
+          ],
         },
         {
-          path: '',
+          path: 'home',
           pathMatch: 'full',
           loadComponent: () => import('./app/home.component'),
         },
+        {
+          path: 'social',
+          loadComponent: () => import('./app/social.component'),
+          outlet: 'side',
+        },
+        {
+          path: 'root',
+          pathMatch: 'full',
+          loadComponent: () => import('./app/root.component'),
+        },
+        {
+          path: '**',
+          redirectTo: 'root',
+        },
       ],
       withPreloading(QuicklinkStrategy)
     ),

projects/standalone-app/src/styles.css

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}

src/styles.css

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}