Angular2 Router Hates My AUX Routes

Question

UPDATE 11/1/15

Aux Routes are not supported very well as of Alpha 45. Link to Github Issue

props to @evan-plaice

Original Question

I watched Brian Ford's talk on the Angular2 Router:https://youtu.be/z1NB-HG0ZH4

And I started to try and use the "Aux" routes and my code is throwing a ton of errors.

I'm on Alpha 44 on mgechev's Angular Seed

In my app.ts component it's pretty standard, for the RouteConfig I Have:

@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home' },
  { path: '/run', component: RunCmp, as: 'Run' },
  { path: '/manage', component: ManageCmp, as: 'Manage' },
  { path: '/user', component: UserCmp, as: 'User' },
  { path: '/settings', component: LocalSettingsCmp, as: 'Settings' },
  { aux: '/login', component: LoginCmp, as: 'Login' }
])

My app.html:

<div id="main-content" class="full">
  <router-outlet></router-outlet>
  <router-outlet name="login"></router-outlet>
</div>

Inside the HomeCmp I put a "Login" Link:

<p>Router Link to activate login form: <a [router-link]="['/',['Login']]">Login</a></p>

Now I have other router links in that component that work fine, but when I add this link gives me this error:

Exception:

EXCEPTION: "/" is only allowed at the beginning of a link DSL. in [null]
BrowserDomAdapter.logError @ angular2.dev.js?v=0.0.0:21835
BrowserDomAdapter.logGroup @ angular2.dev.js?v=0.0.0:21846
ExceptionHandler.call @ angular2.dev.js?v=0.0.0:4431
(anonymous function) @ angular2.dev.js?v=0.0.0:19543
NgZone._onError @ angular2.dev.js?v=0.0.0:10711
errorHandling.onError @ angular2.dev.js?v=0.0.0:10630
run @ angular2.dev.js?v=0.0.0:141
(anonymous function) @ angular2.dev.js?v=0.0.0:10651
zoneBoundFn @ angular2.dev.js?v=0.0.0:111
lib$es6$promise$asap$$flush @ angular2.dev.js?v=0.0.0:1301
angular2.dev.js?v=0.0.0:21835 

Error:

Error: "/" is only allowed at the beginning of a link DSL.
    at new BaseException (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:16034:21)
    at RouteRegistry.generate (http://localhost:5555/lib/router.dev.js?v=0.0.0:1645:17)
    at ChildRouter.Router.generate (http://localhost:5555/lib/router.dev.js?v=0.0.0:2044:43)
    at RouterLink.Object.defineProperty.set [as routeParams] (http://localhost:5555/lib/router.dev.js?v=0.0.0:1323:52)
    at AbstractChangeDetector.ChangeDetector_HomeCmp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20415:14), <anonymous>:118:40)
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20209:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20192:12)
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20196:12)
    at AbstractChangeDetector._detectChangesInLightDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20253:14)

Context:

{element: a, componentElement: home, context: HomeCmp, locals: Object, injector: Injector…}

It Also throws this:

TypeError: Cannot read property 'child' of undefined
    at ChildRouter.Router.isRouteActive (http://localhost:5555/lib/router.dev.js?v=0.0.0:1803:77)
    at RouterLink.Object.defineProperty.get [as isRouteActive] (http://localhost:5555/lib/router.dev.js?v=0.0.0:1315:29)
    at AbstractChangeDetector.ChangeDetector_HomeCmp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20415:14), <anonymous>:153:44)
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20209:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20192:12)
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20196:12)
    at AbstractChangeDetector._detectChangesInLightDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20253:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20193:12)
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14)

But it's after the first error so I'm not sure if its caused by the first or what.

I also tried the Way from the Angular2 API Docs but it throws the same errors.

• Am I doing something wrong?
• Is this syntax not supported yet?
• Is there an example of someone using the Aux Routes Correctly?

NOTE: I tried getting the Router to work with a Plunker but it doesnt like the URL's or something otherwise I'd provide a live case

UPDATE 10/29/15 The first error is from the router link not letting you use "\" or ".\" in any way. You MUST specify the route name.

Aux still does not work...

Answer 1

The routerLink matches the path of the first parameter in the array

In your case it would match / or Home

<a [routerLink]="['/',['Login']]">Login</a>

Use this instead:

<a [routerLink]="['/Login']">Login</a>

AFAIK, the parameter is an array because a route can also include one-or-more wildcard matches.

Note: The Login used in the link points to the route's alias (ie the as field).

Source:

• angular2/src/router/router_link.ts

Update:

Keep an eye out. The angular2 team is planning to change RouterLink/<router-link> to RouterViewport/<router-viewport> in a future release.

Source: angular/issues#4679

Update2:

• [router-link] -> [routerLink]