From d7d8fab21157aadd895b160910536e23d4b42376 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 2 Dec 2016 14:09:09 -0800 Subject: [PATCH] refactor(router): cleanup config --- modules/@angular/router/src/config.ts | 124 +++++++++----------- modules/@angular/router/test/config.spec.ts | 8 +- 2 files changed, 60 insertions(+), 72 deletions(-) diff --git a/modules/@angular/router/src/config.ts b/modules/@angular/router/src/config.ts index 00c418b42a..f933a387a6 100644 --- a/modules/@angular/router/src/config.ts +++ b/modules/@angular/router/src/config.ts @@ -8,7 +8,7 @@ import {Type} from '@angular/core'; import {Observable} from 'rxjs/Observable'; -import {PRIMARY_OUTLET, Params} from './shared'; +import {PRIMARY_OUTLET} from './shared'; import {UrlSegment, UrlSegmentGroup} from './url_tree'; /** @@ -19,33 +19,36 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * * - `path` is a string that uses the route matcher DSL. * - `pathMatch` is a string that specifies the matching strategy. + * - `matcher` defines a custom strategy for path matching and supersedes `path` and `pathMatch`. + * See {@link UrlMatcher} for more info. * - `component` is a component type. * - `redirectTo` is the url fragment which will replace the current matched segment. * - `outlet` is the name of the outlet the component should be placed into. - * - `canActivate` is an array of DI tokens used to look up CanActivate handlers. See {@link - * CanActivate} for more info. + * - `canActivate` is an array of DI tokens used to look up CanActivate handlers. See + * {@link CanActivate} for more info. * - `canActivateChild` is an array of DI tokens used to look up CanActivateChild handlers. See - * {@link - * CanActivateChild} for more info. - * - `canDeactivate` is an array of DI tokens used to look up CanDeactivate handlers. See {@link - * CanDeactivate} for more info. + * {@link CanActivateChild} for more info. + * - `canDeactivate` is an array of DI tokens used to look up CanDeactivate handlers. See + * {@link CanDeactivate} for more info. + * - `canLoad` is an array of DI tokens used to look up CanDeactivate handlers. See + * {@link CanLoad} for more info. * - `data` is additional data provided to the component via `ActivatedRoute`. * - `resolve` is a map of DI tokens used to look up data resolvers. See {@link Resolve} for more - * info. + * info. * - `children` is an array of child route definitions. + * - `loadChildren` is a reference to lazy loaded child routes. See {@link LoadChildren} for more + * info. * * ### Simple Configuration * * ``` * [{ * path: 'team/:id', - * component: Team, - * children: [ - * { - * path: 'user/:name', - * component: User - * } - * ] + * component: Team, + * children: [{ + * path: 'user/:name', + * component: User + * }] * }] * ``` * @@ -58,8 +61,7 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * [{ * path: 'team/:id', * component: Team - * }, - * { + * }, { * path: 'chat/:user', * component: Chat * outlet: 'aux' @@ -86,16 +88,13 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * [{ * path: 'team/:id', * component: Team, - * children: [ - * { - * path: 'legacy/user/:name', - * redirectTo: 'user/:name' - * }, - * { - * path: 'user/:name', - * component: User - * } - * ] + * children: [{ + * path: 'legacy/user/:name', + * redirectTo: 'user/:name' + * }, { + * path: 'user/:name', + * component: User + * }] * }] * ``` * @@ -115,16 +114,13 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * [{ * path: 'team/:id', * component: Team, - * children: [ - * { - * path: '', - * component: AllUsers - * }, - * { - * path: 'user/:name', - * component: User - * } - * ] + * children: [{ + * path: '', + * component: AllUsers + * }, { + * path: 'user/:name', + * component: User + * }] * }] * ``` * @@ -136,18 +132,14 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * [{ * path: 'team/:id', * component: Team, - * children: [ - * { - * path: '', - * component: WrapperCmp, - * children: [ - * { - * path: 'user/:name', - * component: User - * } - * ] - * } - * ] + * children: [{ + * path: '', + * component: WrapperCmp, + * children: [{ + * path: 'user/:name', + * component: User + * }] + * }] * }] * ``` * @@ -172,8 +164,7 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * path: '', * pathMatch: 'prefix', //default * redirectTo: 'main' - * }, - * { + * }, { * path: 'main', * component: Main * }] @@ -190,8 +181,7 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * path: '', * pathMatch: 'full', * redirectTo: 'main' - * }, - * { + * }, { * path: 'main', * component: Main * }] @@ -244,8 +234,7 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * * Lazy loading speeds up our application load time by splitting it into multiple bundles, and * loading them on demand. The router is designed to make lazy loading simple and easy. Instead of - * providing the children property, you can provide - * the loadChildren property, as follows: + * providing the children property, you can provide the `loadChildren` property, as follows: * * ``` * [{ @@ -256,9 +245,8 @@ import {UrlSegment, UrlSegmentGroup} from './url_tree'; * ``` * * The router will use registered NgModuleFactoryLoader to fetch an NgModule associated with 'team'. - * Then it will - * extract the set of routes defined in that NgModule, and will transparently add those routes to - * the main configuration. + * Then it will extract the set of routes defined in that NgModule, and will transparently add + * those routes to the main configuration. * * @stable use Routes */ @@ -326,7 +314,6 @@ export type LoadChildrenCallback = () => Type| Promise>| Observab /** * @whatItDoes The type of `loadChildren`. - * * See {@link Routes} for more details. * @stable */ @@ -377,32 +364,31 @@ function validateNode(route: Route): void { if (Array.isArray(route)) { throw new Error(`Invalid route configuration: Array cannot be specified`); } - if (route.component === undefined && (route.outlet && route.outlet !== PRIMARY_OUTLET)) { + if (!route.component && (route.outlet && route.outlet !== PRIMARY_OUTLET)) { throw new Error( `Invalid route configuration of route '${route.path}': a componentless route cannot have a named outlet set`); } - if (!!route.redirectTo && !!route.children) { + if (route.redirectTo && route.children) { throw new Error( `Invalid configuration of route '${route.path}': redirectTo and children cannot be used together`); } - if (!!route.redirectTo && !!route.loadChildren) { + if (route.redirectTo && route.loadChildren) { throw new Error( `Invalid configuration of route '${route.path}': redirectTo and loadChildren cannot be used together`); } - if (!!route.children && !!route.loadChildren) { + if (route.children && route.loadChildren) { throw new Error( `Invalid configuration of route '${route.path}': children and loadChildren cannot be used together`); } - if (!!route.redirectTo && !!route.component) { + if (route.redirectTo && route.component) { throw new Error( `Invalid configuration of route '${route.path}': redirectTo and component cannot be used together`); } - if (!!route.path && !!route.matcher) { + if (route.path && route.matcher) { throw new Error( `Invalid configuration of route '${route.path}': path and matcher cannot be used together`); } - if (route.redirectTo === undefined && !route.component && !route.children && - !route.loadChildren) { + if (route.redirectTo === void 0 && !route.component && !route.children && !route.loadChildren) { throw new Error( `Invalid configuration of route '${route.path}': one of the following must be provided (component or redirectTo or children or loadChildren)`); } @@ -413,13 +399,13 @@ function validateNode(route: Route): void { throw new Error( `Invalid route configuration of route '${route.path}': path cannot start with a slash`); } - if (route.path === '' && route.redirectTo !== undefined && route.pathMatch === undefined) { + 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 route configuration of route '{path: "${route.path}", redirectTo: "${route.redirectTo}"}': please provide 'pathMatch'. ${exp}`); } - if (route.pathMatch !== undefined && route.pathMatch !== 'full' && route.pathMatch !== 'prefix') { + if (route.pathMatch !== void 0 && route.pathMatch !== 'full' && route.pathMatch !== 'prefix') { throw new Error( `Invalid configuration of route '${route.path}': pathMatch can only be set to 'prefix' or 'full'`); } diff --git a/modules/@angular/router/test/config.spec.ts b/modules/@angular/router/test/config.spec.ts index 7774b7d72b..0d53b90439 100644 --- a/modules/@angular/router/test/config.spec.ts +++ b/modules/@angular/router/test/config.spec.ts @@ -12,7 +12,10 @@ import {PRIMARY_OUTLET} from '../src/shared'; describe('config', () => { describe('validateConfig', () => { it('should not throw when no errors', () => { - validateConfig([{path: 'a', redirectTo: 'b'}, {path: 'b', component: ComponentA}]); + expect( + () => validateConfig([{path: 'a', redirectTo: 'b'}, {path: 'b', component: ComponentA}])) + .not.toThrow(); + }); }); it('should throw for undefined route', () => { @@ -57,8 +60,7 @@ describe('config', () => { `Invalid configuration of route 'a': redirectTo and component cannot be used together`); }); - - it('should throw when path and mathcer are used together', () => { + it('should throw when path and matcher are used together', () => { expect(() => { validateConfig([{path: 'a', matcher: 'someFunc', children: []}]); }) .toThrowError( `Invalid configuration of route 'a': path and matcher cannot be used together`);