@angular/router 14.0.0-next.9 → 14.0.0-rc.2

package/fesm2020/router.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v14.0.0-next.9
+ * @license Angular v14.0.0-rc.2
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -7,9 +7,9 @@
 import * as i3 from '@angular/common';
 import { Location, LocationStrategy, PlatformLocation, APP_BASE_HREF, ViewportScroller, HashLocationStrategy, PathLocationStrategy, LOCATION_INITIALIZED } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ɵisObservable, ɵisPromise, EventEmitter, Directive, Attribute, Output, Component, NgModuleRef, InjectionToken, InjectFlags, NgModuleFactory, ɵConsole, NgZone, Injectable, ɵcoerceToBoolean, Input, HostListener, HostBinding, Optional, ContentChildren, Injector, Compiler, NgProbeToken, ANALYZE_FOR_ENTRY_COMPONENTS, SkipSelf, Inject, APP_INITIALIZER, APP_BOOTSTRAP_LISTENER, NgModule, ApplicationRef, Version } from '@angular/core';
+import { ɵisObservable, ɵisPromise, EventEmitter, Directive, Attribute, Output, Component, createEnvironmentInjector, ɵisStandalone, ComponentFactoryResolver, InjectionToken, InjectFlags, NgModuleFactory, Injectable, NgModuleRef, ɵConsole, NgZone, ɵcoerceToBoolean, Input, HostListener, HostBinding, Optional, ContentChildren, Injector, Compiler, NgProbeToken, ANALYZE_FOR_ENTRY_COMPONENTS, SkipSelf, Inject, APP_INITIALIZER, APP_BOOTSTRAP_LISTENER, NgModule, ApplicationRef, Version } from '@angular/core';
 import { from, of, BehaviorSubject, combineLatest, throwError, EmptyError, concat, defer, Observable, EMPTY, ConnectableObservable, Subject } from 'rxjs';
-import { map, switchMap, take, startWith, scan, filter, catchError, concatMap, last as last$1, first, mergeMap, tap, takeLast, refCount, finalize, mergeAll } from 'rxjs/operators';
+import { map, switchMap, take, startWith, scan, filter, catchError, concatMap, last as last$1, first, mergeMap, tap, takeLast, mapTo, finalize, refCount, defaultIfEmpty, mergeAll } from 'rxjs/operators';
 import * as i1 from '@angular/platform-browser';
 
 /**
@@ -69,6 +69,7 @@ class NavigationStart extends RouterEvent {
     /** @docsNotRequired */
     restoredState = null) {
         super(id, url);
+        this.type = 0 /* EventType.NavigationStart */;
         this.navigationTrigger = navigationTrigger;
         this.restoredState = restoredState;
     }
