Currently, I am working on developing a navigation menu using angularJS2. Here is the snippet from my app.component.ts:
import {provide, Component} from 'angular2/core';
import {APP_BASE_HREF, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy, RouteConfig} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {Router} from 'angular2/router';
// Terrestrial
@Component({
selector: 'terrestrial',
template: '/terrestrial.html', // FUNCTIONAL
})
export class TerrestrialComponent { }
// Aerial Component
@Component({
selector: 'aerial',
templateUrl: '/aerial.html' --> NOT WORKING
})
export class AerialComponent { }
// Aquatic Component
@Component({
selector: 'aquatic',
template: 'aquatic.html' // FUNCTIONAL
})
export class AquaticComponent { }
@Component({
selector: 'my-app',
directives: [ROUTER_DIRECTIVES],
template: `
<nav>
<ul>
<li><a [routerLink]="['/Aerial']">AERIAL</a></li>
<li><a [routerLink]="['/Aquatic']">AQUATIC</a></li>
<li><a [routerLink]="['/Terrestrial']">TERRESTRIAL</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
`,
})
@RouteConfig([
{ path: '/aerial', component: AerialComponent, as: 'Aerial' },
{ path: '/aquatic', component: AquaticComponent, as: 'Aquatic' },
{ path: '/terrestrial', component: TerrestrialComponent, as: 'Terrestrial' }
])
export class AppComponent {}
This is how my file structure looks:
-DEV
- app.component.ts
- boot.ts
- terrestrial.html
- aerial.html
- aquatic.html
While I can successfully navigate to "aquatic" and "terrestrial", I'm having trouble navigating to "aerial" which is defined in "templateURL". See below for what I have attempted:
templateUrl: './aerial.html' --> NOT WORKING
templateUrl: 'aerial.html' --> NOT WORKING