feat(router): add support for componentless routes

modules/@angular/router/test/apply_redirects.spec.ts

@@ -125,6 +125,21 @@ describe('applyRedirects', () => {
     });
   });
 
+  xit("should support redirects with both main and aux", () => {
+    checkRedirect([
+      {path: 'a', children: [
+        {path: 'b', component: ComponentB},
+        {path: '', redirectTo: 'b'},
+
+        {path: 'c', component: ComponentC, outlet: 'aux'},
+        {path: '', redirectTo: 'c', outlet: 'aux'}
+      ]},
+      {path: 'a', redirectTo: ''}
+    ], "a", (t:UrlTree) => {
+      compareTrees(t, tree('a/(b//aux:c)'));
+    });
+  });
+
   it("should redirect empty path route only when terminal", () => {
     const config = [
       {path: 'a', component: ComponentA, children: [

modules/@angular/router/test/config.spec.ts

@@ -37,6 +37,14 @@ describe('config', () => {
       }).toThrowError(`Invalid route configuration: routes must have path specified`);
     });
 
+    it("should throw when none of component and children or direct are missing", () => {
+      expect(() => {
+        validateConfig([
+          {path: 'a'}
+        ]);
+      }).toThrowError(`Invalid configuration of route 'a': component, redirectTo, children must be provided`);
+    });
+
     it("should throw when path starts with a slash", () => {
       expect(() => {
         validateConfig([

modules/@angular/router/test/create_router_state.spec.ts

@@ -44,6 +44,32 @@ describe('create router state', () => {
     expect(prevC[1]).not.toBe(currC[1]);
     checkActivatedRoute(currC[1], ComponentC, 'left');
   });
+
+  it('should handle componentless routes', () => {
+    const config = [
+      { path: 'a/:id', children: [
+        { path: 'b', component: ComponentA },
+        { path: 'c', component: ComponentB, outlet: 'right' }
+      ] }
+    ];
+
+
+    const prevState = createRouterState(createState(config, "a/1;p=11/(b//right:c)"), emptyState());
+    advanceState(prevState);
+    const state = createRouterState(createState(config, "a/2;p=22/(b//right:c)"), prevState);
+
+    expect(prevState.root).toBe(state.root);
+    const prevP = prevState.firstChild(prevState.root);
+    const currP = state.firstChild(state.root);
+    expect(prevP).toBe(currP);
+
+    const prevC = prevState.children(prevP);
+    const currC = state.children(currP);
+
+    expect(currP._futureSnapshot.params).toEqual({id: '2', p: '22'});
+    checkActivatedRoute(currC[0], ComponentA);
+    checkActivatedRoute(currC[1], ComponentB, 'right');
+  });
 });
 
 function advanceState(state: RouterState): void {

modules/@angular/router/test/recognize.spec.ts

@@ -243,6 +243,112 @@ describe('recognize', () => {
     });
   });
 
+  describe("componentless routes", () => {
+    it("should work", () => {
+      checkRecognize([
+        {
+          path: 'p/:id',
+          children: [
+            {path: 'a', component: ComponentA},
+            {path: 'b', component: ComponentB, outlet: 'aux'}
+          ]
+        }
+      ], "p/11;pp=22/(a;pa=33//aux:b;pb=44)", (s:RouterStateSnapshot) => {
+        const p = s.firstChild(s.root);
+        checkActivatedRoute(p, "p/11", {id: '11', pp: '22'}, undefined);
+
+        const c = s.children(p);
+        checkActivatedRoute(c[0], "a", {id: '11', pp: '22', pa: '33'}, ComponentA);
+        checkActivatedRoute(c[1], "b", {id: '11', pp: '22', pb: '44'}, ComponentB, "aux");
+      });
+    });
+
+    it("should merge params until encounters a normal route", () => {
+      checkRecognize([
+        {
+          path: 'p/:id',
+          children: [
+            {path: 'a/:name', children: [
+              {path: 'b', component: ComponentB, children: [
+                {path: 'c', component: ComponentC}
+              ]}
+            ]}
+          ]
+        }
+      ], "p/11/a/victor/b/c", (s:RouterStateSnapshot) => {
+        const p = s.firstChild(s.root);
+        checkActivatedRoute(p, "p/11", {id: '11'}, undefined);
+
+        const a = s.firstChild(p);
+        checkActivatedRoute(a, "a/victor", {id: '11', name: 'victor'}, undefined);
+
+        const b = s.firstChild(a);
+        checkActivatedRoute(b, "b", {id: '11', name: 'victor'}, ComponentB);
+
+        const c = s.firstChild(b);
+        checkActivatedRoute(c, "c", {}, ComponentC);
+      });
+    });
+
+    xit("should work with empty paths", () => {
+      checkRecognize([
+        {
+          path: 'p/:id',
+          children: [
+            {path: '', component: ComponentA},
+            {path: '', component: ComponentB, outlet: 'aux'}
+          ]
+        }
+      ], "p/11", (s:RouterStateSnapshot) => {
+        const p = s.firstChild(s.root);
+        checkActivatedRoute(p, "p/11", {id: '11'}, undefined);
+
+        const c = s.children(p);
+        console.log("lsfs", c);
+        checkActivatedRoute(c[0], "", {}, ComponentA);
+        checkActivatedRoute(c[1], "", {}, ComponentB, "aux");
+      });
+    });
+
+    xit("should work with empty paths and params", () => {
+      checkRecognize([
+        {
+          path: 'p/:id',
+          children: [
+            {path: '', component: ComponentA},
+            {path: '', component: ComponentB, outlet: 'aux'}
+          ]
+        }
+      ], "p/11/(;pa=33//aux:;pb=44)", (s:RouterStateSnapshot) => {
+        const p = s.firstChild(s.root);
+        checkActivatedRoute(p, "p/11", {id: '11'}, undefined);
+
+        const c = s.children(p);
+        checkActivatedRoute(c[0], "", {pa: '33'}, ComponentA);
+        checkActivatedRoute(c[1], "", {pb: '44'}, ComponentB, "aux");
+      });
+    });
+
+    xit("should work with only aux path", () => {
+      checkRecognize([
+        {
+          path: 'p/:id',
+          children: [
+            {path: '', component: ComponentA},
+            {path: '', component: ComponentB, outlet: 'aux'}
+          ]
+        }
+      ], "p/11", (s:RouterStateSnapshot) => {
+        const p = s.firstChild(s.root);
+        checkActivatedRoute(p, "p/11(aux:;pb=44)", {id: '11'}, undefined);
+
+        const c = s.children(p);
+        checkActivatedRoute(c[0], "", {}, ComponentA);
+        checkActivatedRoute(c[1], "", {pb: '44'}, ComponentB, "aux");
+      });
+    });
+  });
+
   describe("query parameters", () => {
     it("should support query params", () => {
       const config = [{path: 'a', component: ComponentA}];

modules/@angular/router/test/router.spec.ts

@@ -375,7 +375,46 @@ describe("Integration", () => {
       advance(fixture);
       expect(location.path()).toEqual('/team/33/simple');
     })));
-  
+
+  it('should handle componentless paths',
+    fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
+      const fixture = tcb.createFakeAsync(RootCmpWithTwoOutlets);
+      advance(fixture);
+
+      router.resetConfig([
+        { path: 'parent/:id', children: [
+          { path: 'simple', component: SimpleCmp },
+          { path: 'user/:name', component: UserCmp, outlet: 'right' }
+        ] },
+        { path: 'user/:name', component: UserCmp }
+      ]);
+
+
+      // navigate to a componentless route
+      router.navigateByUrl('/parent/11/(simple//right:user/victor)');
+      advance(fixture);
+      expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
+      expect(fixture.debugElement.nativeElement).toHaveText('primary {simple} right {user victor}');
+
+      // navigate to the same route with different params (reuse)
+      router.navigateByUrl('/parent/22/(simple//right:user/fedor)');
+      advance(fixture);
+      expect(location.path()).toEqual('/parent/22/(simple//right:user/fedor)');
+      expect(fixture.debugElement.nativeElement).toHaveText('primary {simple} right {user fedor}');
+
+      // navigate to a normal route (check deactivation)
+      router.navigateByUrl('/user/victor');
+      advance(fixture);
+      expect(location.path()).toEqual('/user/victor');
+      expect(fixture.debugElement.nativeElement).toHaveText('primary {user victor} right {}');
+
+      // navigate back to a componentless route
+      router.navigateByUrl('/parent/11/(simple//right:user/victor)');
+      advance(fixture);
+      expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
+      expect(fixture.debugElement.nativeElement).toHaveText('primary {simple} right {user victor}');
+    })));
+
   describe("router links", () => {
     it("should support string router links",
       fakeAsync(inject([Router, TestComponentBuilder], (router:Router, tcb:TestComponentBuilder) => {
@@ -526,6 +565,29 @@ describe("Integration", () => {
           })));
       });
 
+      describe("should not activate a route when CanActivate returns false (componentless route)", () => {
+        beforeEachProviders(() => [
+          {provide: 'alwaysFalse', useValue: (a:any, b:any) => false}
+        ]);
+
+        it('works',
+          fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
+            const fixture = tcb.createFakeAsync(RootCmp);
+            advance(fixture);
+
+            router.resetConfig([
+              { path: 'parent', canActivate: ['alwaysFalse'], children: [
+                { path: 'team/:id', component: TeamCmp }
+              ]}
+            ]);
+
+            router.navigateByUrl('parent/team/22');
+            advance(fixture);
+
+            expect(location.path()).toEqual('/');
+          })));
+      });
+
       describe("should activate a route when CanActivate returns true", () => {
         beforeEachProviders(() => [
           {provide: 'alwaysTrue', useValue: (a:ActivatedRouteSnapshot, s:RouterStateSnapshot) => true}
@@ -598,15 +660,17 @@ describe("Integration", () => {
     describe("CanDeactivate", () => {
       describe("should not deactivate a route when CanDeactivate returns false", () => {
         beforeEachProviders(() => [
-          {provide: 'CanDeactivateTeam', useValue: (c:TeamCmp, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
+          {provide: 'CanDeactivateParent', useValue: (c:any, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
+            return a.params['id'] === "22";
+          }},
+          {provide: 'CanDeactivateTeam', useValue: (c:any, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
             return c.route.snapshot.params['id'] === "22";
           }},
-          {provide: 'CanDeactivateUser', useValue: (c:UserCmp, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
+          {provide: 'CanDeactivateUser', useValue: (c:any, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
             return a.params['name'] === 'victor';
           }}
         ]);
 
-
         it('works',
           fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
             const fixture = tcb.createFakeAsync(RootCmp);
@@ -618,20 +682,41 @@ describe("Integration", () => {
 
             router.navigateByUrl('/team/22');
             advance(fixture);
-
             expect(location.path()).toEqual('/team/22');
 
             router.navigateByUrl('/team/33');
             advance(fixture);
-
             expect(location.path()).toEqual('/team/33');
 
             router.navigateByUrl('/team/44');
             advance(fixture);
-
             expect(location.path()).toEqual('/team/33');
           })));
 
+        it('works (componentless route)',
+          fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
+            const fixture = tcb.createFakeAsync(RootCmp);
+            advance(fixture);
+
+            router.resetConfig([
+              { path: 'parent/:id', canDeactivate: ["CanDeactivateParent"], children: [
+                { path: 'simple', component: SimpleCmp }
+              ] }
+            ]);
+
+            router.navigateByUrl('/parent/22/simple');
+            advance(fixture);
+            expect(location.path()).toEqual('/parent/22/simple');
+
+            router.navigateByUrl('/parent/33/simple');
+            advance(fixture);
+            expect(location.path()).toEqual('/parent/33/simple');
+
+            router.navigateByUrl('/parent/44/simple');
+            advance(fixture);
+            expect(location.path()).toEqual('/parent/33/simple');
+          })));
+
         it('works with a nested route',
           fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
             const fixture = tcb.createFakeAsync(RootCmp);
@@ -927,6 +1012,13 @@ class QueryParamsAndFragmentCmp {
 })
 class RootCmp {}
 
+@Component({
+  selector: 'root-cmp',
+  template: `primary {<router-outlet></router-outlet>} right {<router-outlet name="right"></router-outlet>}`,
+  directives: [ROUTER_DIRECTIVES]
+})
+class RootCmpWithTwoOutlets {}
+
 function advance(fixture: ComponentFixture<any>): void {
   tick();
   fixture.detectChanges();