@@ -96,6 +97,7 @@ class NavigationEnd extends RouterEvent {
     urlAfterRedirects) {
         super(id, url);
         this.urlAfterRedirects = urlAfterRedirects;
+        this.type = 1 /* EventType.NavigationEnd */;
     }
     /** @docsNotRequired */
     toString() {
@@ -123,6 +125,7 @@ class NavigationCancel extends RouterEvent {
     reason) {
         super(id, url);
         this.reason = reason;
+        this.type = 2 /* EventType.NavigationCancel */;
     }
     /** @docsNotRequired */
     toString() {
@@ -148,6 +151,7 @@ class NavigationError extends RouterEvent {
     error) {
         super(id, url);
         this.error = error;
+        this.type = 3 /* EventType.NavigationError */;
     }
     /** @docsNotRequired */
     toString() {
@@ -172,6 +176,7 @@ class RoutesRecognized extends RouterEvent {
         super(id, url);
         this.urlAfterRedirects = urlAfterRedirects;
         this.state = state;
+        this.type = 4 /* EventType.RoutesRecognized */;
     }
     /** @docsNotRequired */
     toString() {
@@ -198,6 +203,7 @@ class GuardsCheckStart extends RouterEvent {
         super(id, url);
         this.urlAfterRedirects = urlAfterRedirects;
         this.state = state;
+        this.type = 7 /* EventType.GuardsCheckStart */;
     }
     toString() {
         return `GuardsCheckStart(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
@@ -226,6 +232,7 @@ class GuardsCheckEnd extends RouterEvent {
         this.urlAfterRedirects = urlAfterRedirects;
         this.state = state;
         this.shouldActivate = shouldActivate;
+        this.type = 8 /* EventType.GuardsCheckEnd */;
     }
     toString() {
         return `GuardsCheckEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state}, shouldActivate: ${this.shouldActivate})`;
@@ -254,6 +261,7 @@ class ResolveStart extends RouterEvent {
         super(id, url);
         this.urlAfterRedirects = urlAfterRedirects;
         this.state = state;
+        this.type = 5 /* EventType.ResolveStart */;
     }
     toString() {
         return `ResolveStart(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
@@ -278,6 +286,7 @@ class ResolveEnd extends RouterEvent {
         super(id, url);
         this.urlAfterRedirects = urlAfterRedirects;
         this.state = state;
+        this.type = 6 /* EventType.ResolveEnd */;
     }
     toString() {
         return `ResolveEnd(id: ${this.id}, url: '${this.url}', urlAfterRedirects: '${this.urlAfterRedirects}', state: ${this.state})`;
@@ -295,6 +304,7 @@ class RouteConfigLoadStart {
     /** @docsNotRequired */
     route) {
         this.route = route;
+        this.type = 9 /* EventType.RouteConfigLoadStart */;
     }
     toString() {
         return `RouteConfigLoadStart(path: ${this.route.path})`;
@@ -312,6 +322,7 @@ class RouteConfigLoadEnd {
     /** @docsNotRequired */
     route) {
         this.route = route;
+        this.type = 10 /* EventType.RouteConfigLoadEnd */;
     }
     toString() {
         return `RouteConfigLoadEnd(path: ${this.route.path})`;
@@ -330,6 +341,7 @@ class ChildActivationStart {
     /** @docsNotRequired */
     snapshot) {
         this.snapshot = snapshot;
+        this.type = 11 /* EventType.ChildActivationStart */;
     }
     toString() {
         const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
@@ -348,6 +360,7 @@ class ChildActivationEnd {
     /** @docsNotRequired */
     snapshot) {
         this.snapshot = snapshot;
+        this.type = 12 /* EventType.ChildActivationEnd */;
     }
     toString() {
         const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
@@ -367,6 +380,7 @@ class ActivationStart {
     /** @docsNotRequired */
     snapshot) {
         this.snapshot = snapshot;
+        this.type = 13 /* EventType.ActivationStart */;
     }
     toString() {
         const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
@@ -386,6 +400,7 @@ class ActivationEnd {
     /** @docsNotRequired */
     snapshot) {
         this.snapshot = snapshot;
+        this.type = 14 /* EventType.ActivationEnd */;
     }
     toString() {
         const path = this.snapshot.routeConfig && this.snapshot.routeConfig.path || '';
@@ -408,12 +423,53 @@ class Scroll {
         this.routerEvent = routerEvent;
         this.position = position;
         this.anchor = anchor;
+        this.type = 15 /* EventType.Scroll */;
     }
     toString() {
         const pos = this.position ? `${this.position[0]}, ${this.position[1]}` : null;
         return `Scroll(anchor: '${this.anchor}', position: '${pos}')`;
     }
 }
+function stringifyEvent(routerEvent) {
+    if (!('type' in routerEvent)) {
+        return `Unknown Router Event: ${routerEvent.constructor.name}`;
+    }
+    switch (routerEvent.type) {
+        case 14 /* EventType.ActivationEnd */:
+            return `ActivationEnd(path: '${routerEvent.snapshot.routeConfig?.path || ''}')`;
+        case 13 /* EventType.ActivationStart */:
+            return `ActivationStart(path: '${routerEvent.snapshot.routeConfig?.path || ''}')`;
+        case 12 /* EventType.ChildActivationEnd */:
+            return `ChildActivationEnd(path: '${routerEvent.snapshot.routeConfig?.path || ''}')`;
+        case 11 /* EventType.ChildActivationStart */:
+            return `ChildActivationStart(path: '${routerEvent.snapshot.routeConfig?.path || ''}')`;
+        case 8 /* EventType.GuardsCheckEnd */:
+            return `GuardsCheckEnd(id: ${routerEvent.id}, url: '${routerEvent.url}', urlAfterRedirects: '${routerEvent.urlAfterRedirects}', state: ${routerEvent.state}, shouldActivate: ${routerEvent.shouldActivate})`;
+        case 7 /* EventType.GuardsCheckStart */:
+            return `GuardsCheckStart(id: ${routerEvent.id}, url: '${routerEvent.url}', urlAfterRedirects: '${routerEvent.urlAfterRedirects}', state: ${routerEvent.state})`;
+        case 2 /* EventType.NavigationCancel */:
+            return `NavigationCancel(id: ${routerEvent.id}, url: '${routerEvent.url}')`;
+        case 1 /* EventType.NavigationEnd */:
+            return `NavigationEnd(id: ${routerEvent.id}, url: '${routerEvent.url}', urlAfterRedirects: '${routerEvent.urlAfterRedirects}')`;
+        case 3 /* EventType.NavigationError */:
+            return `NavigationError(id: ${routerEvent.id}, url: '${routerEvent.url}', error: ${routerEvent.error})`;
+        case 0 /* EventType.NavigationStart */:
+            return `NavigationStart(id: ${routerEvent.id}, url: '${routerEvent.url}')`;
+        case 6 /* EventType.ResolveEnd */:
+            return `ResolveEnd(id: ${routerEvent.id}, url: '${routerEvent.url}', urlAfterRedirects: '${routerEvent.urlAfterRedirects}', state: ${routerEvent.state})`;
+        case 5 /* EventType.ResolveStart */:
+            return `ResolveStart(id: ${routerEvent.id}, url: '${routerEvent.url}', urlAfterRedirects: '${routerEvent.urlAfterRedirects}', state: ${routerEvent.state})`;
+        case 10 /* EventType.RouteConfigLoadEnd */:
+            return `RouteConfigLoadEnd(path: ${routerEvent.route.path})`;
+        case 9 /* EventType.RouteConfigLoadStart */:
+            return `RouteConfigLoadStart(path: ${routerEvent.route.path})`;
+        case 4 /* EventType.RoutesRecognized */:
+            return `RoutesRecognized(id: ${routerEvent.id}, url: '${routerEvent.url}', urlAfterRedirects: '${routerEvent.urlAfterRedirects}', state: ${routerEvent.state})`;
+        case 15 /* EventType.Scroll */:
+            const pos = routerEvent.position ? `${routerEvent.position[0]}, ${routerEvent.position[1]}` : null;
+            return `Scroll(anchor: '${routerEvent.anchor}', position: '${pos}')`;
+    }
+}
 
 /**
  * @license
@@ -1362,7 +1418,6 @@ class ActivatedRoute {
     /** The outlet name of the route, a constant. */
     outlet, 
     /** The component of the route, a constant. */
-    // TODO(vsavkin): remove |string
     component, futureSnapshot) {
         this.url = url;
         this.params = params;
@@ -1456,7 +1511,7 @@ function flattenInherited(pathFromRoot) {
     return pathFromRoot.reduce((res, curr) => {
         const params = { ...res.params, ...curr.params };
         const data = { ...res.data, ...curr.data };
-        const resolve = { ...res.resolve, ...curr._resolvedData };
+        const resolve = { ...curr.data, ...res.resolve, ...curr.routeConfig?.data, ...curr._resolvedData };
         return { params, data, resolve };
     }, { params: {}, data: {}, resolve: {} });
 }
@@ -1517,7 +1572,7 @@ class ActivatedRouteSnapshot {
     /** The outlet name of the route */
     outlet, 
     /** The component of the route */
-    component, routeConfig, urlSegment, lastPathIndex, resolve) {
+    component, routeConfig, urlSegment, lastPathIndex, resolve, correctedLastPathIndex) {
         this.url = url;
         this.params = params;
         this.queryParams = queryParams;
@@ -1528,6 +1583,7 @@ class ActivatedRouteSnapshot {
         this.routeConfig = routeConfig;
         this._urlSegment = urlSegment;
         this._lastPathIndex = lastPathIndex;
+        this._correctedLastPathIndex = correctedLastPathIndex ?? lastPathIndex;
         this._resolve = resolve;
     }
     /** The root of the router state */
@@ -1719,11 +1775,26 @@ function createUrlTree(route, urlTree, commands, queryParams, fragment) {
     if (nav.toRoot()) {
         return tree(urlTree.root, urlTree.root, new UrlSegmentGroup([], {}), queryParams, fragment);
     }
-    const startingPosition = findStartingPosition(nav, urlTree, route);
-    const segmentGroup = startingPosition.processChildren ?
-        updateSegmentGroupChildren(startingPosition.segmentGroup, startingPosition.index, nav.commands) :
-        updateSegmentGroup(startingPosition.segmentGroup, startingPosition.index, nav.commands);
-    return tree(urlTree.root, startingPosition.segmentGroup, segmentGroup, queryParams, fragment);
+    function createTreeUsingPathIndex(lastPathIndex) {
+        const startingPosition = findStartingPosition(nav, urlTree, route.snapshot?._urlSegment, lastPathIndex);
+        const segmentGroup = startingPosition.processChildren ?
+            updateSegmentGroupChildren(startingPosition.segmentGroup, startingPosition.index, nav.commands) :
+            updateSegmentGroup(startingPosition.segmentGroup, startingPosition.index, nav.commands);
+        return tree(urlTree.root, startingPosition.segmentGroup, segmentGroup, queryParams, fragment);
+    }
+    // Note: The types should disallow `snapshot` from being `undefined` but due to test mocks, this
+    // may be the case. Since we try to access it at an earlier point before the refactor to add the
+    // warning for `relativeLinkResolution: 'legacy'`, this may cause failures in tests where it
+    // didn't before.
+    const result = createTreeUsingPathIndex(route.snapshot?._lastPathIndex);
+    // Check if application is relying on `relativeLinkResolution: 'legacy'`
+    if (typeof ngDevMode === 'undefined' || !!ngDevMode) {
+        const correctedResult = createTreeUsingPathIndex(route.snapshot?._correctedLastPathIndex);
+        if (correctedResult.toString() !== result.toString()) {
+            console.warn(`relativeLinkResolution: 'legacy' is deprecated and will be removed in a future version of Angular. The link to ${result.toString()} will change to ${correctedResult.toString()} if the code is not updated before then.`);
+        }
+    }
+    return result;
 }
 function isMatrixParams(command) {
     return typeof command === 'object' && command != null && !command.outlets && !command.segmentPath;
@@ -1828,12 +1899,11 @@ class Position {
         this.index = index;
     }
 }
-function findStartingPosition(nav, tree, route) {
+function findStartingPosition(nav, tree, segmentGroup, lastPathIndex) {
     if (nav.isAbsolute) {
         return new Position(tree.root, true, 0);
     }
-    if (route.snapshot._lastPathIndex === -1) {
-        const segmentGroup = route.snapshot._urlSegment;
+    if (lastPathIndex === -1) {
         // Pathless ActivatedRoute has _lastPathIndex === -1 but should not process children
         // see issue #26224, #13011, #35687
         // However, if the ActivatedRoute is the root we should process children like above.
@@ -1841,8 +1911,8 @@ function findStartingPosition(nav, tree, route) {
         return new Position(segmentGroup, processChildren, 0);
     }
     const modifier = isMatrixParams(nav.commands[0]) ? 0 : 1;
-    const index = route.snapshot._lastPathIndex + modifier;
-    return createPositionApplyingDoubleDots(route.snapshot._urlSegment, index, nav.numberOfDoubleDots);
+    const index = lastPathIndex + modifier;
+    return createPositionApplyingDoubleDots(segmentGroup, index, nav.numberOfDoubleDots);
 }
 function createPositionApplyingDoubleDots(group, index, numberOfDoubleDots) {
     let g = group;
@@ -2005,181 +2075,76 @@ function compare(path, params, segment) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-const activateRoutes = (rootContexts, routeReuseStrategy, forwardEvent) => map(t => {
-    new ActivateRoutes(routeReuseStrategy, t.targetRouterState, t.currentRouterState, forwardEvent)
-        .activate(rootContexts);
-    return t;
-});
-class ActivateRoutes {
-    constructor(routeReuseStrategy, futureState, currState, forwardEvent) {
-        this.routeReuseStrategy = routeReuseStrategy;
-        this.futureState = futureState;
-        this.currState = currState;
-        this.forwardEvent = forwardEvent;
-    }
-    activate(parentContexts) {
-        const futureRoot = this.futureState._root;
-        const currRoot = this.currState ? this.currState._root : null;
-        this.deactivateChildRoutes(futureRoot, currRoot, parentContexts);
-        advanceActivatedRoute(this.futureState.root);
-        this.activateChildRoutes(futureRoot, currRoot, parentContexts);
-    }
-    // De-activate the child route that are not re-used for the future state
-    deactivateChildRoutes(futureNode, currNode, contexts) {
-        const children = nodeChildrenAsMap(currNode);
-        // Recurse on the routes active in the future state to de-activate deeper children
-        futureNode.children.forEach(futureChild => {
-            const childOutletName = futureChild.value.outlet;
-            this.deactivateRoutes(futureChild, children[childOutletName], contexts);
-            delete children[childOutletName];
-        });
-        // De-activate the routes that will not be re-used
-        forEach(children, (v, childName) => {
-            this.deactivateRouteAndItsChildren(v, contexts);
-        });
-    }
-    deactivateRoutes(futureNode, currNode, parentContext) {
-        const future = futureNode.value;
-        const curr = currNode ? currNode.value : null;
-        if (future === curr) {
-            // Reusing the node, check to see if the children need to be de-activated
-            if (future.component) {
-                // If we have a normal route, we need to go through an outlet.
-                const context = parentContext.getContext(future.outlet);
-                if (context) {
-                    this.deactivateChildRoutes(futureNode, currNode, context.children);
-                }
-            }
-            else {
-                // if we have a componentless route, we recurse but keep the same outlet map.
-                this.deactivateChildRoutes(futureNode, currNode, parentContext);
-            }
-        }
-        else {
-            if (curr) {
-                // Deactivate the current route which will not be re-used
-                this.deactivateRouteAndItsChildren(currNode, parentContext);
-            }
-        }
+/**
+ * Store contextual information about a `RouterOutlet`
+ *
+ * @publicApi
+ */
+class OutletContext {
+    constructor() {
+        this.outlet = null;
+        this.route = null;
+        /**
+         * @deprecated Passing a resolver to retrieve a component factory is not required and is
+         *     deprecated since v14.
+         */
+        this.resolver = null;
+        this.injector = null;
+        this.children = new ChildrenOutletContexts();
+        this.attachRef = null;
     }
-    deactivateRouteAndItsChildren(route, parentContexts) {
-        // If there is no component, the Route is never attached to an outlet (because there is no
-        // component to attach).
-        if (route.value.component && this.routeReuseStrategy.shouldDetach(route.value.snapshot)) {
-            this.detachAndStoreRouteSubtree(route, parentContexts);
-        }
-        else {
-            this.deactivateRouteAndOutlet(route, parentContexts);
-        }
+}
+/**
+ * Store contextual information about the children (= nested) `RouterOutlet`
+ *
+ * @publicApi
+ */
+class ChildrenOutletContexts {
+    constructor() {
+        // contexts for child outlets, by name.
+        this.contexts = new Map();
     }
-    detachAndStoreRouteSubtree(route, parentContexts) {
-        const context = parentContexts.getContext(route.value.outlet);
-        const contexts = context && route.value.component ? context.children : parentContexts;
-        const children = nodeChildrenAsMap(route);
-        for (const childOutlet of Object.keys(children)) {
-            this.deactivateRouteAndItsChildren(children[childOutlet], contexts);
-        }
-        if (context && context.outlet) {
-            const componentRef = context.outlet.detach();
-            const contexts = context.children.onOutletDeactivated();
-            this.routeReuseStrategy.store(route.value.snapshot, { componentRef, route, contexts });
-        }
+    /** Called when a `RouterOutlet` directive is instantiated */
+    onChildOutletCreated(childName, outlet) {
+        const context = this.getOrCreateContext(childName);
+        context.outlet = outlet;
+        this.contexts.set(childName, context);
     }
-    deactivateRouteAndOutlet(route, parentContexts) {
-        const context = parentContexts.getContext(route.value.outlet);
-        // The context could be `null` if we are on a componentless route but there may still be
-        // children that need deactivating.
-        const contexts = context && route.value.component ? context.children : parentContexts;
-        const children = nodeChildrenAsMap(route);
-        for (const childOutlet of Object.keys(children)) {
-            this.deactivateRouteAndItsChildren(children[childOutlet], contexts);
-        }
-        if (context && context.outlet) {
-            // Destroy the component
-            context.outlet.deactivate();
-            // Destroy the contexts for all the outlets that were in the component
-            context.children.onOutletDeactivated();
-            // Clear the information about the attached component on the context but keep the reference to
-            // the outlet.
+    /**
+     * Called when a `RouterOutlet` directive is destroyed.
+     * We need to keep the context as the outlet could be destroyed inside a NgIf and might be
+     * re-created later.
+     */
+    onChildOutletDestroyed(childName) {
+        const context = this.getContext(childName);
+        if (context) {
+            context.outlet = null;
             context.attachRef = null;
-            context.resolver = null;
-            context.route = null;
         }
     }
-    activateChildRoutes(futureNode, currNode, contexts) {
-        const children = nodeChildrenAsMap(currNode);
-        futureNode.children.forEach(c => {
-            this.activateRoutes(c, children[c.value.outlet], contexts);
-            this.forwardEvent(new ActivationEnd(c.value.snapshot));
-        });
-        if (futureNode.children.length) {
-            this.forwardEvent(new ChildActivationEnd(futureNode.value.snapshot));
-        }
+    /**
+     * Called when the corresponding route is deactivated during navigation.
+     * Because the component get destroyed, all children outlet are destroyed.
+     */
+    onOutletDeactivated() {
+        const contexts = this.contexts;
+        this.contexts = new Map();
+        return contexts;
     }
-    activateRoutes(futureNode, currNode, parentContexts) {
-        const future = futureNode.value;
-        const curr = currNode ? currNode.value : null;
-        advanceActivatedRoute(future);
-        // reusing the node
-        if (future === curr) {
-            if (future.component) {
-                // If we have a normal route, we need to go through an outlet.
-                const context = parentContexts.getOrCreateContext(future.outlet);
-                this.activateChildRoutes(futureNode, currNode, context.children);
-            }
-            else {
-                // if we have a componentless route, we recurse but keep the same outlet map.
-                this.activateChildRoutes(futureNode, currNode, parentContexts);
-            }
-        }
-        else {
-            if (future.component) {
-                // if we have a normal route, we need to place the component into the outlet and recurse.
-                const context = parentContexts.getOrCreateContext(future.outlet);
-                if (this.routeReuseStrategy.shouldAttach(future.snapshot)) {
-                    const stored = this.routeReuseStrategy.retrieve(future.snapshot);
-                    this.routeReuseStrategy.store(future.snapshot, null);
-                    context.children.onOutletReAttached(stored.contexts);
-                    context.attachRef = stored.componentRef;
-                    context.route = stored.route.value;
-                    if (context.outlet) {
-                        // Attach right away when the outlet has already been instantiated
-                        // Otherwise attach from `RouterOutlet.ngOnInit` when it is instantiated
-                        context.outlet.attach(stored.componentRef, stored.route.value);
-                    }
-                    advanceActivatedRoute(stored.route.value);
-                    this.activateChildRoutes(futureNode, null, context.children);
-                }
-                else {
-                    const config = parentLoadedConfig(future.snapshot);
-                    const cmpFactoryResolver = config ? config.module.componentFactoryResolver : null;
-                    context.attachRef = null;
-                    context.route = future;
-                    context.resolver = cmpFactoryResolver;
-                    if (context.outlet) {
-                        // Activate the outlet when it has already been instantiated
-                        // Otherwise it will get activated from its `ngOnInit` when instantiated
-                        context.outlet.activateWith(future, cmpFactoryResolver);
-                    }
-                    this.activateChildRoutes(futureNode, null, context.children);
-                }
-            }
-            else {
-                // if we have a componentless route, we recurse but keep the same outlet map.
-                this.activateChildRoutes(futureNode, null, parentContexts);
-            }
+    onOutletReAttached(contexts) {
+        this.contexts = contexts;
+    }
+    getOrCreateContext(childName) {
+        let context = this.getContext(childName);
+        if (!context) {
+            context = new OutletContext();
+            this.contexts.set(childName, context);
         }
+        return context;
     }
-}
-function parentLoadedConfig(snapshot) {
-    for (let s = snapshot.parent; s; s = s.parent) {
-        const route = s.routeConfig;
-        if (route && route._loadedConfig)
-            return route._loadedConfig;
-        if (route && route.component)
-            return null;
+    getContext(childName) {
+        return this.contexts.get(childName) || null;
     }
-    return null;
 }
 
 /**
@@ -2189,182 +2154,13 @@ function parentLoadedConfig(snapshot) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-class LoadedRouterConfig {
-    constructor(routes, module) {
-        this.routes = routes;
-        this.module = module;
-    }
-}
-
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
+ * @description
  *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Simple function check, but generic so type inference will flow. Example:
+ * Acts as a placeholder that Angular dynamically fills based on the current router state.
  *
- * function product(a: number, b: number) {
- *   return a * b;
- * }
- *
- * if (isFunction<product>(fn)) {
- *   return fn(1, 2);
- * } else {
- *   throw "Must provide the `product` function";
- * }
- */
-function isFunction(v) {
-    return typeof v === 'function';
-}
-function isBoolean(v) {
-    return typeof v === 'boolean';
-}
-function isUrlTree(v) {
-    return v instanceof UrlTree;
-}
-function isCanLoad(guard) {
-    return guard && isFunction(guard.canLoad);
-}
-function isCanActivate(guard) {
-    return guard && isFunction(guard.canActivate);
-}
-function isCanActivateChild(guard) {
-    return guard && isFunction(guard.canActivateChild);
-}
-function isCanDeactivate(guard) {
-    return guard && isFunction(guard.canDeactivate);
-}
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-const INITIAL_VALUE = Symbol('INITIAL_VALUE');
-function prioritizedGuardValue() {
-    return switchMap(obs => {
-        return combineLatest(obs.map(o => o.pipe(take(1), startWith(INITIAL_VALUE))))
-            .pipe(scan((acc, list) => {
-            let isPending = false;
-            return list.reduce((innerAcc, val, i) => {
-                if (innerAcc !== INITIAL_VALUE)
-                    return innerAcc;
-                // Toggle pending flag if any values haven't been set yet
-                if (val === INITIAL_VALUE)
-                    isPending = true;
-                // Any other return values are only valid if we haven't yet hit a pending
-                // call. This guarantees that in the case of a guard at the bottom of the
-                // tree that returns a redirect, we will wait for the higher priority
-                // guard at the top to finish before performing the redirect.
-                if (!isPending) {
-                    // Early return when we hit a `false` value as that should always
-                    // cancel navigation
-                    if (val === false)
-                        return val;
-                    if (i === list.length - 1 || isUrlTree(val)) {
-                        return val;
-                    }
-                }
-                return innerAcc;
-            }, acc);
-        }, INITIAL_VALUE), filter(item => item !== INITIAL_VALUE), map(item => isUrlTree(item) ? item : item === true), //
-        take(1));
-    });
-}
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Store contextual information about a `RouterOutlet`
- *
- * @publicApi
- */
-class OutletContext {
-    constructor() {
-        this.outlet = null;
-        this.route = null;
-        this.resolver = null;
-        this.children = new ChildrenOutletContexts();
-        this.attachRef = null;
-    }
-}
-/**
- * Store contextual information about the children (= nested) `RouterOutlet`
- *
- * @publicApi
- */
-class ChildrenOutletContexts {
-    constructor() {
-        // contexts for child outlets, by name.
-        this.contexts = new Map();
-    }
-    /** Called when a `RouterOutlet` directive is instantiated */
-    onChildOutletCreated(childName, outlet) {
-        const context = this.getOrCreateContext(childName);
-        context.outlet = outlet;
-        this.contexts.set(childName, context);
-    }
-    /**
-     * Called when a `RouterOutlet` directive is destroyed.
-     * We need to keep the context as the outlet could be destroyed inside a NgIf and might be
-     * re-created later.
-     */
-    onChildOutletDestroyed(childName) {
-        const context = this.getContext(childName);
-        if (context) {
-            context.outlet = null;
-            context.attachRef = null;
-        }
-    }
-    /**
-     * Called when the corresponding route is deactivated during navigation.
-     * Because the component get destroyed, all children outlet are destroyed.
-     */
-    onOutletDeactivated() {
-        const contexts = this.contexts;
-        this.contexts = new Map();
-        return contexts;
-    }
-    onOutletReAttached(contexts) {
-        this.contexts = contexts;
-    }
-    getOrCreateContext(childName) {
-        let context = this.getContext(childName);
-        if (!context) {
-            context = new OutletContext();
-            this.contexts.set(childName, context);
-        }
-        return context;
-    }
-    getContext(childName) {
-        return this.contexts.get(childName) || null;
-    }
-}
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * @description
- *
- * Acts as a placeholder that Angular dynamically fills based on the current router state.
- *
- * Each outlet can have a unique name, determined by the optional `name` attribute.
- * The name cannot be set or changed dynamically. If not set, default value is "primary".
+ * Each outlet can have a unique name, determined by the optional `name` attribute.
+ * The name cannot be set or changed dynamically. If not set, default value is "primary".
  *
  * ```
  * <router-outlet></router-outlet>
@@ -2410,11 +2206,11 @@ class ChildrenOutletContexts {
  * @publicApi
  */
 class RouterOutlet {
-    constructor(parentContexts, location, resolver, name, changeDetector) {
+    constructor(parentContexts, location, name, changeDetector, environmentInjector) {
         this.parentContexts = parentContexts;
         this.location = location;
-        this.resolver = resolver;
         this.changeDetector = changeDetector;
+        this.environmentInjector = environmentInjector;
         this.activated = null;
         this._activatedRoute = null;
         this.activateEvents = new EventEmitter();
@@ -2449,7 +2245,7 @@ class RouterOutlet {
                 }
                 else {
                     // otherwise the component defined in the configuration is created
-                    this.activateWith(context.route, context.resolver || null);
+                    this.activateWith(context.route, context.injector);
                 }
             }
         }
@@ -2508,33 +2304,39 @@ class RouterOutlet {
             this.deactivateEvents.emit(c);
         }
     }
-    activateWith(activatedRoute, resolver) {
+    activateWith(activatedRoute, resolverOrInjector) {
         if (this.isActivated) {
             throw new Error('Cannot activate an already activated outlet');
         }
         this._activatedRoute = activatedRoute;
+        const location = this.location;
         const snapshot = activatedRoute._futureSnapshot;
-        const component = snapshot.routeConfig.component;
-        resolver = resolver || this.resolver;
-        const factory = resolver.resolveComponentFactory(component);
+        const component = snapshot.component;
         const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
-        const injector = new OutletInjector(activatedRoute, childContexts, this.location.injector);
-        this.activated = this.location.createComponent(factory, this.location.length, injector);
+        const injector = new OutletInjector(activatedRoute, childContexts, location.injector);
+        if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
+            const factory = resolverOrInjector.resolveComponentFactory(component);
+            this.activated = location.createComponent(factory, location.length, injector);
+        }
+        else {
+            const environmentInjector = resolverOrInjector ?? this.environmentInjector;
+            this.activated = location.createComponent(component, { index: location.length, injector, environmentInjector });
+        }
         // Calling `markForCheck` to make sure we will run the change detection when the
         // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
         this.changeDetector.markForCheck();
         this.activateEvents.emit(this.activated.instance);
     }
 }
-RouterOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterOutlet, deps: [{ token: ChildrenOutletContexts }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: 'name', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-RouterOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: RouterOutlet, selector: "router-outlet", outputs: { activateEvents: "activate", deactivateEvents: "deactivate", attachEvents: "attach", detachEvents: "detach" }, exportAs: ["outlet"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterOutlet, decorators: [{
+RouterOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterOutlet, deps: [{ token: ChildrenOutletContexts }, { token: i0.ViewContainerRef }, { token: 'name', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
+RouterOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.2", type: RouterOutlet, selector: "router-outlet", outputs: { activateEvents: "activate", deactivateEvents: "deactivate", attachEvents: "attach", detachEvents: "detach" }, exportAs: ["outlet"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterOutlet, decorators: [{
             type: Directive,
             args: [{ selector: 'router-outlet', exportAs: 'outlet' }]
-        }], ctorParameters: function () { return [{ type: ChildrenOutletContexts }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: ChildrenOutletContexts }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['name']
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activateEvents: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.EnvironmentInjector }]; }, propDecorators: { activateEvents: [{
                 type: Output,
                 args: ['activate']
             }], deactivateEvents: [{
@@ -2560,7 +2362,400 @@ class OutletInjector {
         if (token === ChildrenOutletContexts) {
             return this.childContexts;
         }
-        return this.parent.get(token, notFoundValue);
+        return this.parent.get(token, notFoundValue);
+    }
+}
+function isComponentFactoryResolver(item) {
+    return !!item.resolveComponentFactory;
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * This component is used internally within the router to be a placeholder when an empty
+ * router-outlet is needed. For example, with a config such as:
+ *
+ * `{path: 'parent', outlet: 'nav', children: [...]}`
+ *
+ * In order to render, there needs to be a component on this config, which will default
+ * to this `EmptyOutletComponent`.
+ */
+class ɵEmptyOutletComponent {
+}
+ɵEmptyOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: ɵEmptyOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ɵEmptyOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0-rc.2", type: ɵEmptyOutletComponent, selector: "ng-component", ngImport: i0, template: `<router-outlet></router-outlet>`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: ɵEmptyOutletComponent, decorators: [{
+            type: Component,
+            args: [{ template: `<router-outlet></router-outlet>` }]
+        }] });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Creates an `EnvironmentInjector` if the `Route` has providers and one does not already exist
+ * and returns the injector. Otherwise, if the `Route` does not have `providers`, returns the
+ * `currentInjector`.
+ *
+ * @param route The route that might have providers
+ * @param currentInjector The parent injector of the `Route`
+ */
+function getOrCreateRouteInjectorIfNeeded(route, currentInjector) {
+    if (route.providers && !route._injector) {
+        route._injector =
+            createEnvironmentInjector(route.providers, currentInjector, `Route: ${route.path}`);
+    }
+    return route._injector ?? currentInjector;
+}
+function getLoadedRoutes(route) {
+    return route._loadedRoutes;
+}
+function getLoadedInjector(route) {
+    return route._loadedInjector;
+}
+function getLoadedComponent(route) {
+    return route._loadedComponent;
+}
+function getProvidersInjector(route) {
+    return route._injector;
+}
+function validateConfig(config, parentPath = '', requireStandaloneComponents = false) {
+    // forEach doesn't iterate undefined values
+    for (let i = 0; i < config.length; i++) {
+        const route = config[i];
+        const fullPath = getFullPath(parentPath, route);
+        validateNode(route, fullPath, requireStandaloneComponents);
+    }
+}
+function assertStandalone(fullPath, component) {
+    if (component && !ɵisStandalone(component)) {
+        throw new Error(`Invalid configuration of route '${fullPath}'. The component must be standalone.`);
+    }
+}
+function validateNode(route, fullPath, requireStandaloneComponents) {
+    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        if (!route) {
+            throw new Error(`
+      Invalid configuration of route '${fullPath}': Encountered undefined route.
+      The reason might be an extra comma.
+
+      Example:
+      const routes: Routes = [
+        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+        { path: 'dashboard',  component: DashboardComponent },, << two commas
+        { path: 'detail/:id', component: HeroDetailComponent }
+      ];
+    `);
+        }
+        if (Array.isArray(route)) {
+            throw new Error(`Invalid configuration of route '${fullPath}': Array cannot be specified`);
+        }
+        if (!route.component && !route.loadComponent && !route.children && !route.loadChildren &&
+            (route.outlet && route.outlet !== PRIMARY_OUTLET)) {
+            throw new Error(`Invalid configuration of route '${fullPath}': a componentless route without children or loadChildren cannot have a named outlet set`);
+        }
+        if (route.redirectTo && route.children) {
+            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and children cannot be used together`);
+        }
+        if (route.redirectTo && route.loadChildren) {
+            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and loadChildren cannot be used together`);
+        }
+        if (route.children && route.loadChildren) {
+            throw new Error(`Invalid configuration of route '${fullPath}': children and loadChildren cannot be used together`);
+        }
+        if (route.redirectTo && (route.component || route.loadComponent)) {
+            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and component/loadComponent cannot be used together`);
+        }
+        if (route.component && route.loadComponent) {
+            throw new Error(`Invalid configuration of route '${fullPath}': component and loadComponent cannot be used together`);
+        }
+        if (route.redirectTo && route.canActivate) {
+            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and canActivate cannot be used together. Redirects happen before activation ` +
+                `so canActivate will never be executed.`);
+        }
+        if (route.path && route.matcher) {
+            throw new Error(`Invalid configuration of route '${fullPath}': path and matcher cannot be used together`);
+        }
+        if (route.redirectTo === void 0 && !route.component && !route.loadComponent &&
+            !route.children && !route.loadChildren) {
+            throw new Error(`Invalid configuration of route '${fullPath}'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren`);
+        }
+        if (route.path === void 0 && route.matcher === void 0) {
+            throw new Error(`Invalid configuration of route '${fullPath}': routes must have either a path or a matcher specified`);
+        }
+        if (typeof route.path === 'string' && route.path.charAt(0) === '/') {
+            throw new Error(`Invalid configuration of route '${fullPath}': path cannot start with a slash`);
+        }
+        if (route.path === '' && route.redirectTo !== void 0 && route.pathMatch === void 0) {
+            const exp = `The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.`;
+            throw new Error(`Invalid configuration of route '{path: "${fullPath}", redirectTo: "${route.redirectTo}"}': please provide 'pathMatch'. ${exp}`);
+        }
+        if (requireStandaloneComponents) {
+            assertStandalone(fullPath, route.component);
+        }
+    }
+    if (route.children) {
+        validateConfig(route.children, fullPath, requireStandaloneComponents);
+    }
+}
+function getFullPath(parentPath, currentRoute) {
+    if (!currentRoute) {
+        return parentPath;
+    }
+    if (!parentPath && !currentRoute.path) {
+        return '';
+    }
+    else if (parentPath && !currentRoute.path) {
+        return `${parentPath}/`;
+    }
+    else if (!parentPath && currentRoute.path) {
+        return currentRoute.path;
+    }
+    else {
+        return `${parentPath}/${currentRoute.path}`;
+    }
+}
+/**
+ * Makes a copy of the config and adds any default required properties.
+ */
+function standardizeConfig(r) {
+    const children = r.children && r.children.map(standardizeConfig);
+    const c = children ? { ...r, children } : { ...r };
+    if ((!c.component && !c.loadComponent) && (children || c.loadChildren) &&
+        (c.outlet && c.outlet !== PRIMARY_OUTLET)) {
+        c.component = ɵEmptyOutletComponent;
+    }
+    return c;
+}
+/** Returns the `route.outlet` or PRIMARY_OUTLET if none exists. */
+function getOutlet(route) {
+    return route.outlet || PRIMARY_OUTLET;
+}
+/**
+ * Sorts the `routes` such that the ones with an outlet matching `outletName` come first.
+ * The order of the configs is otherwise preserved.
+ */
+function sortByMatchingOutlets(routes, outletName) {
+    const sortedConfig = routes.filter(r => getOutlet(r) === outletName);
+    sortedConfig.push(...routes.filter(r => getOutlet(r) !== outletName));
+    return sortedConfig;
+}
+/**
+ * Gets the first injector in the snapshot's parent tree.
+ *
+ * If the `Route` has a static list of providers, the returned injector will be the one created from
+ * those. If it does not exist, the returned injector may come from the parents, which may be from a
+ * loaded config or their static providers.
+ *
+ * Returns `null` if there is neither this nor any parents have a stored injector.
+ *
+ * Generally used for retrieving the injector to use for getting tokens for guards/resolvers and
+ * also used for getting the correct injector to use for creating components.
+ */
+function getClosestRouteInjector(snapshot) {
+    if (!snapshot)
+        return null;
+    // If the current route has its own injector, which is created from the static providers on the
+    // route itself, we should use that. Otherwise, we start at the parent since we do not want to
+    // include the lazy loaded injector from this route.
+    if (snapshot.routeConfig?._injector) {
+        return snapshot.routeConfig._injector;
+    }
+    for (let s = snapshot.parent; s; s = s.parent) {
+        const route = s.routeConfig;
+        // Note that the order here is important. `_loadedInjector` stored on the route with
+        // `loadChildren: () => NgModule` so it applies to child routes with priority. The `_injector`
+        // is created from the static providers on that parent route, so it applies to the children as
+        // well, but only if there is no lazy loaded NgModuleRef injector.
+        if (route?._loadedInjector)
+            return route._loadedInjector;
+        if (route?._injector)
+            return route._injector;
+    }
+    return null;
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const activateRoutes = (rootContexts, routeReuseStrategy, forwardEvent) => map(t => {
+    new ActivateRoutes(routeReuseStrategy, t.targetRouterState, t.currentRouterState, forwardEvent)
+        .activate(rootContexts);
+    return t;
+});
+class ActivateRoutes {
+    constructor(routeReuseStrategy, futureState, currState, forwardEvent) {
+        this.routeReuseStrategy = routeReuseStrategy;
+        this.futureState = futureState;
+        this.currState = currState;
+        this.forwardEvent = forwardEvent;
+    }
+    activate(parentContexts) {
+        const futureRoot = this.futureState._root;
+        const currRoot = this.currState ? this.currState._root : null;
+        this.deactivateChildRoutes(futureRoot, currRoot, parentContexts);
+        advanceActivatedRoute(this.futureState.root);
+        this.activateChildRoutes(futureRoot, currRoot, parentContexts);
+    }
+    // De-activate the child route that are not re-used for the future state
+    deactivateChildRoutes(futureNode, currNode, contexts) {
+        const children = nodeChildrenAsMap(currNode);
+        // Recurse on the routes active in the future state to de-activate deeper children
+        futureNode.children.forEach(futureChild => {
+            const childOutletName = futureChild.value.outlet;
+            this.deactivateRoutes(futureChild, children[childOutletName], contexts);
+            delete children[childOutletName];
+        });
+        // De-activate the routes that will not be re-used
+        forEach(children, (v, childName) => {
+            this.deactivateRouteAndItsChildren(v, contexts);
+        });
+    }
+    deactivateRoutes(futureNode, currNode, parentContext) {
+        const future = futureNode.value;
+        const curr = currNode ? currNode.value : null;
+        if (future === curr) {
+            // Reusing the node, check to see if the children need to be de-activated
+            if (future.component) {
+                // If we have a normal route, we need to go through an outlet.
+                const context = parentContext.getContext(future.outlet);
+                if (context) {
+                    this.deactivateChildRoutes(futureNode, currNode, context.children);
+                }
+            }
+            else {
+                // if we have a componentless route, we recurse but keep the same outlet map.
+                this.deactivateChildRoutes(futureNode, currNode, parentContext);
+            }
+        }
+        else {
+            if (curr) {
+                // Deactivate the current route which will not be re-used
+                this.deactivateRouteAndItsChildren(currNode, parentContext);
+            }
+        }
+    }
+    deactivateRouteAndItsChildren(route, parentContexts) {
+        // If there is no component, the Route is never attached to an outlet (because there is no
+        // component to attach).
+        if (route.value.component && this.routeReuseStrategy.shouldDetach(route.value.snapshot)) {
+            this.detachAndStoreRouteSubtree(route, parentContexts);
+        }
+        else {
+            this.deactivateRouteAndOutlet(route, parentContexts);
+        }
+    }
+    detachAndStoreRouteSubtree(route, parentContexts) {
+        const context = parentContexts.getContext(route.value.outlet);
+        const contexts = context && route.value.component ? context.children : parentContexts;
+        const children = nodeChildrenAsMap(route);
+        for (const childOutlet of Object.keys(children)) {
+            this.deactivateRouteAndItsChildren(children[childOutlet], contexts);
+        }
+        if (context && context.outlet) {
+            const componentRef = context.outlet.detach();
+            const contexts = context.children.onOutletDeactivated();
+            this.routeReuseStrategy.store(route.value.snapshot, { componentRef, route, contexts });
+        }
+    }
+    deactivateRouteAndOutlet(route, parentContexts) {
+        const context = parentContexts.getContext(route.value.outlet);
+        // The context could be `null` if we are on a componentless route but there may still be
+        // children that need deactivating.
+        const contexts = context && route.value.component ? context.children : parentContexts;
+        const children = nodeChildrenAsMap(route);
+        for (const childOutlet of Object.keys(children)) {
+            this.deactivateRouteAndItsChildren(children[childOutlet], contexts);
+        }
+        if (context && context.outlet) {
+            // Destroy the component
+            context.outlet.deactivate();
+            // Destroy the contexts for all the outlets that were in the component
+            context.children.onOutletDeactivated();
+            // Clear the information about the attached component on the context but keep the reference to
+            // the outlet.
+            context.attachRef = null;
+            context.resolver = null;
+            context.route = null;
+        }
+    }
+    activateChildRoutes(futureNode, currNode, contexts) {
+        const children = nodeChildrenAsMap(currNode);
+        futureNode.children.forEach(c => {
+            this.activateRoutes(c, children[c.value.outlet], contexts);
+            this.forwardEvent(new ActivationEnd(c.value.snapshot));
+        });
+        if (futureNode.children.length) {
+            this.forwardEvent(new ChildActivationEnd(futureNode.value.snapshot));
+        }
+    }
+    activateRoutes(futureNode, currNode, parentContexts) {
+        const future = futureNode.value;
+        const curr = currNode ? currNode.value : null;
+        advanceActivatedRoute(future);
+        // reusing the node
+        if (future === curr) {
+            if (future.component) {
+                // If we have a normal route, we need to go through an outlet.
+                const context = parentContexts.getOrCreateContext(future.outlet);
+                this.activateChildRoutes(futureNode, currNode, context.children);
+            }
+            else {
+                // if we have a componentless route, we recurse but keep the same outlet map.
+                this.activateChildRoutes(futureNode, currNode, parentContexts);
+            }
+        }
+        else {
+            if (future.component) {
+                // if we have a normal route, we need to place the component into the outlet and recurse.
+                const context = parentContexts.getOrCreateContext(future.outlet);
+                if (this.routeReuseStrategy.shouldAttach(future.snapshot)) {
+                    const stored = this.routeReuseStrategy.retrieve(future.snapshot);
+                    this.routeReuseStrategy.store(future.snapshot, null);
+                    context.children.onOutletReAttached(stored.contexts);
+                    context.attachRef = stored.componentRef;
+                    context.route = stored.route.value;
+                    if (context.outlet) {
+                        // Attach right away when the outlet has already been instantiated
+                        // Otherwise attach from `RouterOutlet.ngOnInit` when it is instantiated
+                        context.outlet.attach(stored.componentRef, stored.route.value);
+                    }
+                    advanceActivatedRoute(stored.route.value);
+                    this.activateChildRoutes(futureNode, null, context.children);
+                }
+                else {
+                    const injector = getClosestRouteInjector(future.snapshot);
+                    const cmpFactoryResolver = injector?.get(ComponentFactoryResolver) ?? null;
+                    context.attachRef = null;
+                    context.route = future;
+                    context.resolver = cmpFactoryResolver;
+                    context.injector = injector;
+                    if (context.outlet) {
+                        // Activate the outlet when it has already been instantiated
+                        // Otherwise it will get activated from its `ngOnInit` when instantiated
+                        context.outlet.activateWith(future, context.injector);
+                    }
+                    this.activateChildRoutes(futureNode, null, context.children);
+                }
+            }
+            else {
+                // if we have a componentless route, we recurse but keep the same outlet map.
+                this.activateChildRoutes(futureNode, null, parentContexts);
+            }
+        }
     }
 }
 
@@ -2572,22 +2767,39 @@ class OutletInjector {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * This component is used internally within the router to be a placeholder when an empty
- * router-outlet is needed. For example, with a config such as:
+ * Simple function check, but generic so type inference will flow. Example:
  *
- * `{path: 'parent', outlet: 'nav', children: [...]}`
+ * function product(a: number, b: number) {
+ *   return a * b;
+ * }
  *
- * In order to render, there needs to be a component on this config, which will default
- * to this `EmptyOutletComponent`.
+ * if (isFunction<product>(fn)) {
+ *   return fn(1, 2);
+ * } else {
+ *   throw "Must provide the `product` function";
+ * }
  */
-class ɵEmptyOutletComponent {
+function isFunction(v) {
+    return typeof v === 'function';
+}
+function isBoolean(v) {
+    return typeof v === 'boolean';
+}
+function isUrlTree(v) {
+    return v instanceof UrlTree;
+}
+function isCanLoad(guard) {
+    return guard && isFunction(guard.canLoad);
+}
+function isCanActivate(guard) {
+    return guard && isFunction(guard.canActivate);
+}
+function isCanActivateChild(guard) {
+    return guard && isFunction(guard.canActivateChild);
+}
+function isCanDeactivate(guard) {
+    return guard && isFunction(guard.canDeactivate);
 }
-ɵEmptyOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ɵEmptyOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ɵEmptyOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "14.0.0-next.9", type: ɵEmptyOutletComponent, selector: "ng-component", ngImport: i0, template: `<router-outlet></router-outlet>`, isInline: true, directives: [{ type: RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ɵEmptyOutletComponent, decorators: [{
-            type: Component,
-            args: [{ template: `<router-outlet></router-outlet>` }]
-        }] });
 
 /**
  * @license
@@ -2596,113 +2808,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9",
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function validateConfig(config, parentPath = '') {
-    // forEach doesn't iterate undefined values
-    for (let i = 0; i < config.length; i++) {
-        const route = config[i];
-        const fullPath = getFullPath(parentPath, route);
-        validateNode(route, fullPath);
-    }
-}
-function validateNode(route, fullPath) {
-    if (typeof ngDevMode === 'undefined' || ngDevMode) {
-        if (!route) {
-            throw new Error(`
-      Invalid configuration of route '${fullPath}': Encountered undefined route.
-      The reason might be an extra comma.
-
-      Example:
-      const routes: Routes = [
-        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-        { path: 'dashboard',  component: DashboardComponent },, << two commas
-        { path: 'detail/:id', component: HeroDetailComponent }
-      ];
-    `);
-        }
-        if (Array.isArray(route)) {
-            throw new Error(`Invalid configuration of route '${fullPath}': Array cannot be specified`);
-        }
-        if (!route.component && !route.children && !route.loadChildren &&
-            (route.outlet && route.outlet !== PRIMARY_OUTLET)) {
-            throw new Error(`Invalid configuration of route '${fullPath}': a componentless route without children or loadChildren cannot have a named outlet set`);
-        }
-        if (route.redirectTo && route.children) {
-            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and children cannot be used together`);
-        }
-        if (route.redirectTo && route.loadChildren) {
-            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and loadChildren cannot be used together`);
-        }
-        if (route.children && route.loadChildren) {
-            throw new Error(`Invalid configuration of route '${fullPath}': children and loadChildren cannot be used together`);
-        }
-        if (route.redirectTo && route.component) {
-            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and component cannot be used together`);
-        }
-        if (route.redirectTo && route.canActivate) {
-            throw new Error(`Invalid configuration of route '${fullPath}': redirectTo and canActivate cannot be used together. Redirects happen before activation ` +
-                `so canActivate will never be executed.`);
-        }
-        if (route.path && route.matcher) {
-            throw new Error(`Invalid configuration of route '${fullPath}': path and matcher cannot be used together`);
-        }
-        if (route.redirectTo === void 0 && !route.component && !route.children && !route.loadChildren) {
-            throw new Error(`Invalid configuration of route '${fullPath}'. One of the following must be provided: component, redirectTo, children or loadChildren`);
-        }
-        if (route.path === void 0 && route.matcher === void 0) {
-            throw new Error(`Invalid configuration of route '${fullPath}': routes must have either a path or a matcher specified`);
-        }
-        if (typeof route.path === 'string' && route.path.charAt(0) === '/') {
-            throw new Error(`Invalid configuration of route '${fullPath}': path cannot start with a slash`);
-        }
-        if (route.path === '' && route.redirectTo !== void 0 && route.pathMatch === void 0) {
-            const exp = `The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.`;
-            throw new Error(`Invalid configuration of route '{path: "${fullPath}", redirectTo: "${route.redirectTo}"}': please provide 'pathMatch'. ${exp}`);
-        }
-    }
-    if (route.children) {
-        validateConfig(route.children, fullPath);
-    }
-}
-function getFullPath(parentPath, currentRoute) {
-    if (!currentRoute) {
-        return parentPath;
-    }
-    if (!parentPath && !currentRoute.path) {
-        return '';
-    }
-    else if (parentPath && !currentRoute.path) {
-        return `${parentPath}/`;
-    }
-    else if (!parentPath && currentRoute.path) {
-        return currentRoute.path;
-    }
-    else {
-        return `${parentPath}/${currentRoute.path}`;
-    }
-}
-/**
- * Makes a copy of the config and adds any default required properties.
- */
-function standardizeConfig(r) {
-    const children = r.children && r.children.map(standardizeConfig);
-    const c = children ? { ...r, children } : { ...r };
-    if (!c.component && (children || c.loadChildren) && (c.outlet && c.outlet !== PRIMARY_OUTLET)) {
-        c.component = ɵEmptyOutletComponent;
-    }
-    return c;
-}
-/** Returns the `route.outlet` or PRIMARY_OUTLET if none exists. */
-function getOutlet(route) {
-    return route.outlet || PRIMARY_OUTLET;
-}
-/**
- * Sorts the `routes` such that the ones with an outlet matching `outletName` come first.
- * The order of the configs is otherwise preserved.
- */
-function sortByMatchingOutlets(routes, outletName) {
-    const sortedConfig = routes.filter(r => getOutlet(r) === outletName);
-    sortedConfig.push(...routes.filter(r => getOutlet(r) !== outletName));
-    return sortedConfig;
+const INITIAL_VALUE = Symbol('INITIAL_VALUE');
+function prioritizedGuardValue() {
+    return switchMap(obs => {
+        return combineLatest(obs.map(o => o.pipe(take(1), startWith(INITIAL_VALUE))))
+            .pipe(scan((acc, list) => {
+            let isPending = false;
+            return list.reduce((innerAcc, val, i) => {
+                if (innerAcc !== INITIAL_VALUE)
+                    return innerAcc;
+                // Toggle pending flag if any values haven't been set yet
+                if (val === INITIAL_VALUE)
+                    isPending = true;
+                // Any other return values are only valid if we haven't yet hit a pending
+                // call. This guarantees that in the case of a guard at the bottom of the
+                // tree that returns a redirect, we will wait for the higher priority
+                // guard at the top to finish before performing the redirect.
+                if (!isPending) {
+                    // Early return when we hit a `false` value as that should always
+                    // cancel navigation
+                    if (val === false)
+                        return val;
+                    if (i === list.length - 1 || isUrlTree(val)) {
+                        return val;
+                    }
+                }
+                return innerAcc;
+            }, acc);
+        }, INITIAL_VALUE), filter(item => item !== INITIAL_VALUE), map(item => isUrlTree(item) ? item : item === true), //
+        take(1));
+    });
 }
 
 /**
@@ -2780,6 +2915,9 @@ function addEmptyPathsToChildrenIfNeeded(segmentGroup, consumedSegments, slicedS
             s._sourceSegment = segmentGroup;
             if (relativeLinkResolution === 'legacy') {
                 s._segmentIndexShift = segmentGroup.segments.length;
+                if (typeof ngDevMode === 'undefined' || !!ngDevMode) {
+                    s._segmentIndexShiftCorrected = consumedSegments.length;
+                }
             }
             else {
                 s._segmentIndexShift = consumedSegments.length;
@@ -2880,17 +3018,17 @@ function canLoadFails(route) {
  *
  * Lazy modules are loaded along the way.
  */
-function applyRedirects$1(moduleInjector, configLoader, urlSerializer, urlTree, config) {
-    return new ApplyRedirects(moduleInjector, configLoader, urlSerializer, urlTree, config).apply();
+function applyRedirects$1(injector, configLoader, urlSerializer, urlTree, config) {
+    return new ApplyRedirects(injector, configLoader, urlSerializer, urlTree, config).apply();
 }
 class ApplyRedirects {
-    constructor(moduleInjector, configLoader, urlSerializer, urlTree, config) {
+    constructor(injector, configLoader, urlSerializer, urlTree, config) {
+        this.injector = injector;
         this.configLoader = configLoader;
         this.urlSerializer = urlSerializer;
         this.urlTree = urlTree;
         this.config = config;
         this.allowRedirects = true;
-        this.ngModule = moduleInjector.get(NgModuleRef);
     }
     apply() {
         const splitGroup = split(this.urlTree.root, [], [], this.config).segmentGroup;
@@ -2901,7 +3039,7 @@ class ApplyRedirects {
         // them. We should be able to remove this logic as a "breaking change" but should do some more
         // investigation into the failures first.
         const rootSegmentGroup = new UrlSegmentGroup(splitGroup.segments, splitGroup.children);
-        const expanded$ = this.expandSegmentGroup(this.ngModule, this.config, rootSegmentGroup, PRIMARY_OUTLET);
+        const expanded$ = this.expandSegmentGroup(this.injector, this.config, rootSegmentGroup, PRIMARY_OUTLET);
         const urlTrees$ = expanded$.pipe(map((rootSegmentGroup) => {
             return this.createUrlTree(squashSegmentGroup(rootSegmentGroup), this.urlTree.queryParams, this.urlTree.fragment);
         }));
@@ -2920,7 +3058,7 @@ class ApplyRedirects {
         }));
     }
     match(tree) {
-        const expanded$ = this.expandSegmentGroup(this.ngModule, this.config, tree.root, PRIMARY_OUTLET);
+        const expanded$ = this.expandSegmentGroup(this.injector, this.config, tree.root, PRIMARY_OUTLET);
         const mapped$ = expanded$.pipe(map((rootSegmentGroup) => {
             return this.createUrlTree(squashSegmentGroup(rootSegmentGroup), tree.queryParams, tree.fragment);
         }));
@@ -2940,15 +3078,15 @@ class ApplyRedirects {
             rootCandidate;
         return new UrlTree(root, queryParams, fragment);
     }
-    expandSegmentGroup(ngModule, routes, segmentGroup, outlet) {
+    expandSegmentGroup(injector, routes, segmentGroup, outlet) {
         if (segmentGroup.segments.length === 0 && segmentGroup.hasChildren()) {
-            return this.expandChildren(ngModule, routes, segmentGroup)
+            return this.expandChildren(injector, routes, segmentGroup)
                 .pipe(map((children) => new UrlSegmentGroup([], children)));
         }
-        return this.expandSegment(ngModule, segmentGroup, routes, segmentGroup.segments, outlet, true);
+        return this.expandSegment(injector, segmentGroup, routes, segmentGroup.segments, outlet, true);
     }
     // Recursively expand segment groups for all the child outlets
-    expandChildren(ngModule, routes, segmentGroup) {
+    expandChildren(injector, routes, segmentGroup) {
         // Expand outlets one at a time, starting with the primary outlet. We need to do it this way
         // because an absolute redirect from the primary outlet takes precedence.
         const childOutlets = [];
@@ -2967,16 +3105,16 @@ class ApplyRedirects {
             // first, followed by routes for other outlets, which might match if they have an
             // empty path.
             const sortedRoutes = sortByMatchingOutlets(routes, childOutlet);
-            return this.expandSegmentGroup(ngModule, sortedRoutes, child, childOutlet)
+            return this.expandSegmentGroup(injector, sortedRoutes, child, childOutlet)
                 .pipe(map(s => ({ segment: s, outlet: childOutlet })));
         }), scan((children, expandedChild) => {
             children[expandedChild.outlet] = expandedChild.segment;
             return children;
         }, {}), last$1());
     }
-    expandSegment(ngModule, segmentGroup, routes, segments, outlet, allowRedirects) {
-        return from(routes).pipe(concatMap((r) => {
-            const expanded$ = this.expandSegmentAgainstRoute(ngModule, segmentGroup, routes, r, segments, outlet, allowRedirects);
+    expandSegment(injector, segmentGroup, routes, segments, outlet, allowRedirects) {
+        return from(routes).pipe(concatMap(r => {
+            const expanded$ = this.expandSegmentAgainstRoute(injector, segmentGroup, routes, r, segments, outlet, allowRedirects);
             return expanded$.pipe(catchError((e) => {
                 if (e instanceof NoMatch$1) {
                     return of(null);
@@ -2993,35 +3131,35 @@ class ApplyRedirects {
             throw e;
         }));
     }
-    expandSegmentAgainstRoute(ngModule, segmentGroup, routes, route, paths, outlet, allowRedirects) {
+    expandSegmentAgainstRoute(injector, segmentGroup, routes, route, paths, outlet, allowRedirects) {
         if (!isImmediateMatch(route, segmentGroup, paths, outlet)) {
             return noMatch(segmentGroup);
         }
         if (route.redirectTo === undefined) {
-            return this.matchSegmentAgainstRoute(ngModule, segmentGroup, route, paths, outlet);
+            return this.matchSegmentAgainstRoute(injector, segmentGroup, route, paths, outlet);
         }
         if (allowRedirects && this.allowRedirects) {
-            return this.expandSegmentAgainstRouteUsingRedirect(ngModule, segmentGroup, routes, route, paths, outlet);
+            return this.expandSegmentAgainstRouteUsingRedirect(injector, segmentGroup, routes, route, paths, outlet);
         }
         return noMatch(segmentGroup);
     }
-    expandSegmentAgainstRouteUsingRedirect(ngModule, segmentGroup, routes, route, segments, outlet) {
+    expandSegmentAgainstRouteUsingRedirect(injector, segmentGroup, routes, route, segments, outlet) {
         if (route.path === '**') {
-            return this.expandWildCardWithParamsAgainstRouteUsingRedirect(ngModule, routes, route, outlet);
+            return this.expandWildCardWithParamsAgainstRouteUsingRedirect(injector, routes, route, outlet);
         }
-        return this.expandRegularSegmentAgainstRouteUsingRedirect(ngModule, segmentGroup, routes, route, segments, outlet);
+        return this.expandRegularSegmentAgainstRouteUsingRedirect(injector, segmentGroup, routes, route, segments, outlet);
     }
-    expandWildCardWithParamsAgainstRouteUsingRedirect(ngModule, routes, route, outlet) {
+    expandWildCardWithParamsAgainstRouteUsingRedirect(injector, routes, route, outlet) {
         const newTree = this.applyRedirectCommands([], route.redirectTo, {});
         if (route.redirectTo.startsWith('/')) {
             return absoluteRedirect(newTree);
         }
         return this.lineralizeSegments(route, newTree).pipe(mergeMap((newSegments) => {
             const group = new UrlSegmentGroup(newSegments, {});
-            return this.expandSegment(ngModule, group, routes, newSegments, outlet, false);
+            return this.expandSegment(injector, group, routes, newSegments, outlet, false);
         }));
     }
-    expandRegularSegmentAgainstRouteUsingRedirect(ngModule, segmentGroup, routes, route, segments, outlet) {
+    expandRegularSegmentAgainstRouteUsingRedirect(injector, segmentGroup, routes, route, segments, outlet) {
         const { matched, consumedSegments, remainingSegments, positionalParamSegments } = match(segmentGroup, route, segments);
         if (!matched)
             return noMatch(segmentGroup);
@@ -3030,16 +3168,20 @@ class ApplyRedirects {
             return absoluteRedirect(newTree);
         }
         return this.lineralizeSegments(route, newTree).pipe(mergeMap((newSegments) => {
-            return this.expandSegment(ngModule, segmentGroup, routes, newSegments.concat(remainingSegments), outlet, false);
+            return this.expandSegment(injector, segmentGroup, routes, newSegments.concat(remainingSegments), outlet, false);
         }));
     }
-    matchSegmentAgainstRoute(ngModule, rawSegmentGroup, route, segments, outlet) {
+    matchSegmentAgainstRoute(injector, rawSegmentGroup, route, segments, outlet) {
         if (route.path === '**') {
+            // Only create the Route's `EnvironmentInjector` if it matches the attempted navigation
+            injector = getOrCreateRouteInjectorIfNeeded(route, injector);
             if (route.loadChildren) {
-                const loaded$ = route._loadedConfig ? of(route._loadedConfig) :
-                    this.configLoader.load(ngModule.injector, route);
+                const loaded$ = route._loadedRoutes ?
+                    of({ routes: route._loadedRoutes, injector: route._loadedInjector }) :
+                    this.configLoader.loadChildren(injector, route);
                 return loaded$.pipe(map((cfg) => {
-                    route._loadedConfig = cfg;
+                    route._loadedRoutes = cfg.routes;
+                    route._loadedInjector = cfg.injector;
                     return new UrlSegmentGroup(segments, {});
                 }));
             }
@@ -3048,55 +3190,57 @@ class ApplyRedirects {
         const { matched, consumedSegments, remainingSegments } = match(rawSegmentGroup, route, segments);
         if (!matched)
             return noMatch(rawSegmentGroup);
-        const childConfig$ = this.getChildConfig(ngModule, route, segments);
+        // Only create the Route's `EnvironmentInjector` if it matches the attempted navigation
+        injector = getOrCreateRouteInjectorIfNeeded(route, injector);
+        const childConfig$ = this.getChildConfig(injector, route, segments);
         return childConfig$.pipe(mergeMap((routerConfig) => {
-            const childModule = routerConfig.module;
+            const childInjector = routerConfig.injector ?? injector;
             const childConfig = routerConfig.routes;
             const { segmentGroup: splitSegmentGroup, slicedSegments } = split(rawSegmentGroup, consumedSegments, remainingSegments, childConfig);
             // See comment on the other call to `split` about why this is necessary.
             const segmentGroup = new UrlSegmentGroup(splitSegmentGroup.segments, splitSegmentGroup.children);
             if (slicedSegments.length === 0 && segmentGroup.hasChildren()) {
-                const expanded$ = this.expandChildren(childModule, childConfig, segmentGroup);
+                const expanded$ = this.expandChildren(childInjector, childConfig, segmentGroup);
                 return expanded$.pipe(map((children) => new UrlSegmentGroup(consumedSegments, children)));
             }
             if (childConfig.length === 0 && slicedSegments.length === 0) {
                 return of(new UrlSegmentGroup(consumedSegments, {}));
             }
             const matchedOnOutlet = getOutlet(route) === outlet;
-            const expanded$ = this.expandSegment(childModule, segmentGroup, childConfig, slicedSegments, matchedOnOutlet ? PRIMARY_OUTLET : outlet, true);
+            const expanded$ = this.expandSegment(childInjector, segmentGroup, childConfig, slicedSegments, matchedOnOutlet ? PRIMARY_OUTLET : outlet, true);
             return expanded$.pipe(map((cs) => new UrlSegmentGroup(consumedSegments.concat(cs.segments), cs.children)));
         }));
     }
-    getChildConfig(ngModule, route, segments) {
+    getChildConfig(injector, route, segments) {
         if (route.children) {
             // The children belong to the same module
-            return of(new LoadedRouterConfig(route.children, ngModule));
+            return of({ routes: route.children, injector });
         }
         if (route.loadChildren) {
             // lazy children belong to the loaded module
-            if (route._loadedConfig !== undefined) {
-                return of(route._loadedConfig);
+            if (route._loadedRoutes !== undefined) {
+                return of({ routes: route._loadedRoutes, injector: route._loadedInjector });
             }
-            return this.runCanLoadGuards(ngModule.injector, route, segments)
+            return this.runCanLoadGuards(injector, route, segments)
                 .pipe(mergeMap((shouldLoadResult) => {
                 if (shouldLoadResult) {
-                    return this.configLoader.load(ngModule.injector, route)
-                        .pipe(map((cfg) => {
-                        route._loadedConfig = cfg;
-                        return cfg;
+                    return this.configLoader.loadChildren(injector, route)
+                        .pipe(tap((cfg) => {
+                        route._loadedRoutes = cfg.routes;
+                        route._loadedInjector = cfg.injector;
                     }));
                 }
                 return canLoadFails(route);
             }));
         }
-        return of(new LoadedRouterConfig([], ngModule));
+        return of({ routes: [], injector });
     }
-    runCanLoadGuards(moduleInjector, route, segments) {
+    runCanLoadGuards(injector, route, segments) {
         const canLoad = route.canLoad;
         if (!canLoad || canLoad.length === 0)
             return of(true);
         const canLoadObservables = canLoad.map((injectionToken) => {
-            const guard = moduleInjector.get(injectionToken);
+            const guard = injector.get(injectionToken);
             let guardVal;
             if (isCanLoad(guard)) {
                 guardVal = guard.canLoad(route, segments);
@@ -3224,8 +3368,8 @@ function squashSegmentGroup(segmentGroup) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function applyRedirects(moduleInjector, configLoader, urlSerializer, config) {
-    return switchMap(t => applyRedirects$1(moduleInjector, configLoader, urlSerializer, t.extractedUrl, config)
+function applyRedirects(environmentInjector, configLoader, urlSerializer, config) {
+    return switchMap(t => applyRedirects$1(environmentInjector, configLoader, urlSerializer, t.extractedUrl, config)
         .pipe(map(urlAfterRedirects => ({ ...t, urlAfterRedirects }))));
 }
 
@@ -3259,21 +3403,11 @@ function getCanActivateChild(p) {
         return null;
     return { node: p, guards: canActivateChild };
 }
-function getToken(token, snapshot, moduleInjector) {
-    const config = getClosestLoadedConfig(snapshot);
-    const injector = config ? config.module.injector : moduleInjector;
+function getToken(token, snapshot, fallbackInjector) {
+    const routeInjector = getClosestRouteInjector(snapshot);
+    const injector = routeInjector ?? fallbackInjector;
     return injector.get(token);
 }
-function getClosestLoadedConfig(snapshot) {
-    if (!snapshot)
-        return null;
-    for (let s = snapshot.parent; s; s = s.parent) {
-        const route = s.routeConfig;
-        if (route && route._loadedConfig)
-            return route._loadedConfig;
-    }
-    return null;
-}
 function getChildRouteGuards(futureNode, currNode, contexts, futurePath, checks = {
     canDeactivateChecks: [],
     canActivateChecks: []
@@ -3517,6 +3651,7 @@ function runCanDeactivate(component, currARS, currRSS, futureRSS, moduleInjector
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+const NG_DEV_MODE$2 = typeof ngDevMode === 'undefined' || !!ngDevMode;
 class NoMatch {
 }
 function newObservableError(e) {
@@ -3632,7 +3767,13 @@ class Recognizer {
         let remainingSegments = [];
         if (route.path === '**') {
             const params = segments.length > 0 ? last(segments).parameters : {};
-            snapshot = new ActivatedRouteSnapshot(segments, params, Object.freeze({ ...this.urlTree.queryParams }), this.urlTree.fragment, getData(route), getOutlet(route), route.component, route, getSourceSegmentGroup(rawSegment), getPathIndexShift(rawSegment) + segments.length, getResolve(route));
+            const pathIndexShift = getPathIndexShift(rawSegment) + segments.length;
+            snapshot = new ActivatedRouteSnapshot(segments, params, Object.freeze({ ...this.urlTree.queryParams }), this.urlTree.fragment, getData(route), getOutlet(route), route.component ?? route._loadedComponent ?? null, route, getSourceSegmentGroup(rawSegment), pathIndexShift, getResolve(route), 
+            // NG_DEV_MODE is used to prevent the getCorrectedPathIndexShift function from affecting
+            // production bundle size. This value is intended only to surface a warning to users
+            // depending on `relativeLinkResolution: 'legacy'` in dev mode.
+            (NG_DEV_MODE$2 ? getCorrectedPathIndexShift(rawSegment) + segments.length :
+                pathIndexShift));
         }
         else {
             const result = match(rawSegment, route, segments);
@@ -3641,7 +3782,9 @@ class Recognizer {
             }
             consumedSegments = result.consumedSegments;
             remainingSegments = result.remainingSegments;
-            snapshot = new ActivatedRouteSnapshot(consumedSegments, result.parameters, Object.freeze({ ...this.urlTree.queryParams }), this.urlTree.fragment, getData(route), getOutlet(route), route.component, route, getSourceSegmentGroup(rawSegment), getPathIndexShift(rawSegment) + consumedSegments.length, getResolve(route));
+            const pathIndexShift = getPathIndexShift(rawSegment) + consumedSegments.length;
+            snapshot = new ActivatedRouteSnapshot(consumedSegments, result.parameters, Object.freeze({ ...this.urlTree.queryParams }), this.urlTree.fragment, getData(route), getOutlet(route), route.component ?? route._loadedComponent ?? null, route, getSourceSegmentGroup(rawSegment), pathIndexShift, getResolve(route), (NG_DEV_MODE$2 ? getCorrectedPathIndexShift(rawSegment) + consumedSegments.length :
+                pathIndexShift));
         }
         const childConfig = getChildConfig(route);
         const { segmentGroup, slicedSegments } = split(rawSegment, consumedSegments, remainingSegments, 
@@ -3689,7 +3832,7 @@ function getChildConfig(route) {
         return route.children;
     }
     if (route.loadChildren) {
-        return route._loadedConfig.routes;
+        return route._loadedRoutes;
     }
     return [];
 }
@@ -3751,10 +3894,19 @@ function getSourceSegmentGroup(segmentGroup) {
 }
 function getPathIndexShift(segmentGroup) {
     let s = segmentGroup;
-    let res = (s._segmentIndexShift ? s._segmentIndexShift : 0);
+    let res = s._segmentIndexShift ?? 0;
+    while (s._sourceSegment) {
+        s = s._sourceSegment;
+        res += s._segmentIndexShift ?? 0;
+    }
+    return res - 1;
+}
+function getCorrectedPathIndexShift(segmentGroup) {
+    let s = segmentGroup;
+    let res = s._segmentIndexShiftCorrected ?? s._segmentIndexShift ?? 0;
     while (s._sourceSegment) {
         s = s._sourceSegment;
-        res += (s._segmentIndexShift ? s._segmentIndexShift : 0);
+        res += s._segmentIndexShiftCorrected ?? s._segmentIndexShift ?? 0;
     }
     return res - 1;
 }
@@ -3804,22 +3956,16 @@ function resolveData(paramsInheritanceStrategy, moduleInjector) {
 function runResolve(futureARS, futureRSS, paramsInheritanceStrategy, moduleInjector) {
     const config = futureARS.routeConfig;
     const resolve = futureARS._resolve;
-    const data = { ...futureARS.data };
-    if (config?.title !== undefined) {
-        if (typeof config.title === 'string' || config.title === null) {
-            data[RouteTitle] = config.title;
-        }
-        else {
-            resolve[RouteTitle] = config.title;
-        }
+    if (config?.title !== undefined && !hasStaticTitle(config)) {
+        resolve[RouteTitle] = config.title;
     }
     return resolveNode(resolve, futureARS, futureRSS, moduleInjector)
         .pipe(map((resolvedData) => {
         futureARS._resolvedData = resolvedData;
-        futureARS.data = {
-            ...data,
-            ...inheritedParamsDataResolve(futureARS, paramsInheritanceStrategy).resolve
-        };
+        futureARS.data = inheritedParamsDataResolve(futureARS, paramsInheritanceStrategy).resolve;
+        if (config && hasStaticTitle(config)) {
+            futureARS.data[RouteTitle] = config.title;
+        }
         return null;
     }));
 }
@@ -3830,16 +3976,9 @@ function resolveNode(resolve, futureARS, futureRSS, moduleInjector) {
     }
     const data = {};
     return from(keys).pipe(mergeMap(key => getResolver(resolve[key], futureARS, futureRSS, moduleInjector)
-        .pipe(take(1), tap((value) => {
+        .pipe(first(), tap((value) => {
         data[key] = value;
-    }))), takeLast(1), mergeMap(() => {
-        // Ensure all resolvers returned values, otherwise don't emit any "next" and just complete
-        // the chain which will cancel navigation
-        if (getDataKeys(data).length === keys.length) {
-            return of(data);
-        }
-        return EMPTY;
-    }));
+    }))), takeLast(1), mapTo(data), catchError((e) => e instanceof EmptyError ? EMPTY : throwError(e)));
 }
 function getDataKeys(obj) {
     return [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];
@@ -3849,6 +3988,9 @@ function getResolver(injectionToken, futureARS, futureRSS, moduleInjector) {
     return resolver.resolve ? wrapIntoObservable(resolver.resolve(futureARS, futureRSS)) :
         wrapIntoObservable(resolver(futureARS, futureRSS));
 }
+function hasStaticTitle(config) {
+    return typeof config.title === 'string' || config.title === null;
+}
 
 /**
  * @license
@@ -3945,6 +4087,7 @@ class DefaultRouteReuseStrategy extends BaseRouteReuseStrategy {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+const NG_DEV_MODE$1 = typeof ngDevMode === 'undefined' || !!ngDevMode;
 /**
  * The [DI token](guide/glossary/#di-token) for a router configuration.
  *
@@ -3957,43 +4100,84 @@ class DefaultRouteReuseStrategy extends BaseRouteReuseStrategy {
  */
 const ROUTES = new InjectionToken('ROUTES');
 class RouterConfigLoader {
-    constructor(injector, compiler, onLoadStartListener, onLoadEndListener) {
+    constructor(injector, compiler) {
         this.injector = injector;
         this.compiler = compiler;
-        this.onLoadStartListener = onLoadStartListener;
-        this.onLoadEndListener = onLoadEndListener;
+        this.componentLoaders = new WeakMap();
+        this.childrenLoaders = new WeakMap();
+    }
+    loadComponent(route) {
+        if (this.componentLoaders.get(route)) {
+            return this.componentLoaders.get(route);
+        }
+        else if (route._loadedComponent) {
+            return of(route._loadedComponent);
+        }
+        if (this.onLoadStartListener) {
+            this.onLoadStartListener(route);
+        }
+        const loadRunner = wrapIntoObservable(route.loadComponent())
+            .pipe(tap(component => {
+            if (this.onLoadEndListener) {
+                this.onLoadEndListener(route);
+            }
+            NG_DEV_MODE$1 && 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());
+        this.componentLoaders.set(route, loader);
+        return loader;
     }
-    load(parentInjector, route) {
-        if (route._loader$) {
-            return route._loader$;
+    loadChildren(parentInjector, route) {
+        if (this.childrenLoaders.get(route)) {
+            return this.childrenLoaders.get(route);
+        }
+        else if (route._loadedRoutes) {
+            return of({ routes: route._loadedRoutes, injector: route._loadedInjector });
         }
         if (this.onLoadStartListener) {
             this.onLoadStartListener(route);
         }
-        const moduleFactory$ = this.loadModuleFactory(route.loadChildren);
-        const loadRunner = moduleFactory$.pipe(map((factory) => {
+        const moduleFactoryOrRoutes$ = this.loadModuleFactoryOrRoutes(route.loadChildren);
+        const loadRunner = moduleFactoryOrRoutes$.pipe(map((factoryOrRoutes) => {
             if (this.onLoadEndListener) {
                 this.onLoadEndListener(route);
             }
-            const module = factory.create(parentInjector);
-            // 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.
-            return new LoadedRouterConfig(flatten(module.injector.get(ROUTES, undefined, InjectFlags.Self | InjectFlags.Optional))
-                .map(standardizeConfig), module);
-        }), catchError((err) => {
-            route._loader$ = undefined;
-            throw err;
+            // 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 = flatten(injector.get(ROUTES, [], InjectFlags.Self | InjectFlags.Optional));
+            }
+            const routes = rawRoutes.map(standardizeConfig);
+            NG_DEV_MODE$1 && validateConfig(routes, route.path, requireStandaloneComponents);
+            return { routes, injector };
+        }), finalize(() => {
+            this.childrenLoaders.delete(route);
         }));
         // Use custom ConnectableObservable as share in runners pipe increasing the bundle size too much
-        route._loader$ = new ConnectableObservable(loadRunner, () => new Subject())
+        const loader = new ConnectableObservable(loadRunner, () => new Subject())
             .pipe(refCount());
-        return route._loader$;
+        this.childrenLoaders.set(route, loader);
+        return loader;
     }
-    loadModuleFactory(loadChildren) {
+    loadModuleFactoryOrRoutes(loadChildren) {
         return wrapIntoObservable(loadChildren()).pipe(mergeMap((t) => {
-            if (t instanceof NgModuleFactory) {
+            if (t instanceof NgModuleFactory || Array.isArray(t)) {
                 return of(t);
             }
             else {
@@ -4002,6 +4186,11 @@ class RouterConfigLoader {
         }));
     }
 }
+RouterConfigLoader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterConfigLoader, deps: [{ token: i0.Injector }, { token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
+RouterConfigLoader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterConfigLoader });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterConfigLoader, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Compiler }]; } });
 
 /**
  * @license
@@ -4041,6 +4230,7 @@ class DefaultUrlHandlingStrategy {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+const NG_DEV_MODE = typeof ngDevMode === 'undefined' || !!ngDevMode;
 function defaultErrorHandler(error) {
     throw error;
 }
@@ -4183,6 +4373,8 @@ class Router {
         /**
          * Enables a bug fix that corrects relative link resolution in components with empty paths.
          * @see `RouterModule`
+         *
+         * @deprecated
          */
         this.relativeLinkResolution = 'corrected';
         /**
@@ -4210,6 +4402,9 @@ class Router {
         this.canceledNavigationResolution = 'replace';
         const onLoadStart = (r) => this.triggerEvent(new RouteConfigLoadStart(r));
         const onLoadEnd = (r) => this.triggerEvent(new RouteConfigLoadEnd(r));
+        this.configLoader = injector.get(RouterConfigLoader);
+        this.configLoader.onLoadEndListener = onLoadEnd;
+        this.configLoader.onLoadStartListener = onLoadStart;
         this.ngModule = injector.get(NgModuleRef);
         this.console = injector.get(ɵConsole);
         const ngZone = injector.get(NgZone);
@@ -4218,7 +4413,6 @@ class Router {
         this.currentUrlTree = createEmptyUrlTree();
         this.rawUrlTree = this.currentUrlTree;
         this.browserUrlTree = this.currentUrlTree;
-        this.configLoader = new RouterConfigLoader(injector, compiler, onLoadStart, onLoadEnd);
         this.routerState = createEmptyState(this.currentUrlTree, this.rootComponentType);
         this.transitions = new BehaviorSubject({
             id: 0,
@@ -4427,6 +4621,25 @@ class Router {
                     skipLocationChange: !!skipLocationChange,
                     replaceUrl: !!replaceUrl,
                 });
+            }), 
+            // --- LOAD COMPONENTS ---
+            switchTap((t) => {
+                const loadComponents = (route) => {
+                    const loaders = [];
+                    if (route.routeConfig?.loadComponent &&
+                        !route.routeConfig._loadedComponent) {
+                        loaders.push(this.configLoader.loadComponent(route.routeConfig)
+                            .pipe(tap(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(), take(1));
             }), map((t) => {
                 const targetRouterState = createRouterState(this.routeReuseStrategy, t.targetSnapshot, t.currentRouterState);
                 return ({ ...t, targetRouterState });
@@ -4505,23 +4718,17 @@ class Router {
                         t.resolve(false);
                     }
                     else {
-                        // setTimeout is required so this navigation finishes with
-                        // the return EMPTY below. If it isn't allowed to finish
-                        // processing, there can be multiple navigations to the same
-                        // URL.
-                        setTimeout(() => {
-                            const mergedTree = this.urlHandlingStrategy.merge(e.url, this.rawUrlTree);
-                            const extras = {
-                                skipLocationChange: t.extras.skipLocationChange,
-                                // The URL is already updated at this point if we have 'eager' URL
-                                // updates or if the navigation was triggered by the browser (back
-                                // button, URL bar, etc). We want to replace that item in history if
-                                // the navigation is rejected.
-                                replaceUrl: this.urlUpdateStrategy === 'eager' ||
-                                    isBrowserTriggeredNavigation(t.source)
-                            };
-                            this.scheduleNavigation(mergedTree, 'imperative', null, extras, { resolve: t.resolve, reject: t.reject, promise: t.promise });
-                        }, 0);
+                        const mergedTree = this.urlHandlingStrategy.merge(e.url, this.rawUrlTree);
+                        const extras = {
+                            skipLocationChange: t.extras.skipLocationChange,
+                            // The URL is already updated at this point if we have 'eager' URL
+                            // updates or if the navigation was triggered by the browser (back
+                            // button, URL bar, etc). We want to replace that item in history if
+                            // the navigation is rejected.
+                            replaceUrl: this.urlUpdateStrategy === 'eager' ||
+                                isBrowserTriggeredNavigation(t.source)
+                        };
+                        this.scheduleNavigation(mergedTree, 'imperative', null, extras, { resolve: t.resolve, reject: t.reject, promise: t.promise });
                     }
                     /* All other errors should reset to the router's internal URL reference to
                      * the pre-error state. */
@@ -4631,7 +4838,7 @@ class Router {
      * ```
      */
     resetConfig(config) {
-        validateConfig(config);
+        NG_DEV_MODE && validateConfig(config);
         this.config = config.map(standardizeConfig);
         this.navigated = false;
         this.lastSuccessfulId = -1;
@@ -4986,9 +5193,9 @@ class Router {
         return { navigationId };
     }
 }
-Router.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: Router, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
-Router.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: Router });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: Router, decorators: [{
+Router.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: Router, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+Router.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: Router });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: Router, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Type }, { type: UrlSerializer }, { type: ChildrenOutletContexts }, { type: i3.Location }, { type: i0.Injector }, { type: i0.Compiler }, { type: undefined }]; } });
 function validateCommands(commands) {
@@ -5187,9 +5394,9 @@ class RouterLink {
         });
     }
 }
-RouterLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterLink, deps: [{ token: Router }, { token: ActivatedRoute }, { token: 'tabindex', attribute: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-RouterLink.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: { queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", relativeTo: "relativeTo", routerLink: "routerLink" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterLink, decorators: [{
+RouterLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterLink, deps: [{ token: Router }, { token: ActivatedRoute }, { token: 'tabindex', attribute: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+RouterLink.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.2", type: RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: { queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", relativeTo: "relativeTo", routerLink: "routerLink" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterLink, decorators: [{
             type: Directive,
             args: [{ selector: ':not(a):not(area)[routerLink]' }]
         }], ctorParameters: function () { return [{ type: Router }, { type: ActivatedRoute }, { type: undefined, decorators: [{
@@ -5306,9 +5513,9 @@ class RouterLinkWithHref {
         });
     }
 }
-RouterLinkWithHref.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterLinkWithHref, deps: [{ token: Router }, { token: ActivatedRoute }, { token: i3.LocationStrategy }], target: i0.ɵɵFactoryTarget.Directive });
-RouterLinkWithHref.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: { target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", relativeTo: "relativeTo", routerLink: "routerLink" }, host: { listeners: { "click": "onClick($event.button,$event.ctrlKey,$event.shiftKey,$event.altKey,$event.metaKey)" }, properties: { "attr.target": "this.target", "attr.href": "this.href" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterLinkWithHref, decorators: [{
+RouterLinkWithHref.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterLinkWithHref, deps: [{ token: Router }, { token: ActivatedRoute }, { token: i3.LocationStrategy }], target: i0.ɵɵFactoryTarget.Directive });
+RouterLinkWithHref.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.2", type: RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: { target: "target", queryParams: "queryParams", fragment: "fragment", queryParamsHandling: "queryParamsHandling", preserveFragment: "preserveFragment", skipLocationChange: "skipLocationChange", replaceUrl: "replaceUrl", state: "state", relativeTo: "relativeTo", routerLink: "routerLink" }, host: { listeners: { "click": "onClick($event.button,$event.ctrlKey,$event.shiftKey,$event.altKey,$event.metaKey)" }, properties: { "attr.target": "this.target", "attr.href": "this.href" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterLinkWithHref, decorators: [{
             type: Directive,
             args: [{ selector: 'a[routerLink],area[routerLink]' }]
         }], ctorParameters: function () { return [{ type: Router }, { type: ActivatedRoute }, { type: i3.LocationStrategy }]; }, propDecorators: { target: [{
@@ -5405,6 +5612,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9",
  * </div>
  * ```
  *
+ * The `RouterLinkActive` directive can also be used to set the aria-current attribute
+ * to provide an alternative distinction for active elements to visually impaired users.
+ *
+ * For example, the following code adds the 'active' class to the Home Page link when it is
+ * indeed active and in such case also sets its aria-current attribute to 'page':
+ *
+ * ```
+ * <a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home Page</a>
+ * ```
+ *
  * @ngModule RouterModule
  *
  * @publicApi
@@ -5498,6 +5715,12 @@ class RouterLinkActive {
                         this.renderer.removeClass(this.element.nativeElement, c);
                     }
                 });
+                if (hasActiveLinks && this.ariaCurrentWhenActive !== undefined) {
+                    this.renderer.setAttribute(this.element.nativeElement, 'aria-current', this.ariaCurrentWhenActive.toString());
+                }
+                else {
+                    this.renderer.removeAttribute(this.element.nativeElement, 'aria-current');
+                }
                 // Emit on isActiveChange after classes are updated
                 this.isActiveChange.emit(hasActiveLinks);
             }
@@ -5517,9 +5740,9 @@ class RouterLinkActive {
             this.links.some(isActiveCheckFn) || this.linksWithHrefs.some(isActiveCheckFn);
     }
 }
-RouterLinkActive.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterLinkActive, deps: [{ token: Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: RouterLink, optional: true }, { token: RouterLinkWithHref, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-RouterLinkActive.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: { routerLinkActiveOptions: "routerLinkActiveOptions", routerLinkActive: "routerLinkActive" }, outputs: { isActiveChange: "isActiveChange" }, queries: [{ propertyName: "links", predicate: RouterLink, descendants: true }, { propertyName: "linksWithHrefs", predicate: RouterLinkWithHref, descendants: true }], exportAs: ["routerLinkActive"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterLinkActive, decorators: [{
+RouterLinkActive.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterLinkActive, deps: [{ token: Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: RouterLink, optional: true }, { token: RouterLinkWithHref, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+RouterLinkActive.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.2", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: { routerLinkActiveOptions: "routerLinkActiveOptions", ariaCurrentWhenActive: "ariaCurrentWhenActive", routerLinkActive: "routerLinkActive" }, outputs: { isActiveChange: "isActiveChange" }, queries: [{ propertyName: "links", predicate: RouterLink, descendants: true }, { propertyName: "linksWithHrefs", predicate: RouterLinkWithHref, descendants: true }], exportAs: ["routerLinkActive"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterLinkActive, decorators: [{
             type: Directive,
             args: [{
                     selector: '[routerLinkActive]',
@@ -5537,6 +5760,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9",
                 args: [RouterLinkWithHref, { descendants: true }]
             }], routerLinkActiveOptions: [{
                 type: Input
+            }], ariaCurrentWhenActive: [{
+                type: Input
             }], isActiveChange: [{
                 type: Output
             }], routerLinkActive: [{
@@ -5620,9 +5845,9 @@ class DefaultTitleStrategy extends TitleStrategy {
         }
     }
 }
-DefaultTitleStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: DefaultTitleStrategy, deps: [{ token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
-DefaultTitleStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: DefaultTitleStrategy, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: DefaultTitleStrategy, decorators: [{
+DefaultTitleStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: DefaultTitleStrategy, deps: [{ token: i1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+DefaultTitleStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: DefaultTitleStrategy, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: DefaultTitleStrategy, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.Title }]; } });
@@ -5686,13 +5911,11 @@ class NoPreloading {
  * @publicApi
  */
 class RouterPreloader {
-    constructor(router, compiler, injector, preloadingStrategy) {
+    constructor(router, compiler, injector, preloadingStrategy, loader) {
         this.router = router;
         this.injector = injector;
         this.preloadingStrategy = preloadingStrategy;
-        const onStartLoad = (r) => router.triggerEvent(new RouteConfigLoadStart(r));
-        const onEndLoad = (r) => router.triggerEvent(new RouteConfigLoadEnd(r));
-        this.loader = new RouterConfigLoader(injector, compiler, onStartLoad, onEndLoad);
+        this.loader = loader;
     }
     setUpPreloading() {
         this.subscription =
@@ -5701,8 +5924,7 @@ class RouterPreloader {
                 .subscribe(() => { });
     }
     preload() {
-        const ngModule = this.injector.get(NgModuleRef);
-        return this.processRoutes(ngModule, this.router.config);
+        return this.processRoutes(this.injector, this.router.config);
     }
     /** @nodoc */
     ngOnDestroy() {
@@ -5710,41 +5932,59 @@ class RouterPreloader {
             this.subscription.unsubscribe();
         }
     }
-    processRoutes(ngModule, routes) {
+    processRoutes(injector, routes) {
         const res = [];
         for (const route of routes) {
-            // we already have the config loaded, just recurse
-            if (route.loadChildren && !route.canLoad && route._loadedConfig) {
-                const childConfig = route._loadedConfig;
-                res.push(this.processRoutes(childConfig.module, childConfig.routes));
-                // no config loaded, fetch the config
+            if (route.providers && !route._injector) {
+                route._injector =
+                    createEnvironmentInjector(route.providers, injector, `Route: ${route.path}`);
             }
-            else if (route.loadChildren && !route.canLoad) {
-                res.push(this.preloadConfig(ngModule, route));
-                // recurse into children
+            const injectorForCurrentRoute = route._injector ?? injector;
+            const injectorForChildren = route._loadedInjector ?? injectorForCurrentRoute;
+            if ((route.loadChildren && !route._loadedRoutes) ||
+                (route.loadComponent && !route._loadedComponent)) {
+                res.push(this.preloadConfig(injectorForCurrentRoute, route));
             }
-            else if (route.children) {
-                res.push(this.processRoutes(ngModule, route.children));
+            else if (route.children || route._loadedRoutes) {
+                res.push(this.processRoutes(injectorForChildren, (route.children ?? route._loadedRoutes)));
             }
         }
-        return from(res).pipe(mergeAll(), map((_) => void 0));
+        return from(res).pipe(mergeAll());
     }
-    preloadConfig(ngModule, route) {
+    preloadConfig(injector, route) {
         return this.preloadingStrategy.preload(route, () => {
-            const loaded$ = route._loadedConfig ? of(route._loadedConfig) :
-                this.loader.load(ngModule.injector, route);
-            return loaded$.pipe(mergeMap((config) => {
-                route._loadedConfig = config;
-                return this.processRoutes(config.module, config.routes);
+            let loadedChildren$;
+            if (route.loadChildren && route.canLoad === undefined) {
+                loadedChildren$ = this.loader.loadChildren(injector, route);
+            }
+            else {
+                loadedChildren$ = of(null);
+            }
+            const recursiveLoadChildren$ = loadedChildren$.pipe(mergeMap((config) => {
+                if (config === null) {
+                    return of(void 0);
+                }
+                route._loadedRoutes = config.routes;
+                route._loadedInjector = config.injector;
+                // If the loaded config was a module, use that as the module/module injector going
+                // forward. Otherwise, continue using the current module/module injector.
+                return this.processRoutes(config.injector ?? injector, config.routes);
             }));
+            if (route.loadComponent && !route._loadedComponent) {
+                const loadComponent$ = this.loader.loadComponent(route);
+                return from([recursiveLoadChildren$, loadComponent$]).pipe(mergeAll());
+            }
+            else {
+                return recursiveLoadChildren$;
+            }
         });
     }
 }
-RouterPreloader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterPreloader, deps: [{ token: Router }, { token: i0.Compiler }, { token: i0.Injector }, { token: PreloadingStrategy }], target: i0.ɵɵFactoryTarget.Injectable });
-RouterPreloader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterPreloader });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterPreloader, decorators: [{
+RouterPreloader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterPreloader, deps: [{ token: Router }, { token: i0.Compiler }, { token: i0.EnvironmentInjector }, { token: PreloadingStrategy }, { token: RouterConfigLoader }], target: i0.ɵɵFactoryTarget.Injectable });
+RouterPreloader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterPreloader });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterPreloader, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: Router }, { type: i0.Compiler }, { type: i0.Injector }, { type: PreloadingStrategy }]; } });
+        }], ctorParameters: function () { return [{ type: Router }, { type: i0.Compiler }, { type: i0.EnvironmentInjector }, { type: PreloadingStrategy }, { type: RouterConfigLoader }]; } });
 
 /**
  * @license
@@ -5828,9 +6068,9 @@ class RouterScroller {
         }
     }
 }
-RouterScroller.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterScroller, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
-RouterScroller.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterScroller });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterScroller, decorators: [{
+RouterScroller.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterScroller, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+RouterScroller.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterScroller });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterScroller, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: Router }, { type: i3.ViewportScroller }, { type: undefined }]; } });
 
@@ -5873,6 +6113,7 @@ const ROUTER_PROVIDERS = [
     NoPreloading,
     PreloadAllModules,
     { provide: ROUTER_CONFIGURATION, useValue: { enableTracing: false } },
+    RouterConfigLoader,
 ];
 function routerNgProbeToken() {
     return new NgProbeToken('Router', Router);
@@ -5971,10 +6212,10 @@ class RouterModule {
         return { ngModule: RouterModule, providers: [provideRoutes(routes)] };
     }
 }
-RouterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterModule, deps: [{ token: ROUTER_FORROOT_GUARD, optional: true }, { token: Router, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
-RouterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterModule, declarations: [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive, ɵEmptyOutletComponent], exports: [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive, ɵEmptyOutletComponent] });
-RouterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterModule, decorators: [{
+RouterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterModule, deps: [{ token: ROUTER_FORROOT_GUARD, optional: true }, { token: Router, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
+RouterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterModule, declarations: [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive, ɵEmptyOutletComponent], exports: [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive, ɵEmptyOutletComponent] });
+RouterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: ROUTER_DIRECTIVES,
@@ -6036,11 +6277,11 @@ function setupRouter(urlSerializer, contexts, location, injector, compiler, conf
     }
     router.titleStrategy = titleStrategy ?? defaultTitleStrategy;
     assignExtraOptionsToRouter(opts, router);
-    if (opts.enableTracing) {
+    if ((typeof ngDevMode === 'undefined' || ngDevMode) && opts.enableTracing) {
         router.events.subscribe((e) => {
             // tslint:disable:no-console
             console.group?.(`Router Event: ${e.constructor.name}`);
-            console.log(e.toString());
+            console.log(stringifyEvent(e));
             console.log(e);
             console.groupEnd?.();
             // tslint:enable:no-console
@@ -6107,9 +6348,7 @@ class RouterInitializer {
                 router.setUpLocationChangeListener();
                 resolve(true);
             }
-            else if (
-            // TODO: enabled is deprecated as of v11, can be removed in v13
-            opts.initialNavigation === 'enabled' || opts.initialNavigation === 'enabledBlocking') {
+            else if (opts.initialNavigation === 'enabledBlocking') {
                 router.hooks.afterPreactivation = () => {
                     // only the initial navigation should be delayed
                     if (!this.initNavigation) {
@@ -6153,9 +6392,9 @@ class RouterInitializer {
         this.destroyed = true;
     }
 }
-RouterInitializer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterInitializer, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-RouterInitializer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterInitializer });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: RouterInitializer, decorators: [{
+RouterInitializer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterInitializer, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+RouterInitializer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterInitializer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.2", ngImport: i0, type: RouterInitializer, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 function getAppInitializer(r) {
@@ -6195,7 +6434,7 @@ function provideRouterInitializer() {
 /**
  * @publicApi
  */
-const VERSION = new Version('14.0.0-next.9');
+const VERSION = new Version('14.0.0-rc.2');
 
 /**
  * @license