My current setup involves Angular routing along with the use of ngx-translate-router, and I've encountered an unusual issue with child routes. It's unclear whether this problem is connected to the translated router module I'm utilizing, but due to the complexity of the application, it's challenging to dissect.
The main issue appears to be that my routing functions only when the page is reloaded directly. When attempting to navigate using [routerLink]="['/admin', 'users']", there are no errors reported. The console displays the router traces, and while examining the router tree, I can see the component intended to load listed, yet it remains inactive.
// 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
}]
}]
}]
}]
}];
The subsequent loaded module is configured as follows
// 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 {
}
And here is the routing module it imports
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 {}
How can I pinpoint where the issue with my routing lies? I attempted debugging by manually altering the compiled JavaScript files, but unfortunately, this method proved ineffective.