Anna
Anna

Reputation: 1627

Error Can't resolve all parameters for RouteParams: (?)

I'm having problem with the RC3 router, the error that i'm having is : Can't resolve all parameters for RouteParams: (?) here 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}

       // ,        {path:'*other',component:HomeComponent}

];

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]

and on my navbar template, i'm doing the router link like this :

<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"
  }
}

Upvotes: 0

Views: 985

Answers (1)

Akshay Rao
Akshay Rao

Reputation: 3544

if u are using angular rc3 then u will have to use routes as this :-

{

path: '/dashboard',

name: 'Dashboard',

component: dashboardComponent,

useAsDefault: true }

in rc 4 u dont have to give the name property ...but in rc3 u have to give the name property of the routes as well...

i hope this solves ur problem :)

Upvotes: 1

Related Questions