Angular 8 Маршрутизация: изменение URL не приводит к переходу на ожидаемую страницу

Question

Я создаю простой Angular проект с двумя компонентами: home и submit . Мой app-routing.module.ts выглядит следующим образом:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, ActivatedRoute } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SubmitComponent } from './submit/submit.component';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'submit', component: SubmitComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

В моем браузере, если я изменю путь на / submit , страница выглядит так, как будто она перезагружается и затем по умолчанию возвращается к / home . Я уже пытался изменить путь : '' на путь: '**' . Он не перемещается к компоненту submit . Есть идеи, что я делаю неправильно?

Angular 8.2.14 Google Chrome

Answer 1

В вашей конфигурации маршрутизации нет ничего плохого. У нас недостаточно информации, чтобы помочь вам точно определить вашу проблему.

Когда мне задают этот вопрос, обычно это одна из следующих проблем:

1. В вашем индексе отсутствует <base href="/">. html head элемент

2. Не импортировать AppRoutingModule в ваш AppModule

3. Отсутствует <router-outlet></router-outlet> элемент в родительском компоненте

Я видел в комментариях, что у вас есть <base href="/"> в вашем файле индекса. html, поэтому мы пока забудем его.

Отсюда:

Убедитесь, что вы импортируете AppRoutingModule в файл App.Module.ts.

Если это не проблема, убедитесь, что у вас есть <router-outlet></router-outlet> элемент в родительском компоненте (вероятно, ваш app.component. html в зависимости от простоты вашего приложения). Маршрутизатор Angular ищет в ваших маршрутах тот, который соответствует URI, и внедряет экземпляр компонента, указанного в вашей конфигурации маршрутизации, в ближайший router-outlet, который находится выше в дереве компонентов. Другими словами, если router-outlet отсутствует, маршрутизатор Angular не знает, где отобразить компонент, указанный в конфигурации маршрутизации.

Если ни один из них не решил вашу проблему, попробуйте опубликовать больше информация, чтобы мы могли помочь дальше. Было бы полезно увидеть как минимум файлы app.module.ts и app.component. html. Или попробуйте воссоздать ваше приложение в stackblitz и опубликовать ссылку.