fix(router): fix lazy loading of aux routes (#23459)

Fixes #10981

PR Close #23459

packages/router/src/components/empty_outlet.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+import {Component} from '@angular/core';
+
+/**
+ * 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`.
+ */
+@Component({template: `<router-outlet></router-outlet>`})
+export class EmptyOutletComponent {
+}

packages/router/src/config.ts

@@ -8,6 +8,7 @@
 
 import {NgModuleFactory, NgModuleRef, Type} from '@angular/core';
 import {Observable} from 'rxjs';
+import {EmptyOutletComponent} from './components/empty_outlet';
 import {PRIMARY_OUTLET} from './shared';
 import {UrlSegment, UrlSegmentGroup} from './url_tree';
 
@@ -412,9 +413,10 @@ function validateNode(route: Route, fullPath: string): void {
   if (Array.isArray(route)) {
     throw new Error(`Invalid configuration of route '${fullPath}': Array cannot be specified`);
   }
-  if (!route.component && (route.outlet && route.outlet !== PRIMARY_OUTLET)) {
+  if (!route.component && !route.children && !route.loadChildren &&
+      (route.outlet && route.outlet !== PRIMARY_OUTLET)) {
     throw new Error(
-        `Invalid configuration of route '${fullPath}': a componentless route cannot have a named outlet set`);
+        `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(
@@ -477,8 +479,14 @@ function getFullPath(parentPath: string, currentRoute: Route): string {
   }
 }
 
-
-export function copyConfig(r: Route): Route {
-  const children = r.children && r.children.map(copyConfig);
-  return children ? {...r, children} : {...r};
+/**
+ * Makes a copy of the config and adds any default required properties.
+ */
+export function standardizeConfig(r: Route): Route {
+  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;
 }

packages/router/src/private_export.ts

@@ -7,5 +7,6 @@
  */
 
 
+export {EmptyOutletComponent as ɵEmptyOutletComponent} from './components/empty_outlet';
 export {ROUTER_PROVIDERS as ɵROUTER_PROVIDERS} from './router_module';
 export {flatten as ɵflatten} from './utils/collection';

packages/router/src/router.ts

@@ -12,7 +12,7 @@ import {BehaviorSubject, Observable, Subject, Subscription, of } from 'rxjs';
 import {concatMap, map, mergeMap} from 'rxjs/operators';
 
 import {applyRedirects} from './apply_redirects';
-import {LoadedRouterConfig, QueryParamsHandling, Route, Routes, copyConfig, validateConfig} from './config';
+import {LoadedRouterConfig, QueryParamsHandling, Route, Routes, standardizeConfig, validateConfig} from './config';
 import {createRouterState} from './create_router_state';
 import {createUrlTree} from './create_url_tree';
 import {ActivationEnd, ChildActivationEnd, Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, NavigationTrigger, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events';
@@ -357,7 +357,7 @@ export class Router {
    */
   resetConfig(config: Routes): void {
     validateConfig(config);
-    this.config = config.map(copyConfig);
+    this.config = config.map(standardizeConfig);
     this.navigated = false;
     this.lastSuccessfulId = -1;
   }

packages/router/src/router_config_loader.ts

@@ -10,7 +10,7 @@ import {Compiler, InjectionToken, Injector, NgModuleFactory, NgModuleFactoryLoad
 // TODO(i): switch to fromPromise once it's expored in rxjs
 import {Observable, from, of } from 'rxjs';
 import {map, mergeMap} from 'rxjs/operators';
-import {LoadChildren, LoadedRouterConfig, Route, copyConfig} from './config';
+import {LoadChildren, LoadedRouterConfig, Route, standardizeConfig} from './config';
 import {flatten, wrapIntoObservable} from './utils/collection';
 
 /**
@@ -39,7 +39,8 @@ export class RouterConfigLoader {
 
       const module = factory.create(parentInjector);
 
-      return new LoadedRouterConfig(flatten(module.injector.get(ROUTES)).map(copyConfig), module);
+      return new LoadedRouterConfig(
+          flatten(module.injector.get(ROUTES)).map(standardizeConfig), module);
     }));
   }
 

packages/router/src/router_module.ts

@@ -11,6 +11,7 @@ import {ANALYZE_FOR_ENTRY_COMPONENTS, APP_BOOTSTRAP_LISTENER, APP_INITIALIZER, A
 import {ɵgetDOM as getDOM} from '@angular/platform-browser';
 import {Subject, of } from 'rxjs';
 
+import {EmptyOutletComponent} from './components/empty_outlet';
 import {Route, Routes} from './config';
 import {RouterLink, RouterLinkWithHref} from './directives/router_link';
 import {RouterLinkActive} from './directives/router_link_active';
@@ -36,7 +37,8 @@ import {flatten} from './utils/collection';
  *
  *
  */
-const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive];
+const ROUTER_DIRECTIVES =
+    [RouterOutlet, RouterLink, RouterLinkWithHref, RouterLinkActive, EmptyOutletComponent];
 
 /**
  * @description
@@ -128,7 +130,11 @@ export function routerNgProbeToken() {
  *
  *
  */
-@NgModule({declarations: ROUTER_DIRECTIVES, exports: ROUTER_DIRECTIVES})
+@NgModule({
+  declarations: ROUTER_DIRECTIVES,
+  exports: ROUTER_DIRECTIVES,
+  entryComponents: [EmptyOutletComponent]
+})
 export class RouterModule {
   // Note: We are injecting the Router so it gets created eagerly...
   constructor(@Optional() @Inject(ROUTER_FORROOT_GUARD) guard: any, @Optional() router: Router) {}