Angular2 Beta Child Router Error: Link “[”NAME“]” does not resolve to a terminal instruction

I created a testing app to play with Angular2 Beta. I am trying to link from the parent route to the child.

Every time I try adding a child link to settings, it throws this error “EXCEPTION: Link “[“/Settings”]” does not resolve to a terminal instruction. in [[‘/Settings’] in AppComponent@8:10]”

The parent routes work fine. When it comes to the child routes, it has errors. Here is what I have so far.

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from   'angular2/router';
import {appsComponent} from './apps.component';
import {HomeComponent} from './Home.Component';
import {GPSComponent} from './GPS.component';
import {SettingsComponent} from './Settings.component';

@Component({
selector: 'my-app',
directives: [ROUTER_DIRECTIVES],
template: `
<div class="container">
<div class="row">
<div class="col-md-12">
    <ul class="nav nav-pills">
        <li><a [routerLink]="['/Home']">Home</a></li>
        <li><a [routerLink]="['/Apps']">Apps</a></li>
        <li><a [routerLink]="['/GPS']">GPS</a></li>
        <li><a [routerLink]="['/Settings']">Settings</a></li>
    </ul>
 </div>
</div>
</div>
<router-outlet></router-outlet>

`
})

@RouteConfig([
    { path: '/', component: HomeComponent, as: 'Home' },
    { path: '/apps', component: appsComponent, as: 'Apps'},
    { path: '/gps', component: GPSComponent, as: 'GPS' },
    { path: '/settings/...', component: SettingsComponent, as:'Settings' }
])
export class AppComponent {}

Settings.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
import {UIComponent} from './UI.component';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouterOutlet}  from 'angular2/router';

@Component({
  selector: 'settings',
  directives: [ROUTER_DIRECTIVES],
  template: `<h1>Settings Page</h1>
     <ul class="nav nav-stacked">
        <li><a [routerLink]="['/settings','/UI']">Desktop UI</a></li>
      </ul>
     <router-outlet></router-outlet>
`
})

@RouteConfig([
    { path: '/ui', component: UIComponent, as: 'UI'}
 ])
export class SettingsComponent {}

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {SettingsComponent} from './Settings.component';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {provide} from 'angular2/core';
import {APP_BASE_HREF} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router';

bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, { useValue: '/' }),
provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You have declared path: '/settings/...' route path for SettingsComponent, three dots at the end make this route non-terminal. It means that you cant navigate to /settings you must provide child path i.e.: /settings/info.