CODEWITHSUNDEEP
angulartypescriptangular-routing
Anurag Ranjan
Anurag Ranjan

Reputation: 63

I am getting error in Routing in Angular

Error says - >

ERROR in src/app/app-routing.module.ts(29,14): error TS2322: Type '{ path: string; component: string; }[]' is not assignable to type 'Route[]'. Type '{ path: string; component: string; }' is not assignable to type 'Route'. Types of property 'component' are incompatible. Type 'string' is not assignable to type 'Type'.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes } from '@angular/router';

import { SliderComponent } from './slider/slider.component';
import { SignupFormComponent } from './signup-form/signup-form.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }
export const routes: Routes = [

  {path : 'ImgSlider' , component: 'SliderComponent'},
  {path : 'signup'  , component: 'SignupFormComponent'},

];

Upvotes: 0

Views: 6591

Answers (5)

nilnil
nilnil

Reputation: 45

{path : 'ImgSlider' , component: 'SliderComponent'},
{path : 'signup'  , component: 'SignupFormComponent'},

this is your code tag.

According to angular documentation there is no use of single quote in component of routing file. and you add extra comma at the end of your signup path. if you have declare other path after signup path then you use comma other wise it throws an exception. Here it is the correct way

{path : 'ImgSlider' , component: SliderComponent},
{path : 'signup'  , component: SignupFormComponent}

Upvotes: 2

Cryptex Technologies
Cryptex Technologies

Reputation: 1163

First import RouterModule as:

import { RouterModule } from '@angular/router';

then add it to the @NgModule.imports array and configure it with the routes by calling RouterModule.forRoot()

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

And remove the single quotes on your component as I mentioned below:

const routes: Routes = [
  {path: 'ImgSlider', component: SliderComponent}
];

It works for me.

Upvotes: 1

Abhi
Abhi

Reputation: 21

Remove the single quotes on your component eg: 

{path : 'ImgSlider' , component: SliderComponent},

Upvotes: 1

vijay sahu
vijay sahu

Reputation: 815

Please refer this step by step.

https://angular.io/tutorial/toh-pt5

It will definitely work.

import { HeroesComponent }      from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent } //here you have marked it as string it should be refer to component name
];

To the @NgModule.imports array and configure it with the routes in one step by calling RouterModule.forRoot()

imports: [ RouterModule.forRoot(routes) ],

Upvotes: 1

maha
maha

Reputation: 643

the error tells you that the arguments of your routes are wrong, since it should be like this 

export const routes: Routes = [

 {path : 'ImgSlider' , component: SliderComponent},
 {path : 'signup'  , component: SignupFormComponent},
 ];

which means components names shouldn't be written as string.

Upvotes: 5

Related Questions