Angular routerModule with children

Question

I am trying to implement a component with children compents using router-outlet tag and routerModule from Angular.

The issue with the angular RouterModule. For some unknown reason, having more than 2 children for a parent component does not work. In my case, the 3rd link is simply not working and if I open chrome console, the link it tries to navigate to is not localhost:4200 but localhost:8080.

If I change the order, then one of them will simply not work.

RouterModule.forChild([
        { path: '', component: MainComponent, canActivate: [AuthGuard]},
        { path: 'project',
            component: MainComponent,
            children : [
                {
                    path: ':id/:qid',
                    component: DataComponent
                },
                {
                    path: ':id',
                    component: ProjectComponent
                },
                {
                    path: 'search',
                    component: SearchComponent
                },
            ]
        }
    ])

This is an image of what I'm getting in chrome console. It is not supposed to reach out at the server.