I am getting error in Routing in Angular

Question

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'},

];

Answer 1

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.

Answer 2

Remove the single quotes on your component eg:

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

Answer 3

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.

Answer 4

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

Answer 5

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) ],