fix(router): load route config from async instructions

btford · btford · commit 5e49d7e624e0 · 2015-09-11T16:23:40.000-07:00
Previously, async routes generated from links would not load the configs of their resolved components, which led to broken links in the children of the async instruction's component. This commit fixes the bookkeeping in the Router to correctly load the configs. Fixes internal b/23791558 Closes #4146
diff --git a/modules/angular2/src/router/route_registry.ts b/modules/angular2/src/router/route_registry.ts
@@ -249,9 +249,9 @@ export class RouteRegistry {
         }
         lastInstructionIsTerminal = lastInstruction.component.terminal;
       }
-      if (!lastInstructionIsTerminal) {
+      if (isPresent(componentCursor) && !lastInstructionIsTerminal) {
         throw new BaseException(
-            `Link "${ListWrapper.toJSON(linkParams)}" does not resolve to a terminal instruction.`);
+            `Link "${ListWrapper.toJSON(linkParams)}" does not resolve to a terminal or async instruction.`);
       }
     }
 
diff --git a/modules/angular2/src/router/router.ts b/modules/angular2/src/router/router.ts
@@ -217,7 +217,8 @@ export class Router {
   _settleInstruction(instruction: Instruction): Promise<any> {
     var unsettledInstructions: Array<Promise<any>> = [];
     if (isBlank(instruction.component.componentType)) {
-      unsettledInstructions.push(instruction.component.resolveComponentType());
+      unsettledInstructions.push(instruction.component.resolveComponentType().then(
+          (type: Type) => { this.registry.configFromComponent(type); }));
     }
     if (isPresent(instruction.child)) {
       unsettledInstructions.push(this._settleInstruction(instruction.child));
diff --git a/modules/angular2/test/router/integration/router_link_spec.ts b/modules/angular2/test/router/integration/router_link_spec.ts
@@ -17,6 +17,7 @@ import {
 } from 'angular2/test_lib';
 
 import {NumberWrapper} from 'angular2/src/core/facade/lang';
+import {PromiseWrapper} from 'angular2/src/core/facade/async';
 
 import {bind, Component, DirectiveResolver, View} from 'angular2/core';
 
@@ -29,6 +30,7 @@ import {
   Pipeline,
   RouterLink,
   RouterOutlet,
+  AsyncRoute,
   Route,
   RouteParams,
   RouteConfig,
@@ -96,7 +98,6 @@ export function main() {
        }));
 
 
-
     it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
          compile('<a href="hello" [router-link]="[\'./user\', {name: name}]">{{name}}</a>')
              .then((_) => router.config(
@@ -128,6 +129,31 @@ export function main() {
              });
        }));
 
+    it('should generate link hrefs when asynchronously loaded',
+       inject([AsyncTestCompleter], (async) => {
+         compile()
+             .then((_) => router.config([
+               new AsyncRoute({
+                 path: '/child-with-grandchild/...',
+                 loader: parentCmpLoader,
+                 as: 'child-with-grandchild'
+               })
+             ]))
+             .then((_) => {
+               // TODO: refactor when https://github.com/angular/angular/pull/4074 lands
+               var instruction = router.generate(['/child-with-grandchild']);
+               return router.navigateInstruction(instruction);
+             })
+             .then((_) => {
+               rootTC.detectChanges();
+               expect(DOM.getAttribute(
+                          rootTC.componentViewChildren[1].componentViewChildren[0].nativeElement,
+                          'href'))
+                   .toEqual('/child-with-grandchild/grandchild');
+               async.done();
+             });
+       }));
+
     it('should generate relative links preserving the existing parent route',
        inject([AsyncTestCompleter], (async) => {
          compile()
@@ -319,6 +345,10 @@ class HelloCmp {
 class Hello2Cmp {
 }
 
+function parentCmpLoader() {
+  return PromiseWrapper.resolve(ParentCmp);
+}
+
 @Component({selector: 'parent-cmp'})
 @View({
   template: `{ <a [router-link]="['./grandchild']" class="grandchild-link">Grandchild</a>
diff --git a/modules/angular2/test/router/route_registry_spec.ts b/modules/angular2/test/router/route_registry_spec.ts
@@ -235,7 +235,7 @@ export function main() {
       registry.config(RootHostCmp,
                       new Route({path: '/first/...', component: DummyParentCmp, as: 'first'}));
       expect(() => { registry.generate(['first'], RootHostCmp); })
-          .toThrowError('Link "["first"]" does not resolve to a terminal instruction.');
+          .toThrowError('Link "["first"]" does not resolve to a terminal or async instruction.');
     });
 
     it('should match matrix params on child components and query params on the root component',

Original file line number	Diff line number	Diff line change
`@@ -249,9 +249,9 @@ export class RouteRegistry {`
`249`	`249`	`}`
`250`	`250`	`lastInstructionIsTerminal = lastInstruction.component.terminal;`
`251`	`251`	`}`
`252`		`- if (!lastInstructionIsTerminal) {`
	`252`	`+ if (isPresent(componentCursor) && !lastInstructionIsTerminal) {`
`253`	`253`	`throw new BaseException(`
`254`		- `Link "${ListWrapper.toJSON(linkParams)}" does not resolve to a terminal instruction.`);
	`254`	+ `Link "${ListWrapper.toJSON(linkParams)}" does not resolve to a terminal or async instruction.`);
`255`	`255`	`}`
`256`	`256`	`}`
`257`	`257`