After updating the Angular router from version 2 to "3.0.0-beta.2", my app stopped working. I suspect the issue lies in the following code snippet:
Files:
app.component.ts
import { Component} from '@angular/core';
import {NavComponent} from "./nav.component";
import { ROUTER_DIRECTIVES } from '@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} from "./about.component";
import {TasksComponent} from "./tasks.component";
import {WalleyComponent} from "./walley.component";
import {DashboardComponent} from "./dash-board.component";
import {PageNotFoundComponent} from "./404.component";
import { provideRouter, RouterConfig } from '@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 } from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import {TodoStore} from './todoStore.service';
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent,[appRouterProviders,TodoStore]).catch(err => console.error(err));
nav.component.ts
import { Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector:'my-nav',
templateUrl: 'components/nav.component.html',
directives:[ROUTER_DIRECTIVES]
})
export class NavComponent{
num: Number;
}
In nav.component.html, I am using [router-link] ="['/walley']" to trigger navigation.
I would appreciate any feedback on whether the issue is with the code or the version of the router being used.