I'm encountering an issue with the RC3 router. The error message I am receiving is: Can't resolve all parameters for RouteParams: (?). Below is my code:
//route.ts
import {provideRouter, RouterConfig} from '@angular/router';
import {HomeComponent} from './components/home.component';
import {ActionsComponent} from './components/actions.component';
import {TasksComponent} from './components/tasks.component';
import {DetailsComponent} from './components/details.component';
import {ActionFormComponent} from './forms/action-form.component';
import {TaskFormComponent} from './forms/task-form.component';
import {ActionViewFormComponent} from './forms/action-view-form.component';
import {TaskViewFormComponent} from './forms/task-view-form.component';
export const appRoutes: RouterConfig = [
{path:'', component:HomeComponent},
{path:'actions',component:ActionsComponent},
{path:'actions/:id',component:ActionFormComponent},
{path:'actions/new', component:ActionFormComponent},
{path:'actionview',component:ActionViewFormComponent},
{path:'tasks',component:TasksComponent},
{path:'tasks/:id',component:TaskFormComponent},
{path:'tasks/new', component:TaskFormComponent},
{path:'taskview',component:TaskViewFormComponent}
];
export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);
//boot.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import {provideRouter} from '@angular/router';
import {APP_ROUTER_PROVIDER} from './routes';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);
//appComponent
import {Component} from '@angular/core';
import {PostService} from './services/post.service';
import { Observer } from 'rxjs/Observer';
import {Input} from '@angular/core';
import {HTTP_PROVIDERS, Jsonp} from '@angular/http';
import {Http, Headers, BaseRequestOptions, RequestOptions} from '@angular/http';
import {NavBarComponent} from './components/navbar.component';
import {OnInit, Output} from '@angular/core';
import { provideRouter, RouterConfig, ROUTER_DIRECTIVES, ActivatedRoute, Router } from '@angular/router';
import { RouterLink, RouteParams, ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'my-app',
template: `
<navbar></navbar>
<div class="container">
<router-outlet></router-outlet>
</div>
`,
directives:[NavBarComponent, ROUTER_DIRECTIVES, RouterLink],
providers:[PostService, HTTP_PROVIDERS, ROUTER_DIRECTIVES]
On my navbar template, I am using the following router link structures:
<li><a [routerLink]= "['actions/']" routerLinkActive="active">Actions</a></li>
<li><a [routerLink]="['tasks/']" routerLinkActive="active">Tasks</a></li>
//Package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/common": "2.0.0-rc.3",
"@angular/forms": "^0.1.0",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-alpha.8",
"@angular/router-deprecated": "2.0.0-rc.2",
"es6-shim": "0.35.1",
"es6-promise": "3.2.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.8.1"
}
}