Angular 2 Routing issue, routes to blank page
<p>I am having an issue with the new Angular 2 router. I have a button click event that calls a function to route to a dashboard page from a login component. both are child components of the main app component. when I click the button and the function fires I use the navigateByUrl() function to navigate to the dashboard page from the login. but when that function is called, the browser url shows localhost:52370/dashboard? and a black page in the browser. Im not sure where this problem originates from. here is my app.routes.ts file</p>

<pre><code>const appRoutes: Routes = [
{ path: "", component: HomeComponent },
{ path: "home", redirectTo: "" },
{ path: "login", component: LoginComponent },
{ path: "dashboard", component: DashboardComponent },
];

export const AppRoutingProviders: any[] = [];
export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);
</code></pre>

<p>login.component.ts file</p>

<pre><code>constructor(private router: Router, private route: ActivatedRoute) { }

public login() {
    this.loginStatus = true;
    this.onLogin.emit(this.loginStatus);
    this.router.navigateByUrl("dashboard")
        .then(function () {
            console.log("success");
        }).catch(function (err) {
            console.log(err);
        });
}
</code></pre>