My router links in my Angular 4 app are raising errors when clicked. They were working up until I implemented a user login component. When the app is loaded it checks if the user is logged in. If they are not, it sends them to the LoginComponent with this.router.navigate(['login'])
. Once the user successfully logs in, I call this.router.navigate([''])
and the rest of the app is displayed normally. Then, when a link is clicked in the main area of the app, this error is thrown:
TypeError: Cannot read property 'component' of undefined
at PreActivation.traverseRoutes (router.umd.js:4259)
at router.umd.js:4240
at Array.forEach (<anonymous>)
at PreActivation.traverseChildRoutes (router.umd.js:4239)
at PreActivation.traverseRoutes (router.umd.js:4268)
at router.umd.js:4240
at Array.forEach (<anonymous>)
at PreActivation.traverseChildRoutes (router.umd.js:4239)
at PreActivation.traverse (router.umd.js:4186)
at MapSubscriber.project (router.umd.js:4032)
at PreActivation.traverseRoutes (router.umd.js:4259)
at router.umd.js:4240
at Array.forEach (<anonymous>)
at PreActivation.traverseChildRoutes (router.umd.js:4239)
at PreActivation.traverseRoutes (router.umd.js:4268)
at router.umd.js:4240
at Array.forEach (<anonymous>)
at PreActivation.traverseChildRoutes (router.umd.js:4239)
at PreActivation.traverse (router.umd.js:4186)
at MapSubscriber.project (router.umd.js:4032)
at resolvePromise (zone.js:770)
at resolvePromise (zone.js:741)
at zone.js:818
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.umd.js:4143)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at HTMLDivElement.ZoneTask.invoke (zone.js:490)
The links work just fine if the login process is turned off (the user is sent directly to the main screen). Anyone have any info for me? Thanks!
UPDATE:
Here is my router configuration:
const routes: Routes = [
{
path: 'main',
component: MainComponent,
children: [
{ path: 'source/:source', component: ListComponent }
]
},
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'main/source/My workstation', pathMatch: 'full' },
{ path: '**', redirectTo: 'main/source/My workstation', pathMatch: 'full' }
];
Of course I find a solution right after creating a post...
I removed the router outlet in the MainComponent, and changed the main route's child config to this: