Different layouts with angular component router

Question

I want to build an angular application with the component router. This application consists of two different layouts. One is the login screen with two fields, a button and nothing else. The other one is the main layout with header, sidebar and content. The content area is changing depending on the route.

Here is my component tree:

Here is also a plnkr: Link

This is how I'm defining the routes for login and main:

/* main.js */
$routeConfig: [
   {path: '/login', name: 'Login', component: 'login'},
   {path: '/...', name: 'Main', component: 'main', useAsDefault: true}
]

Now I have two major problems with the approach I'm using now.

First, all links inside my Main component are resolved with double slashes when using ng-link. That could lead to problems with some browsers I think.

/*this is what i get*/ 
//crisis-center 

/* this is how it should look like*/
/crisis-center

Second, since my navigation component is not a route component, but a separate one, I have no access to $route. Therefore, I have to inject the $rootRouter. Now when I'm using its isRouteActive function, it always returns true. This means, all my navigation links will get the active class.

/* main.js */
this.routeIsActive = function (routerLink) {
    /* always returns true */
    return $rootRouter.isRouteActive($rootRouter.generate(routerLink));
}