Я получаю ошибку в Routing in Angular

Question

Ошибка говорит - >

ОШИБКА в файле src/app/app-routing.module.ts(29,14): ошибка TS2322: Тип '{путь: строка; компонент: строка; }[]'нельзя назначить типу'Route[]'. Тип '{путь: строка; компонент: строка; }'нельзя назначить типу' Route '. Типы свойств 'компонент' несовместимы. Тип "строка" не может быть назначен типу "Тип".

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

Ошибка говорит вам, что аргументы ваших маршрутов неверны, так как это должно быть так

export const routes: Routes = [

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

Это означает, что имена компонентов не должны быть записаны в виде строки.

Answer 2

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

это ваш кодовый тег.

Согласно документации angular, в компоненте файла маршрутизации одинарная кавычка не используется. и вы добавляете дополнительную запятую в конце пути регистрации. если вы объявили другой путь после пути регистрации, тогда вы используете запятую, иначе это вызовет исключение. Вот это правильный путь

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

Answer 3

Удалите одинарные кавычки на вашем компоненте, например:

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

Answer 4

Сначала импортируйте RouterModule как:

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

затем добавьте его в массив @NgModule.imports и настройте его с помощью маршрутов, вызвав RouterModule.forRoot()

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

И удалите одинарные кавычки на вашем компоненте, как я упоминал ниже:

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

Меня устраивает.

Answer 5

Пожалуйста, обратитесь к этому шаг за шагом.

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

Это определенно будет работать.

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
];

К массиву @NgModule.imports и настройте его с маршрутами за один шаг, вызвав RouterModule.forRoot()

imports: [ RouterModule.forRoot(routes) ],