Error while configuring routes in Angular 2

Question

i have been working with a product list Project and while configuring routes to navigate between different views, I get a red squiggly under the '@Routes' decorator and when i hover over the Routes, it says 'Routes only refers to a type, but is being used as a value here'. I researched in so many sights including here and tried many different ways to resolve this but I could not find out the issue.

app.component.ts

import { Component } from '@angular/core';
import { ProductListComponent } from './products/product-list.Component';
import { ProductService } from './products/product.service'
import { Routes } from '@angular/router';
import 'rxjs/Rx'; // Load all features
import { WelcomeComponent } from './home/welcome.component'
@Component({
selector: 'pm-app',
template: `
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a>Home</a></li>
                    <li><a>Product List</a></li>
                </ul>
            </div>
        </nav>
    </div> 
    ` ,   
    entryComponents : [ProductListComponent],
    providers: [ProductService]
})

@Routes([
{ path: '/welcome' , name: 'Welcome' , component: WelcomeComponent,   useAsDefault: true},
{ path: '/products' , name: 'Products' , component: ProductListComponent }

])

export class AppComponent {

pageTitle:string = 'Acme Product Management';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ProductListComponent } from './products/product-list.Component';
import { HttpModule } from "@angular/http";
import { RouterModule } from '@angular/router'

import { ProductFilterPipe } from './products/product-filter.pipe';
import { StarComponent } from './shared/star.component';

import { AppComponent }  from './app.component';

@NgModule({
imports: [ BrowserModule,FormsModule,HttpModule,RouterModule],
declarations: [   AppComponent,ProductListComponent,ProductFilterPipe,StarComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

welcome.compnent.ts

import { Component } from '@angular/core';

@Component({
templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {
public pageTitle: string = 'Welcome';
}

I think my coding is fine. But unable to get the expected result. Please Help!

Answer 1

Found out, the issue is... with RC5, Routes is an array of path's & is no more a Decorator, and you have to import 'RouterModule' instead of 'provideRouter'. While exporting you have to use 'RouterModule.forRoot'.

Also with RC5, we no longer specify the string name of the component while configuring routes instead we only specify the path & component only. And we no longer use the prefix '/' for the path. Also we no longer using useAsDefault instead we use redirectTo property to configure the default path.

I have used a separate module to do my route configurations instead of doing it in the root component as earlier. An updated version of my route configuration is given as below. Hope this will be helpful.

app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './products/product-list.Component';
import { WelcomeComponent } from './home/welcome.component'
import { ProductDetailComponent } from './products/product-   detail.component';

const routes: Routes = [
{ 
    path: 'welcome' , 
    component: WelcomeComponent,
},

{ 
    path: 'products' , 
    component: ProductListComponent 
},

{ 
    path: 'product/:id' , 
    component: ProductDetailComponent 
},

{
    path:'',
    redirectTo:'/welcome',
    pathMatch:'full'
},
];

export const routing = RouterModule.forRoot(routes);