Angular 4 Router links not working after redirect

604 views Asked by At

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' }
];
1

There are 1 answers

0
elliotwesoff On

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:

{
    path: 'main',
    children: [
        { path: 'source/:source', component: MainComponent }
    ]
},
...