@angular/router 21.0.0-next.7 → 21.0.0-next.9

package/fesm2022/_router-chunk.mjs

@@ -1,14 +1,14 @@
 /**
- * @license Angular v21.0.0-next.7
+ * @license Angular v21.0.0-next.9
  * (c) 2010-2025 Google LLC. https://angular.dev/
  * License: MIT
  */
 
 import { DOCUMENT, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ɵisPromise as _isPromise, ɵRuntimeError as _RuntimeError, Injectable, ɵisNgModule as _isNgModule, isStandalone, createEnvironmentInjector, InjectionToken, EventEmitter, input, inject, ViewContainerRef, ChangeDetectorRef, Directive, Input, Output, reflectComponentType, Component, ɵisInjectable as _isInjectable, runInInjectionContext, makeEnvironmentProviders, Compiler, NgModuleFactory, ɵresolveComponentResources as _resolveComponentResources, afterNextRender, signal, EnvironmentInjector, DestroyRef, untracked, ɵConsole as _Console, ɵPendingTasksInternal as _PendingTasksInternal, ɵINTERNAL_APPLICATION_ERROR_HANDLER as _INTERNAL_APPLICATION_ERROR_HANDLER } from '@angular/core';
-import { isObservable, from, of, BehaviorSubject, combineLatest, EmptyError, Observable, concat, defer, pipe, throwError, EMPTY, ConnectableObservable, Subject, Subscription } from 'rxjs';
-import { map, switchMap, take, startWith, filter, takeUntil, mergeMap, first, concatMap, tap, catchError, scan, defaultIfEmpty, last as last$1, takeLast, finalize, refCount } from 'rxjs/operators';
+import { ɵisPromise as _isPromise, ɵRuntimeError as _RuntimeError, Injectable, ɵisNgModule as _isNgModule, isStandalone, createEnvironmentInjector, InjectionToken, EventEmitter, input, inject, ViewContainerRef, ChangeDetectorRef, Directive, Input, Output, reflectComponentType, Component, ɵisInjectable as _isInjectable, runInInjectionContext, makeEnvironmentProviders, Compiler, NgModuleFactory, ɵresolveComponentResources as _resolveComponentResources, afterNextRender, signal, EnvironmentInjector, DestroyRef, untracked, ɵConsole as _Console, ɵPendingTasksInternal as _PendingTasksInternal, ɵINTERNAL_APPLICATION_ERROR_HANDLER as _INTERNAL_APPLICATION_ERROR_HANDLER, ɵformatRuntimeError as _formatRuntimeError } from '@angular/core';
+import { isObservable, from, of, BehaviorSubject, combineLatest, EmptyError, Observable, concat, defer, pipe, throwError, EMPTY, Subject, Subscription } from 'rxjs';
+import { first, map, switchMap, take, startWith, filter, takeUntil, mergeMap, concatMap, tap, catchError, scan, defaultIfEmpty, last as last$1, takeLast, finalize } from 'rxjs/operators';
 import * as i1 from '@angular/platform-browser';
 
 /**
@@ -102,6 +102,16 @@ function defaultUrlMatcher(segments, segmentGroup, route) {
     return { consumed: segments.slice(0, parts.length), posParams };
 }
 
+/** replacement for firstValueFrom in rxjs 7. We must support rxjs v6 so we cannot use it */
+function firstValueFrom(source) {
+    return new Promise((resolve, reject) => {
+        source.pipe(first()).subscribe({
+            next: (value) => resolve(value),
+            error: (err) => reject(err),
+        });
+    });
+}
+
 function shallowEqualArrays(a, b) {
     if (a.length !== b.length)
         return false;
@@ -167,6 +177,12 @@ function wrapIntoObservable(value) {
     }
     return of(value);
 }
+function wrapIntoPromise(value) {
+    if (isObservable(value)) {
+        return firstValueFrom(value);
+    }
+    return Promise.resolve(value);
+}
 
 const pathCompareMap = {
     'exact': equalSegmentGroups,
@@ -432,10 +448,10 @@ function mapChildrenIntoArray(segment, fn) {
  * @publicApi
  */
 class UrlSerializer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: UrlSerializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: UrlSerializer, providedIn: 'root', useFactory: () => new DefaultUrlSerializer() });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: UrlSerializer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: UrlSerializer, providedIn: 'root', useFactory: () => new DefaultUrlSerializer() });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: UrlSerializer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: UrlSerializer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useFactory: () => new DefaultUrlSerializer() }]
         }] });
