diff --git a/packages/router/src/apply_redirects.ts b/packages/router/src/apply_redirects.ts index 8000df336841d2..c7f1ebc774e546 100644 --- a/packages/router/src/apply_redirects.ts +++ b/packages/router/src/apply_redirects.ts @@ -153,8 +153,14 @@ class ApplyRedirects { allowRedirects: boolean): Observable { 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; }); diff --git a/packages/router/src/config.ts b/packages/router/src/config.ts index a024965bd458ca..ee4d0ead08c8e9 100644 --- a/packages/router/src/config.ts +++ b/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( diff --git a/packages/router/test/config.spec.ts b/packages/router/test/config.spec.ts index ad643a8fae4080..72b3455e26ad3f 100644 --- a/packages/router/test/config.spec.ts +++ b/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();