角度2/4：路由不起作用

Question

My routing

   RouterModule.forRoot([
            { path: 'login', component: LoginComponent },
            { path: 'home', component: HomeComponent },
        ])

In app component I have this.router.navigate(['home']); This doesn't navigate me to home component.

When I routed to login page, my left nav is also displayed.

My app.component.ts

<div class='container-fluid'>
    <div class='row'>

        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>

        <div class='col-sm-9 body-content'>
            <router-outlet>
                <input style="float:right" placeholder="Search" autofocus>
            </router-outlet>
        </div>

    </div>
</div>

Answer 1

This Error is offently this one.

You got many other module loading before, and so one is already defining an empty path, so router doesn't put your route to your module. (order of your modules imported matters). if you are lazy loading this module, check the order of other lazy loaded module, then check the order you put your RoutingModule into your module (order here matters to). Angular offical doc advice to put this as first, the first route matching url is rendered.

Answer 2

Try with this:

Create new file named as app.routing.ts

import { LoginComponent } form ...
import { HomeComponent } from ..

export const routing = RouterModule.forRoot([
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent }   
]);

//And Finaly in app.module.ts
//include the constant like this
import { routing } from './app.routing';

.....

@NgModule({
   imports: [routing]
});