I’m encountering a strange behavior in my Angular application. When I navigate to a route with a date parameter using a link within the app, it works perfectly. However, when I copy and paste the same URL into a new tab, it automatically redirects to /home.
example of URL: http://localhost:4200/home/2024-04-10
Further context:
- I believe the behavior to be new. We recently updated our codebase to angular 17, I don’t know if it could be related
- The logic in HomeComponent that handles the parameter never gets triggered, the redirect occurs before, which make me think that it must be related to the routing module, even though I left it barebone in the course of my debugging process:
Home module:
const routes: Routes = [
{
path: 'home',
redirectTo: 'home/',
pathMatch: 'full',
},
{
path: 'home/:date',
component: HomeScreenComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
root routing module:
const routes: Routes = [
{
path: '',
redirectTo: 'home/',
pathMatch: 'full',
resolve: {
customizing: CustomizingResolver,
},
},
{
path: 'reset-properties',
component: ResetPropertiesComponent,
data: {
redirectTo: '/auth/login',
},
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled' }),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
I’d be thankful, if not for a solution, then for some paths I could explore, as I am now at a loss.
5
Your root routing module is missing the routes for the child module.
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
{
path: '',
redirectTo: 'home/',
pathMatch: 'full',
resolve: {
customizing: CustomizingResolver,
},
},
{
path: 'reset-properties',
component: ResetPropertiesComponent,
data: {
redirectTo: '/auth/login',
},
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled' }),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
You can change the child routing to
const routes: Routes = [
{
path: ':date',
component: HomeScreenComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})