typescript - Angular 2 router not working properly -
the app working fine old angular 2 router, when switched the"3.0.0-beta.2",the application doesn't load. part of application believe problem lies:
files:
app.component.ts
import { component} '@angular/core'; import {navcomponent} "./nav.component"; import { router_directives } '@angular/router'; @component({ selector: 'my-app', template: `<my-nav></my-nav> <router-outlet></router-outlet>`, directives:[navcomponent,router_directives] }) export class appcomponent{ }
app.routes.ts
import {aboutcomponent} "./about.component"; import {taskscomponent} "./tasks.component"; import {walleycomponent} "./walley.component"; import {dashboardcomponent} "./dash-board.component"; import {pagenotfoundcomponent} "./404.component"; import { providerouter, routerconfig } '@angular/router'; export const routes: routerconfig = [ {path: '', component: dashboardcomponent}, {path: 'yourtasks', component: taskscomponent}, {path: 'about',component: aboutcomponent}, {path: 'walley',component: walleycomponent}, {path: '**', component: pagenotfoundcomponent} ]; export const approuterproviders = [ providerouter(routes) ];
main.ts
import { bootstrap } '@angular/platform-browser-dynamic'; import {appcomponent} './app.component'; import {todostore} './todostore.service'; import { approuterproviders } './app.routes'; bootstrap(appcomponent,[approuterproviders,todostore]).catch(err => console.error(err));
nav.component.ts
import { component} '@angular/core'; import {router_directives} '@angular/router'; @component({ selector:'my-nav', templateurl: 'components/nav.component.html', directives:[router_directives] }) export class navcomponent{ num: number; }
in nav.component.html using [router-link] ="['/walley']"
trigger navigation.
any feedback on whether problem code or version of router using appreciated.
you need use [routerlink]
in template html. make sure use lowercase 'r', uppercase 'l' , no hyphens :)
also, it's handy bootstrap router directives if you're going using routerlinks lot in application
Comments
Post a Comment