Angular дочерний маршрут не активируется

Question

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

Кажется, проблема в том, что моя маршрутизация работает только при перезагрузке страница напрямую. Когда я пытаюсь перемещаться по [routerLink]="['/admin', 'users']", ошибки не возникает, я вижу следы печати маршрутизатора в консоли, а при обходе дерева маршрутизатора я даже вижу компонент, который он должен загрузить, в списке, но это никогда не активируется.

// app.module.ts

const appRoutes: Routes = [{
    path: "",
    loadChildren: () => import("./auth/auth.module").then(m => m.AuthModule),
    data: {
        discriminantPathKey: "AUTHPATH",
        skipRouteLocalization: true
    }
}, {
    path: "admin",
    loadChildren: () => import("./admin/admin.module").then(m => m.AdminModule),
    data: {
        discriminantPathKey: "ADMINPATH",
        skipRouteLocalization: true
    }
}, {
    path: "",
    component: MainComponent,
    children: [{
        path: "",
        component: SidebarComponent,
        children: [{
            path: "",
            component: CitiesListComponent
        }, {
            path: "search",
            component: SearchComponent
        }, {
            path: ":cityId",
            component: CityComponent,
            children: [{
                path: "",
                redirectTo: "locations",
                pathMatch: "full"
            }, {
                path: "locations",
                component: LocationsListComponent,
                children: [{
                    path: ":locationId",
                    component: LocationComponent
                }]
            }]
        }]
    }]
}];

Модуль, который он загружает, имеет следующую настройку

// admin/admin.module.ts

import { NgModule } from "@angular/core";

import { FormsModule } from "@angular/forms";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { SharedModule } from "../shared/shared.module";
import { CommonModule } from "@angular/common";
import { AuthModule } from "../auth/auth.module";
import { AdminRoutingModule } from "./admin-routing.module";
import { UsersService } from "./services/users.service";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
import { NavigationComponent } from "./components/navigation/navigation.component";
import { UsersComponent } from "./components/users/users.component";
import { AdminComponent } from "./admin.component";


@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        NgbModule,
        SharedModule,
        AdminRoutingModule,
        AuthModule
    ],
    declarations: [
        AdminComponent,
        DashboardComponent,
        NavigationComponent,
        UsersComponent
    ],
    providers: [
        UsersService
    ],
    exports: [
        AdminRoutingModule
    ]
})
export class AdminModule {
}

И этот модуль маршрутизации он затем импортирует

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { TranslateModule } from "@ngx-translate/core";
import { LocalizeRouterModule } from "@gilsdav/ngx-translate-router";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
import { AdminComponent } from "./admin.component";
import { UsersComponent } from "./components/users/users.component";

const routes: Routes = [{
    path: "",
    component: AdminComponent,
    children: [{
        path: "",
        component: DashboardComponent,
        pathMatch: "full"
    }, {
        path: "users",
        component: UsersComponent
    }]
}];

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

Как я могу найти, где моя маршрутизация вызывает проблемы? Я попытался отладить, отредактировав вручную скомпилированные файлы JavaScript, но, к сожалению, это не очень хорошо работает.

Answer 1

Я думаю, что проблема заключается в модуле npx-translate-router. Во время отладки я изменил GilsdavReuseStrategy, чтобы он возвращал false для метода shouldReuseRoute, и внезапно маршрутизация снова заработала. Это вызвало некоторые другие проблемы, но по крайней мере переключило страницы.

Эта проблема должна быть доведена до автора пакета.