fix(router): Named route and lazyloading

a small patch to be able to lazyload a module in a named router-outlet with one restriction is to specify the lazyloaded named outlet first in the routing.

angular#12842

packages/router/src/apply_redirects.ts

@@ -153,8 +153,14 @@ class ApplyRedirects {
       allowRedirects: boolean): Observable<UrlSegmentGroup> {
     const routes$ = of (...routes);
     const processedRoutes$ = map.call(routes$, (r: any) => {
+      // To fix issue that PRIMARY_OUTLET is hardcoded so always no match
       const expanded$ = this.expandSegmentAgainstRoute(
-          ngModule, segmentGroup, routes, r, segments, outlet, allowRedirects);
+          ngModule, segmentGroup, routes, r, segments, r.outlet || outlet, allowRedirects);
+      // To fix the issue that when lazyloading and named outlet we don't add _loadedConfig
+      // Only if it's a named route and lazyloaded and has no redirect we subscribe
+      if (r.outlet && r.outlet !== PRIMARY_OUTLET && r.loadChildren && r.redirectTo === undefined) {
+        expanded$.subscribe((expanded: any) => expanded);
+      }
       return _catch.call(expanded$, (e: any) => {
         if (e instanceof NoMatch) {
           return of (null);
@@ -311,6 +317,12 @@ class ApplyRedirects {
         if (shouldLoad) {
           return map.call(
               this.configLoader.load(ngModule.injector, route), (cfg: LoadedRouterConfig) => {
+                cfg.routes.map((childRoute) => {
+                  if (childRoute.path === '') {
+                    childRoute.outlet = route.outlet;
+                  }
+                  return childRoute;
+                });
                 route._loadedConfig = cfg;
                 return cfg;
               });

packages/router/src/config.ts

@@ -393,9 +393,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.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 named outlet should wether have component or loadChildren`);
   }
   if (route.redirectTo && route.children) {
     throw new Error(

packages/router/test/config.spec.ts

@@ -132,8 +132,10 @@ describe('config', () => {
     it('should throw when pathPatch is invalid', () => {
       expect(() => { validateConfig([{path: 'a', outlet: 'aux', children: []}]); })
           .toThrowError(
-              /Invalid configuration of route 'a': a componentless route cannot have a named outlet set/);
+              /Invalid configuration of route 'a': a named outlet should wether have component or loadChildren/);
 
+      expect(() => validateConfig([{path: 'a', outlet: 'aux', loadChildren: 'value'}]))
+          .not.toThrow();
       expect(() => validateConfig([{path: 'a', outlet: '', children: []}])).not.toThrow();
       expect(() => validateConfig([{path: 'a', outlet: PRIMARY_OUTLET, children: []}]))
           .not.toThrow();