I've been tackling a poorly developed Angular 7 legacy application and encountering a bizarre issue. There's a component that requires a parameter for email verification, but when the URL is visited directly, it doesn't function as expected. Strangely enough, manually navigating to the link with a hardcoded ID using an anchor tag works fine. I've investigated all routes, guards, and redirections, but can't seem to figure out why this odd behavior is happening.
-- app.component.ts
--- home.component.ts
---- verify.component.ts
The app component contains the router outlet for components, while the verify component is nested within the home component. I even tried placing the router outlet in the home component, but saw no change. Interestingly, the login and register components nested inside the home component folder work without any issues when accessed directly.
Here is the routing for the home module:
const homeRoutes: Routes = [
{ path: '', redirectTo: 'index', pathMatch: 'full' },
{ path: 'index', component: HomeComponent },
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
{ path: 'register', loadChildren: './register/register.module#RegisterModule' },
{ path: 'verify/:id', loadChildren: './verify/verify.module#VerifyModule' }]
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
PaginationModule,
ModalModule.forRoot(),
RouterModule.forChild(homeRoutes),
NgxSummernoteModule,
Daterangepicker,
NgxDropzoneModule,
ShareModule,
TooltipModule.forRoot(),
],
declarations: [HomeComponent],
providers: [],
bootstrap: [HomeComponent]
})
export class HomeModule { }
Here is the routing for the verify module:
const verifyRoutes: Routes = [
{ path: "", component: VerifyComponent },
];
@NgModule({
imports: [
CommonModule,
PaginationModule,
FormsModule,
ModalModule.forRoot(),
RouterModule.forChild(verifyRoutes),
],
declarations: [VerifyComponent],
providers: [DataService, NotificationService],
})
export class VerifyModule {}
Here is the app module routing:
const appRoutes = [{ path: 'home', loadChildren: './home/home.module#HomeModule' }]
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CookieModule.forRoot(),
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes, { useHash: true, enableTracing: true }),
SlimLoadingBarModule.forRoot(),
PaginationModule.forRoot(),
BrowserAnimationsModule,
ReactiveFormsModule,
ModalModule.forRoot(),
BsDropdownModule.forRoot(),
ShareModule,
],
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
It's been several days and I'm still stuck on this issue. I've tried multiple solutions, but this one has me puzzled because when accessing the URL directly, Chrome freezes and eventually prompts that the page is unresponsive. Seeking guidance from the SO community. Thank you.