@@ -736,7 +752,7 @@ class UrlParser {
             }
             const children = this.parseChildren();
             segments[outletName] =
-                Object.keys(children).length === 1
+                Object.keys(children).length === 1 && children[PRIMARY_OUTLET]
                     ? children[PRIMARY_OUTLET]
                     : new UrlSegmentGroup([], children);
             this.consumeOptional('//');
@@ -827,6 +843,9 @@ function isUrlTree(v) {
  * @param queryParams The query parameters for the `UrlTree`. `null` if the `UrlTree` does not have
  *     any query parameters.
  * @param fragment The fragment for the `UrlTree`. `null` if the `UrlTree` does not have a fragment.
+ * @param urlSerializer The `UrlSerializer` to use for handling query parameter normalization.
+ * You should provide your application's custom `UrlSerializer` if one is configured to parse and
+ * serialize query parameter values to and from objects other than strings/string arrays.
  *
  * @usageNotes
  *
@@ -864,9 +883,9 @@ function isUrlTree(v) {
  * createUrlTreeFromSnapshot(snapshot, ['../../team/44/user/22']);
  * ```
  */
-function createUrlTreeFromSnapshot(relativeTo, commands, queryParams = null, fragment = null) {
+function createUrlTreeFromSnapshot(relativeTo, commands, queryParams = null, fragment = null, urlSerializer = new DefaultUrlSerializer()) {
     const relativeToUrlSegmentGroup = createSegmentGroupFromRoute(relativeTo);
-    return createUrlTreeFromSegmentGroup(relativeToUrlSegmentGroup, commands, queryParams, fragment);
+    return createUrlTreeFromSegmentGroup(relativeToUrlSegmentGroup, commands, queryParams, fragment, urlSerializer);
 }
 function createSegmentGroupFromRoute(route) {
     let targetGroup;
@@ -886,7 +905,7 @@ function createSegmentGroupFromRoute(route) {
     const rootSegmentGroup = createRoot(rootCandidate);
     return targetGroup ?? rootSegmentGroup;
 }
-function createUrlTreeFromSegmentGroup(relativeTo, commands, queryParams, fragment) {
+function createUrlTreeFromSegmentGroup(relativeTo, commands, queryParams, fragment, urlSerializer) {
     let root = relativeTo;
     while (root.parent) {
         root = root.parent;
@@ -895,17 +914,17 @@ function createUrlTreeFromSegmentGroup(relativeTo, commands, queryParams, fragme
     // `UrlSegmentGroup`. All we need to do is update the `queryParams` and `fragment` without
     // applying any other logic.
     if (commands.length === 0) {
-        return tree(root, root, root, queryParams, fragment);
+        return tree(root, root, root, queryParams, fragment, urlSerializer);
     }
     const nav = computeNavigation(commands);
     if (nav.toRoot()) {
-        return tree(root, root, new UrlSegmentGroup([], {}), queryParams, fragment);
+        return tree(root, root, new UrlSegmentGroup([], {}), queryParams, fragment, urlSerializer);
     }
     const position = findStartingPositionForTargetGroup(nav, root, relativeTo);
     const newSegmentGroup = position.processChildren
         ? updateSegmentGroupChildren(position.segmentGroup, position.index, nav.commands)
         : updateSegmentGroup(position.segmentGroup, position.index, nav.commands);
-    return tree(root, position.segmentGroup, newSegmentGroup, queryParams, fragment);
+    return tree(root, position.segmentGroup, newSegmentGroup, queryParams, fragment, urlSerializer);
 }
 function isMatrixParams(command) {
     return typeof command === 'object' && command != null && !command.outlets && !command.segmentPath;
@@ -917,12 +936,39 @@ function isMatrixParams(command) {
 function isCommandWithOutlets(command) {
     return typeof command === 'object' && command != null && command.outlets;
 }
-function tree(oldRoot, oldSegmentGroup, newSegmentGroup, queryParams, fragment) {
-    let qp = {};
-    if (queryParams) {
-        Object.entries(queryParams).forEach(([name, value]) => {
-            qp[name] = Array.isArray(value) ? value.map((v) => `${v}`) : `${value}`;
-        });
+/**
+ * Normalizes a query parameter value by using the `UrlSerializer` to serialize then parse the value.
+ *
+ * This ensures that the value is consistent between parsing a URL in the browser on a fresh page load (or page refresh)
+ * and a navigation where the query parameter value is passed directly to the router.
+ *
+ * This also allows custom `UrlSerializer` implementations to define how query parameter values are represented
+ * in a `UrlTree`. Since `UrlSerializer` already has a `parse` that takes a string, it already has control
+ * over how a browser URL is parsed into a `UrlTree` on initial load/page refresh.
+ */
+function normalizeQueryParams(k, v, urlSerializer) {
+    // Hack for empty string query param, which, for whatever reason, happens
+    // in a test. Parsing drops empty key params (which might not really be necessary).
+    // It's probably really a test issue but I don't have the time to fix it...
+    k ||= 'ɵ';
+    const tree = new UrlTree();
+    tree.queryParams = { [k]: v };
+    return urlSerializer.parse(urlSerializer.serialize(tree)).queryParams[k];
+}
+function tree(oldRoot, oldSegmentGroup, newSegmentGroup, queryParams, fragment, urlSerializer) {
+    const qp = {};
+    for (const [key, value] of Object.entries(queryParams ?? {})) {
+        // This retains old behavior where each item in the array was stringified individually This
+        // helps remove special-case handling for empty and single-item arrays where the default
+        // serializer removes empty arrays when serialized then parsed or converts them to non-arrays
+        // for single-item arrays. Changing this could have breaking change implications. Prior code
+        // always returned arrays of strings for array inputs so tests, applications, serializers,
+        // etc. may only be set up to handle string arrays. We could consider changing this in the
+        // future to serialize the entire array as a single value. For now, this feels safer and is
+        // at least a step in the right direction.
+        qp[key] = Array.isArray(value)
+            ? value.map((v) => normalizeQueryParams(key, v, urlSerializer))
+            : normalizeQueryParams(key, value, urlSerializer);
     }
     let rootCandidate;
     if (oldRoot === oldSegmentGroup) {
@@ -2119,10 +2165,10 @@ class ChildrenOutletContexts {
     getContext(childName) {
         return this.contexts.get(childName) || null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: ChildrenOutletContexts, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: ChildrenOutletContexts, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: ChildrenOutletContexts, deps: [{ token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: ChildrenOutletContexts, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: ChildrenOutletContexts, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: ChildrenOutletContexts, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }] });
@@ -2909,10 +2955,10 @@ class RouterOutlet {
         this.inputBinder?.bindActivatedRouteToOutletComponent(this);
         this.activateEvents.emit(this.activated.instance);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouterOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0-next.7", type: RouterOutlet, isStandalone: true, selector: "router-outlet", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, routerOutletData: { classPropertyName: "routerOutletData", publicName: "routerOutletData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activateEvents: "activate", deactivateEvents: "deactivate", attachEvents: "attach", detachEvents: "detach" }, exportAs: ["outlet"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouterOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0-next.9", type: RouterOutlet, isStandalone: true, selector: "router-outlet", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, routerOutletData: { classPropertyName: "routerOutletData", publicName: "routerOutletData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activateEvents: "activate", deactivateEvents: "deactivate", attachEvents: "attach", detachEvents: "detach" }, exportAs: ["outlet"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouterOutlet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouterOutlet, decorators: [{
             type: Directive,
             args: [{
                     selector: 'router-outlet',
@@ -2932,7 +2978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7",
             }], detachEvents: [{
                 type: Output,
                 args: ['detach']
-            }] } });
+            }], routerOutletData: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerOutletData", required: false }] }] } });
 class OutletInjector {
     route;
     childContexts;
@@ -3022,10 +3068,10 @@ class RoutedComponentInputBinder {
         });
         this.outletDataSubscriptions.set(outlet, dataSubscription);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RoutedComponentInputBinder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RoutedComponentInputBinder });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RoutedComponentInputBinder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RoutedComponentInputBinder });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RoutedComponentInputBinder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RoutedComponentInputBinder, decorators: [{
             type: Injectable
         }] });
 
@@ -3039,10 +3085,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7",
  * to this `EmptyOutletComponent`.
  */
 class ɵEmptyOutletComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: ɵEmptyOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.7", type: ɵEmptyOutletComponent, isStandalone: true, selector: "ng-component", exportAs: ["emptyRouterOutlet"], ngImport: i0, template: `<router-outlet/>`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: ɵEmptyOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.9", type: ɵEmptyOutletComponent, isStandalone: true, selector: "ng-component", exportAs: ["emptyRouterOutlet"], ngImport: i0, template: `<router-outlet/>`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: ɵEmptyOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: ɵEmptyOutletComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<router-outlet/>`,
@@ -3734,16 +3780,6 @@ function runCanMatchGuards(injector, route, segments, urlSerializer, abortSignal
     return of(canMatchObservables).pipe(prioritizedGuardValue(), redirectIfUrlTree(urlSerializer));
 }
 
-/** replacement for firstValueFrom in rxjs 7. We must support rxjs v6 so we cannot use it */
-function firstValueFrom(source) {
-    return new Promise((resolve, reject) => {
-        source.pipe(first()).subscribe({
-            next: (value) => resolve(value),
-            error: (err) => reject(err),
-        });
-    });
-}
-
 let NoMatch$1 = class NoMatch extends Error {
     segmentGroup;
     constructor(segmentGroup) {
@@ -4023,9 +4059,9 @@ let Recognizer$1 = class Recognizer {
         const rootNode = new TreeNode(rootSnapshot, children);
         const routeState = new RouterStateSnapshot('', rootNode);
         const tree = createUrlTreeFromSnapshot(rootSnapshot, [], this.urlTree.queryParams, this.urlTree.fragment);
-        // https://github.com/angular/angular/issues/47307
         // Creating the tree stringifies the query params
-        // We don't want to do this here so reassign them to the original.
+        // We don't want to do this here to preserve pre-existing behavior
+        // so reassign them to the original.
         tree.queryParams = this.urlTree.queryParams;
         routeState.url = this.urlSerializer.serialize(tree);
         return { state: routeState, tree };
@@ -4226,10 +4262,7 @@ let Recognizer$1 = class Recognizer {
             }
             const shouldLoadResult = await firstValueFrom(runCanLoadGuards(injector, route, segments, this.urlSerializer, this.abortSignal));
             if (shouldLoadResult) {
-                const cfg = await firstValueFrom(this.configLoader.loadChildren(injector, route));
-                if (!cfg) {
-                    throw canLoadFails$1(route);
-                }
+                const cfg = await this.configLoader.loadChildren(injector, route);
                 route._loadedRoutes = cfg.routes;
                 route._loadedInjector = cfg.injector;
                 return cfg;
@@ -4667,7 +4700,7 @@ class Recognizer {
             }
             return runCanLoadGuards(injector, route, segments, this.urlSerializer).pipe(mergeMap((shouldLoadResult) => {
                 if (shouldLoadResult) {
-                    return this.configLoader.loadChildren(injector, route).pipe(tap((cfg) => {
+                    return from(this.configLoader.loadChildren(injector, route)).pipe(tap((cfg) => {
                         route._loadedRoutes = cfg.routes;
                         route._loadedInjector = cfg.injector;
                     }));
@@ -4899,10 +4932,10 @@ class TitleStrategy {
     getResolvedTitleForRoute(snapshot) {
         return snapshot.data[RouteTitleKey];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: TitleStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: TitleStrategy, providedIn: 'root', useFactory: () => inject(DefaultTitleStrategy) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: TitleStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: TitleStrategy, providedIn: 'root', useFactory: () => inject(DefaultTitleStrategy) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: TitleStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: TitleStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useFactory: () => inject(DefaultTitleStrategy) }]
         }] });
@@ -4926,10 +4959,10 @@ class DefaultTitleStrategy extends TitleStrategy {
             this.title.setTitle(title);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultTitleStrategy, deps: [{ token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultTitleStrategy, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultTitleStrategy, deps: [{ token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultTitleStrategy, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultTitleStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultTitleStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Title }] });
@@ -4961,28 +4994,32 @@ class RouterConfigLoader {
     onLoadStartListener;
     onLoadEndListener;
     compiler = inject(Compiler);
-    loadComponent(injector, route) {
+    async loadComponent(injector, route) {
         if (this.componentLoaders.get(route)) {
             return this.componentLoaders.get(route);
         }
         else if (route._loadedComponent) {
-            return of(route._loadedComponent);
+            return Promise.resolve(route._loadedComponent);
         }
         if (this.onLoadStartListener) {
             this.onLoadStartListener(route);
         }
-        const loadRunner = wrapIntoObservable(runInInjectionContext(injector, () => route.loadComponent())).pipe(map(maybeUnwrapDefaultExport), switchMap(maybeResolveResources), tap((component) => {
-            if (this.onLoadEndListener) {
-                this.onLoadEndListener(route);
+        const loader = (async () => {
+            try {
+                const loaded = await wrapIntoPromise(runInInjectionContext(injector, () => route.loadComponent()));
+                const component = await maybeResolveResources(maybeUnwrapDefaultExport(loaded));
+                if (this.onLoadEndListener) {
+                    this.onLoadEndListener(route);
+                }
+                (typeof ngDevMode === 'undefined' || ngDevMode) &&
+                    assertStandalone(route.path ?? '', component);
+                route._loadedComponent = component;
+                return component;
             }
-            (typeof ngDevMode === 'undefined' || ngDevMode) &&
-                assertStandalone(route.path ?? '', component);
-            route._loadedComponent = component;
-        }), finalize(() => {
-            this.componentLoaders.delete(route);
-        }));
-        // Use custom ConnectableObservable as share in runners pipe increasing the bundle size too much
-        const loader = new ConnectableObservable(loadRunner, () => new Subject()).pipe(refCount());
+            finally {
+                this.componentLoaders.delete(route);
+            }
+        })();
         this.componentLoaders.set(route, loader);
         return loader;
     }
@@ -4991,24 +5028,29 @@ class RouterConfigLoader {
             return this.childrenLoaders.get(route);
         }
         else if (route._loadedRoutes) {
-            return of({ routes: route._loadedRoutes, injector: route._loadedInjector });
+            return Promise.resolve({ routes: route._loadedRoutes, injector: route._loadedInjector });
         }
         if (this.onLoadStartListener) {
             this.onLoadStartListener(route);
         }
-        const moduleFactoryOrRoutes$ = loadChildren(route, this.compiler, parentInjector, this.onLoadEndListener);
-        const loadRunner = moduleFactoryOrRoutes$.pipe(finalize(() => {
-            this.childrenLoaders.delete(route);
-        }));
-        // Use custom ConnectableObservable as share in runners pipe increasing the bundle size too much
-        const loader = new ConnectableObservable(loadRunner, () => new Subject()).pipe(refCount());
+        const loader = (async () => {
+            try {
+                const result = await loadChildren(route, this.compiler, parentInjector, this.onLoadEndListener);
+                route._loadedRoutes = result.routes;
+                route._loadedInjector = result.injector;
+                return result;
+            }
+            finally {
+                this.childrenLoaders.delete(route);
+            }
+        })();
         this.childrenLoaders.set(route, loader);
         return loader;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouterConfigLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouterConfigLoader, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouterConfigLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouterConfigLoader, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouterConfigLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouterConfigLoader, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5020,40 +5062,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7",
  * in @angular-devkit/build-angular. If there are any updates to the contract here, it will require
  * an update to the extractor.
  */
-function loadChildren(route, compiler, parentInjector, onLoadEndListener) {
-    return wrapIntoObservable(runInInjectionContext(parentInjector, () => route.loadChildren())).pipe(map(maybeUnwrapDefaultExport), switchMap(maybeResolveResources), mergeMap((t) => {
-        if (t instanceof NgModuleFactory || Array.isArray(t)) {
-            return of(t);
-        }
-        else {
-            return from(compiler.compileModuleAsync(t));
-        }
-    }), map((factoryOrRoutes) => {
-        if (onLoadEndListener) {
-            onLoadEndListener(route);
-        }
-        // This injector comes from the `NgModuleRef` when lazy loading an `NgModule`. There is
-        // no injector associated with lazy loading a `Route` array.
-        let injector;
-        let rawRoutes;
-        let requireStandaloneComponents = false;
-        if (Array.isArray(factoryOrRoutes)) {
-            rawRoutes = factoryOrRoutes;
-            requireStandaloneComponents = true;
-        }
-        else {
-            injector = factoryOrRoutes.create(parentInjector).injector;
-            // When loading a module that doesn't provide `RouterModule.forChild()` preloader
-            // will get stuck in an infinite loop. The child module's Injector will look to
-            // its parent `Injector` when it doesn't find any ROUTES so it will return routes
-            // for it's parent module instead.
-            rawRoutes = injector.get(ROUTES, [], { optional: true, self: true }).flat();
-        }
-        const routes = rawRoutes.map(standardizeConfig);
-        (typeof ngDevMode === 'undefined' || ngDevMode) &&
-            validateConfig(routes, route.path, requireStandaloneComponents);
-        return { routes, injector };
-    }));
+async function loadChildren(route, compiler, parentInjector, onLoadEndListener) {
+    const loaded = await wrapIntoPromise(runInInjectionContext(parentInjector, () => route.loadChildren()));
+    const t = await maybeResolveResources(maybeUnwrapDefaultExport(loaded));
+    let factoryOrRoutes;
+    if (t instanceof NgModuleFactory || Array.isArray(t)) {
+        factoryOrRoutes = t;
+    }
+    else {
+        factoryOrRoutes = await compiler.compileModuleAsync(t);
+    }
+    if (onLoadEndListener) {
+        onLoadEndListener(route);
+    }
+    // This injector comes from the `NgModuleRef` when lazy loading an `NgModule`. There is
+    // no injector associated with lazy loading a `Route` array.
+    let injector;
+    let rawRoutes;
+    let requireStandaloneComponents = false;
+    if (Array.isArray(factoryOrRoutes)) {
+        rawRoutes = factoryOrRoutes;
+        requireStandaloneComponents = true;
+    }
+    else {
+        injector = factoryOrRoutes.create(parentInjector).injector;
+        // When loading a module that doesn't provide `RouterModule.forChild()` preloader
+        // will get stuck in an infinite loop. The child module's Injector will look to
+        // its parent `Injector` when it doesn't find any ROUTES so it will return routes
+        // for it's parent module instead.
+        rawRoutes = injector.get(ROUTES, [], { optional: true, self: true }).flat();
+    }
+    const routes = rawRoutes.map(standardizeConfig);
+    (typeof ngDevMode === 'undefined' || ngDevMode) &&
+        validateConfig(routes, route.path, requireStandaloneComponents);
+    return { routes, injector };
 }
 function isWrappedDefaultExport(value) {
     // We use `in` here with a string key `'default'`, because we expect `DefaultExport` objects to be
@@ -5068,7 +5110,7 @@ function maybeUnwrapDefaultExport(input) {
 }
 function maybeResolveResources(value) {
     // In JIT mode we usually resolve the resources of components on bootstrap, however
-    // that won't have happened for lazy-loaded components. Attempt to load any pending
+    // that won't have happened for lazy-loaded. Attempt to load any pending
     // resources again here.
     if ((typeof ngJitMode === 'undefined' || ngJitMode) && typeof fetch === 'function') {
         return _resolveComponentResources(fetch)
@@ -5078,7 +5120,7 @@ function maybeResolveResources(value) {
         })
             .then(() => value);
     }
-    return of(value);
+    return Promise.resolve(value);
 }
 
 /**
@@ -5089,10 +5131,10 @@ function maybeResolveResources(value) {
  * @publicApi
  */
 class UrlHandlingStrategy {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: UrlHandlingStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: UrlHandlingStrategy, providedIn: 'root', useFactory: () => inject(DefaultUrlHandlingStrategy) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: UrlHandlingStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: UrlHandlingStrategy, providedIn: 'root', useFactory: () => inject(DefaultUrlHandlingStrategy) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: UrlHandlingStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: UrlHandlingStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useFactory: () => inject(DefaultUrlHandlingStrategy) }]
         }] });
@@ -5109,10 +5151,10 @@ class DefaultUrlHandlingStrategy {
     merge(newUrlPart, wholeUrl) {
         return newUrlPart;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultUrlHandlingStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultUrlHandlingStrategy, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultUrlHandlingStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultUrlHandlingStrategy, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultUrlHandlingStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultUrlHandlingStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5409,18 +5451,24 @@ class NavigationTransitions {
             switchTap((t) => {
                 const loadComponents = (route) => {
                     const loaders = [];
-                    if (route.routeConfig?.loadComponent) {
+                    if (route.routeConfig?._loadedComponent) {
+                        route.component = route.routeConfig?._loadedComponent;
+                    }
+                    else if (route.routeConfig?.loadComponent) {
                         const injector = getClosestRouteInjector(route) ?? this.environmentInjector;
-                        loaders.push(this.configLoader.loadComponent(injector, route.routeConfig).pipe(tap((loadedComponent) => {
+                        loaders.push(this.configLoader
+                            .loadComponent(injector, route.routeConfig)
+                            .then((loadedComponent) => {
                             route.component = loadedComponent;
-                        }), map(() => void 0)));
+                        }));
                     }
                     for (const child of route.children) {
                         loaders.push(...loadComponents(child));
                     }
                     return loaders;
                 };
-                return combineLatest(loadComponents(t.targetSnapshot.root)).pipe(defaultIfEmpty(null), take(1));
+                const loaders = loadComponents(t.targetSnapshot.root);
+                return loaders.length === 0 ? of(t) : from(Promise.all(loaders).then(() => t));
             }), switchTap(() => this.afterPreactivation()), switchMap(() => {
                 const { currentSnapshot, targetSnapshot } = overallTransitionState;
                 const viewTransitionStarted = this.createViewTransition?.(this.environmentInjector, currentSnapshot.root, targetSnapshot.root);
@@ -5587,10 +5635,10 @@ class NavigationTransitions {
         return (currentBrowserUrl.toString() !== targetBrowserUrl?.toString() &&
             !currentNavigation?.extras.skipLocationChange);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: NavigationTransitions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: NavigationTransitions, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: NavigationTransitions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: NavigationTransitions, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: NavigationTransitions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: NavigationTransitions, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5606,10 +5654,10 @@ function isBrowserTriggeredNavigation(source) {
  * @publicApi
  */
 class RouteReuseStrategy {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouteReuseStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouteReuseStrategy, providedIn: 'root', useFactory: () => inject(DefaultRouteReuseStrategy) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouteReuseStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouteReuseStrategy, providedIn: 'root', useFactory: () => inject(DefaultRouteReuseStrategy) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: RouteReuseStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: RouteReuseStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useFactory: () => inject(DefaultRouteReuseStrategy) }]
         }] });
@@ -5660,10 +5708,10 @@ class BaseRouteReuseStrategy {
     }
 }
 class DefaultRouteReuseStrategy extends BaseRouteReuseStrategy {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultRouteReuseStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultRouteReuseStrategy, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultRouteReuseStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultRouteReuseStrategy, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: DefaultRouteReuseStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: DefaultRouteReuseStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5762,10 +5810,10 @@ class StateManager {
         // when merging, such as the query params so they are not lost on a refresh.
         this.rawUrlTree = this.urlHandlingStrategy.merge(this.currentUrlTree, finalUrl ?? this.rawUrlTree);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: StateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: StateManager, providedIn: 'root', useFactory: () => inject(HistoryStateManager) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: StateManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: StateManager, providedIn: 'root', useFactory: () => inject(HistoryStateManager) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: StateManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: StateManager, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root', useFactory: () => inject(HistoryStateManager) }]
         }] });
@@ -5897,10 +5945,10 @@ class HistoryStateManager extends StateManager {
         }
         return { navigationId };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: HistoryStateManager, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: HistoryStateManager, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: HistoryStateManager, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: HistoryStateManager, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: HistoryStateManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: HistoryStateManager, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6324,7 +6372,7 @@ class Router {
             }
             relativeToUrlSegmentGroup = this.currentUrlTree.root;
         }
-        return createUrlTreeFromSegmentGroup(relativeToUrlSegmentGroup, commands, q, f ?? null);
+        return createUrlTreeFromSegmentGroup(relativeToUrlSegmentGroup, commands, q, f ?? null, this.urlSerializer);
     }
     /**
      * Navigates to a view using an absolute route path.
@@ -6400,7 +6448,8 @@ class Router {
         try {
             return this.urlSerializer.parse(url);
         }
-        catch {
+        catch (e) {
+            this.console.warn(_formatRuntimeError(4018 /* RuntimeErrorCode.ERROR_PARSING_URL */, ngDevMode && `Error parsing URL ${url}. Falling back to '/' instead. \n` + e));
             return this.urlSerializer.parse('/');
         }
     }
@@ -6473,10 +6522,10 @@ class Router {
             return Promise.reject(e);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: Router, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: Router, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: Router, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: Router, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.7", ngImport: i0, type: Router, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.9", ngImport: i0, type: Router, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });