Проблемы с маршрутизацией Angular (маршрутизатор не регистрирует клики)

Question

Я застрял и буду благодарен за вашу помощь.

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

--- Основной модуль агрегатора маршрутизации ---

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

const routes: Routes = [
  {
    path: "",
    loadChildren: () =>
      import("../../views/home/home.module").then((m) => m.HomeModule),
  },
  {
    path: "personalisation",
    loadChildren: () =>
      import("../../views/personalisation/personalisation.module").then(
        (m) => m.PersonalisationModule
      ),
  },
  {
    path: "weddingcollection",
    loadChildren: () =>
      import("../../views/wedding-collection/wedding-collection.module").then(
        (m) => m.WeddingCollectionModule
      ),
  },
  {
    path: "weddingservice",
    loadChildren: () =>
      import("../../views/wedding-service/wedding-service.module").then(
        (m) => m.WeddingServiceModule
      ),
  },
  {
    path: "designerperfumes",
    loadChildren: () =>
      import("../../views/designer-perfumes/designer-perfumes.module").then(
        (m) => m.DesignerPerfumesModule
      ),
  },
  {
    path: "shop",
    loadChildren: () =>
      import("../../views/shop/shop.module").then((m) => m.ShopModule),
  },
  {
    path: "spotlight",
    loadChildren: () =>
      import("../../views/blog/blog.module").then((m) => m.BlogModule),
  },

  {
    path: "spotlight/:id",
    loadChildren: () =>
      import("../../views/single-blog-page/single-blog-page.module").then(
        (m) => m.SingleBlogPageModule
      ),
  },

  {
    path: "addblog",
    loadChildren: () =>
      import("../../views/add-blog/add-blog.module").then(
        (m) => m.AddBlogModule
      ),
  },

  {
    path: "**",
    loadChildren: () =>
      import("../../views/page-not-found/page-not-found.module").then(
        (m) => m.PageNotFoundModule
      ),
  },
];

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

Точно так же каждый стек компонентов / модулей имеет свой собственный модуль маршрутизации, как показано ниже.

---- Индивидуальный модуль с определением маршрутизации ---

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { BlogComponent } from "./blog.component";

const routes: Routes = [{ path: "", component: BlogComponent }];

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

--- компонент, где пользовательские ссылки жестко запрограммированы ----

<div id="sideMenuitems" class="sidenav-item">
  <a [routerLink]="['']">
    <h4 class="text-uppercase">Home</h4>
  </a>

  <a [routerLink]="['/personalisation']">
    <h4>Personalisation</h4>
  </a>

  <a [routerLink]="['/shop'] ">
    <h4 class="text-uppercase">Shop</h4>
  </a>

  <a [routerLink]="['/weddingcollection']">
    <h4 class="text-uppercase">Wedding Collection</h4>
  </a>

  <a [routerLink]="['/designerperfumes']">
    <h4 class="text-uppercase">Designer Perfumes</h4>
  </a>

  <a [routerLink]="['/weddingservice']">
    <h4 class="text-uppercase">Wedding Service</h4>
  </a>

  <a [routerLink]="['/spotlight']">
    <h4 class="text-uppercase">Spotlight</h4>
  </a>
</div>

Эта проблема:

Когда я нажимаю на ссылки несколько раз (в 50% случаев), щелчок не регистрирует изменение маршрутизации. экран становится пустым, и после проверки URL остается неизменным.

Например, скажем, пользователь сейчас находится на странице блога (в центре внимания) и нажимает на страницу магазина.

1. Экран становится пустым,
2. В URL по-прежнему указано /spotlight, а не /shop.
3. Затем пользователь нажимает на другую ссылку, например /designerperfumes
4. Экран загружает дизайнерский парфюмерный компонент, и все в порядке
5. теперь пользователь снова нажимает на ссылку магазина - Экран загружает страницу магазина.

Это происходит в 50% случаев во всех трех (браузерах Chrome, Safari и Firefox). Я не могу понять, что происходит, так как у меня есть базовые представления об Angular Routing и Lazy loading.

Не могли бы вы помочь.

Спасибо.

Answer 1

Я думаю, у вас есть проблемы со структурой, вы можете использовать расширение Chrome "Augury", чтобы увидеть в браузере дерево маршрутизаторов вашего приложения. Проверить, не импортируются ли модули в двух местах.