I am encountering an issue with Angular 8 where I am trying to fetch some parameters or data from the route but consistently getting empty values. The component resides within a lazy-loaded module called 'message'.
app-routing.module.ts:
...
{
path: 'message',
loadChildren: () =>
import('./systems/message/message.module').then(
m => m.MessageModule
)
},
...
message-routing.module.ts:
...
const routes: Routes = [
{
path: '',
component: MessageIndexComponent,
children: [{ path: ':folder', component: ComponentMessageListComponent }]
},
{ path: 'add', component: MessageAddComponent },
{ path: 'list', component: MessageIndexComponent }
];
...
component-message-list.component.ts:
...
constructor(
private route: ActivatedRoute
) {}
ngOnInit() {
console.log(this.route.snapshot.paramMap.get('folder'));
// Change list on date change
this.route.paramMap.subscribe(params => {
console.log(params.get('folder'));
});
}
...
When navigating to this address:
/message/inbox
UPDATE:
I have tried navigating to the route by directly typing the address in the browser:
or using an anchor tag:
message-index.component.html
...
<a class="list-group-item list-group-item-action d-flex p-3" routerLink="inbox" routerLinkActive="active">
Inbox
</a>
...
The parameter always appears null in both scenarios.