Using angular component routing in different modules

Why is module 2 displayed inside Module 1?

We have one angular app that contains multiple modules. For some modules we would like to use a component router. We don't know on which page (url) the component will be loaded.

Current situation: Inside module 1 the templates for module 2 are being displayed.

Desired result: Have paths relative to the component so that '...com/someUrlWhereModule1Lives#/step2' loads step 2 of module 1
'...com/someUrlWhereModule2Lives#/step2' loads step 2 of module 2

module1.module.js

angular
.module('app.module1', ['ngComponentRouter'])
.value('$routerRootComponent', 'module1')
.component('module1', {
    templateUrl: 'module1.overview.html',
    $routeConfig: [
        {path: '/', name: 'Overview', component: 'module1Step1', useAsDefault: true},
        {path: '/step2', name: 'Overview', component: 'module1Step2'}
    ]
})
.component('module1Step1', {
  bindings: { $router: '<' },
  templateUrl: 'module1.step1.html'
})
.component('module1Step2', {
  bindings: { $router: '<' },
  templateUrl: 'module1.step2.html'
});

module2.module.js

angular
.module('app.module2', ['ngComponentRouter'])
.value('$routerRootComponent', 'module2')
.component('module2', {
    templateUrl: 'module2.overview.html',
    $routeConfig: [
        {path: '/', name: 'Overview', component: 'module2Step1', useAsDefault: true},
        {path: '/step2', name: 'Step2', component: 'module2Step2'}
    ]
})
.component('module2Step1', {
  bindings: { $router: '<' },
  templateUrl: 'module2.step1.html'
})
.component('module2Step2', {
  bindings: { $router: '<' },
  templateUrl: 'module2.step2.html'
});

Link to demo

If any more information is needed please let me know.