Using angular component routing in different modules

Question

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.

score 1 · Accepted Answer · answered May 17 '16 at 09:48

Since you are nog using your Angular app as a single pager I've made some kind of workaround where your module (eg module-one) initiates the $routerRootComponent (eg component-router-component) that holds the routing of the modules. The $routerRootComponent initiates another component (eg module-one-overview) that has it's own $routeConfig.

See my Plunker for a code example.

(Sorry, I had to short URL this to get around the Stackoverflow feature that demands code when referring to a Plunker URL)

Using angular component routing in different modules

1 Answers1