Маршрутизация и навигация: невозможно получить доступ к другим маршрутам на веб-странице

Question

Я использую Angular 8 и у меня проблемы с маршрутами на моей странице. Я создал необходимые компоненты, а также объявил их и импортировал их с необходимыми путями для навигации по веб-странице.

app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";

import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from "@angular/fire/firestore";

import { HomeComponent } from "./home/home.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { environment } from "src/environments/environment";

@NgModule({
  declarations: [AppComponent, HomeComponent, LoginComponent, SignupComponent],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: "", component: HomeComponent },
      { path: "login", component: LoginComponent },
      { path: "signup", component: SignupComponent }
    ]),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app -routing.module.ts:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent
  },

  {
    path: "home",
    component: HomeComponent
  },

  {
    path: "signup",
    component: SignupComponent
  },
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  }
];

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

Поскольку я добавил все необходимые компоненты в модуль приложения, разве он не должен работать, когда я меняю URL и добавляю / login или / signup? Также примечание: я не вижу свой код html в компонентах. Единственное место, где его можно увидеть и увидеть на моем сайте, это индекс. html. Это связано с моими компонентами?

Answer 1

Ваша проблема в том, что вы объявляете пустой маршрут перед другими маршрутами. Angular всегда будет отправлять вас по первому URL, который ему подходит. В вашем случае { path: "", component: HomeComponent } - это первое совпадение независимо от URL, к которому вы пытаетесь обратиться.

Совет: старайтесь всегда использовать RoutingModule, как вы, но без импорта RouterModule.forRoot(...). Просто удалив это должно работать.