Angular 7 не распознает маршрут с именем История

#angular #routes #angular7

#angular #маршруты #angular7

Вопрос:

Я настроил базовое приложение Angular 7 с настройками проекта быстрого запуска по умолчанию. У меня есть файл маршрутов, определенный следующим образом:

 //imports left out for brevity 

export const appRoutes: Routes = [
{ path: '',   component: HomeComponent},
{ path: 'Home',   component: HomeComponent},
{ path: 'History',   component: HistoryComponent},
];

@NgModule({
imports: [RouterModule.forRoot(appRoutes, { useHash: true} )], 
exports: [RouterModule]
});

export class AppRoutingModule {}

Я добавил импорт для моего файла маршрутизации в
imports:[] раздел моего app.module.ts файла, и когда я запускаю ng serve и открываю свой браузер и посещаю localhost:4200/#/ и localhost:4200/#/Home последующие страницы открываются нормально. Но когда я пытаюсь зайти localhost:4200/#/History , он не открывается, и я получаю сообщение об ошибке ниже:

Когда я меняю имя маршрута на что-то другое, он открывается нормально. Мне просто интересно, почему история не будет распознана Angular как маршрут?

Редактировать:

app.module.ts:

  import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core'; 
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';

 /* Components */
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
 import { HistoryComponent } from './components/history/history.component';

 /* Routing Module */
 import { AppRoutingModule }   from './routes/app.routing.module';


 @NgModule({
 declarations: [
 AppComponent,
 HomeComponent,
 HistoryComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 FormsModule,
 ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

app.component.ts:

  <router-outlet></router-outlet>`

app.component.ts

   import { Component } from '@angular/core';
   @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
   })
   export class AppComponent {
   title = 'app';
   }`

1. Как вы думаете, useHash: true что делает? Почему вы добавили это в свою конфигурацию?

2. Кроме того, сообщение об ошибке показывает, что то, что вы пробовали, history , не History .

3. это позволяет мне работать со схемой маршрутизации /# / home /#/some_route_here

4. даже если вы обращаетесь к URL с прописной буквы H, ошибка показывает небольшой регистр h, я не знаю почему

5. можете ли вы добавить свое app.module.ts содержимое файла и основной компонент, в который вы помещаете <router-outlet></router-outlet> ?

Ответ №1:

попробуйте это

 export const appRoutes: Routes = 
[
   { path: '',   component: HomeComponent},
   { path: 'home',   component: HomeComponent},
   { path: 'history',   component: HistoryComponent}
];

Ответ №2:

Вы можете попробовать это:

  export const appRoutes: Routes = 
[
 { path: 'Home', component: HomeComponent},
 { path: 'History', component: HistoryComponent},
 { path: '', redirectTo: 'Home', pathMatch: 'full'}
];