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

Fixes #10981

PR Close #23459

packages/router/test/config.spec.ts

@@ -123,21 +123,27 @@ describe('config', () => {
          }).toThrowError(/Invalid configuration of route '{path: "", redirectTo: "b"}'/);
        });
 
-    it('should throw when pathPatch is invalid', () => {
+    it('should throw when pathMatch is invalid', () => {
       expect(() => { validateConfig([{path: 'a', pathMatch: 'invalid', component: ComponentB}]); })
           .toThrowError(
               /Invalid configuration of route 'a': pathMatch can only be set to 'prefix' or 'full'/);
     });
 
-    it('should throw when pathPatch is invalid', () => {
-      expect(() => { validateConfig([{path: 'a', outlet: 'aux', children: []}]); })
+    it('should throw when path/outlet combination is invalid', () => {
+      expect(() => { validateConfig([{path: 'a', outlet: 'aux'}]); })
           .toThrowError(
-              /Invalid configuration of route 'a': a componentless route cannot have a named outlet set/);
-
+              /Invalid configuration of route 'a': a componentless route without children or loadChildren cannot have a named outlet set/);
       expect(() => validateConfig([{path: 'a', outlet: '', children: []}])).not.toThrow();
       expect(() => validateConfig([{path: 'a', outlet: PRIMARY_OUTLET, children: []}]))
           .not.toThrow();
     });
+
+    it('should not throw when path/outlet combination is valid', () => {
+      expect(() => { validateConfig([{path: 'a', outlet: 'aux', children: []}]); }).not.toThrow();
+      expect(() => {
+        validateConfig([{path: 'a', outlet: 'aux', loadChildren: 'child'}]);
+      }).not.toThrow();
+    });
   });
 });
 

packages/router/test/integration.spec.ts

@@ -3366,6 +3366,72 @@ describe('Integration', () => {
              expect(location.path()).toEqual('/lazy2/loaded');
            })));
 
+    it('should allow lazy loaded module in named outlet',
+       fakeAsync(inject(
+           [Router, NgModuleFactoryLoader], (router: Router, loader: SpyNgModuleFactoryLoader) => {
+
+             @Component({selector: 'lazy', template: 'lazy-loaded'})
+             class LazyComponent {
+             }
+
+             @NgModule({
+               declarations: [LazyComponent],
+               imports: [RouterModule.forChild([{path: '', component: LazyComponent}])]
+             })
+             class LazyLoadedModule {
+             }
+
+             loader.stubbedModules = {lazyModule: LazyLoadedModule};
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'team/:id',
+               component: TeamCmp,
+               children: [
+                 {path: 'user/:name', component: UserCmp},
+                 {path: 'lazy', loadChildren: 'lazyModule', outlet: 'right'},
+               ]
+             }]);
+
+
+             router.navigateByUrl('/team/22/user/john');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right:  ]');
+
+             router.navigateByUrl('/team/22/(user/john//right:lazy)');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: lazy-loaded ]');
+           })));
+
+    it('should allow componentless named outlet to render children',
+       fakeAsync(inject(
+           [Router, NgModuleFactoryLoader], (router: Router, loader: SpyNgModuleFactoryLoader) => {
+
+             const fixture = createRoot(router, RootCmp);
+
+             router.resetConfig([{
+               path: 'team/:id',
+               component: TeamCmp,
+               children: [
+                 {path: 'user/:name', component: UserCmp},
+                 {path: 'simple', outlet: 'right', children: [{path: '', component: SimpleCmp}]},
+               ]
+             }]);
+
+
+             router.navigateByUrl('/team/22/user/john');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right:  ]');
+
+             router.navigateByUrl('/team/22/(user/john//right:simple)');
+             advance(fixture);
+
+             expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: simple ]');
+           })));
 
     describe('should use the injector of the lazily-loaded configuration', () => {
       class LazyLoadedServiceDefinedInModule {}
@@ -4102,6 +4168,10 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
   return f;
 }
 
+@Component({selector: 'lazy', template: 'lazy-loaded'})
+class LazyComponent {
+}
+
 
 @NgModule({
   imports: [RouterTestingModule, CommonModule],