Страница ошибки 404 отображается автоматически, когда приложение загружается в первый раз в Angular 14

Question

Я создал небольшое приложение в Angular. Я пытаюсь сделать страницу ошибки 404 в этом приложении. Если пользователь ввел неправильный URL-адрес, эта страница ошибки будет отображаться автоматически.

Для этого я сделал - я создал имя отдельного компонента как «NotFoundComponent».

NotFoundComponent.html

      <h1>Page Not Found !! </h1>
<a routerLink="/">Go back to Home Page</a>

приложение-routing.module.ts

      const routes: Routes = [
  { path: 'about-us', component: AboutUsComponent },
  { path: 'how-it-works', component: HowItWorksComponent },
  { path: '**', component: NotFoundComponent },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  //providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

})
export class AppRoutingModule { }

app.module.ts

      @NgModule({
  declarations: [
    AppComponent,
    AboutUsComponent,
    HowItWorksComponent
  ],

  imports: [
    BrowserModule,
    AuthModule,
    UserModule,
    PublicModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Если я ввожу какой-либо неправильный URL-адрес, он работает нормально, он показывает страницу ошибки 404. т.е. NotFoundComponent.html.

Но моя проблема в том, что когда мое приложение загружается в первый раз, оно автоматически отображает страницу ошибки 404 или NotFoundComponent.html.

Вместо этого он работает нормально, я попробовал решение HashLocationStrategy в app-routing.module.ts , но оно у меня не сработает.

С моей точки зрения, я установил правильный порядок для модуля в файле app.module.ts и маршрутизации для файла app-routing.module.ts.

Любая помощь будет оценена....Спасибо!!

Answer 1

Причина в том, что ваш корневой путь не настроен в вашей конфигурации маршрутов. Таким образом, единственным маршрутом, соответствующим вашему корневому пути, является «шаблонный» маршрут, показывающийNotFoundComponent.

Чтобы решить эту проблему, вы должны определить корневой путь и назначить ему либо компонент для рендеринга, либо назначить путь перенаправления:

      const routes: Routes = [
  // either define a component to be rendered: 
  // { path: '', pathMatch: 'full', component: MyHomeComponent },
  //
  // or redirect to a different route: 
  // { path: '', pathMatch: 'full', redirectTo: '/about-us' },
  { path: 'about-us', component: AboutUsComponent },
  { path: 'how-it-works', component: HowItWorksComponent },
  { path: '**', component: NotFoundComponent },
];