Angular2 routing between sub-applications in modules

Question

I'm using Angular 2.1 for a large application that has multiple sub-modules each defining sub-applications organized by feature. The top-level module configures the RouterModule with all child routes for the entire application by importing each sub-app's routes, etc. So from the sub-application's perspective, it routes relative to whatever the top-level application set the route to however the sub-application doesn't explicitly know what its top route actually is, directly.

Some of these sub-applications have summary panels for entities that are more fully defined/controlled in another sub-application. Conceptually the modules are setup like this:

Module 1:
    Imports Module 2
    Routes for Module 1
    Component1A
    App1View (contains Component1A, M2SummaryComponent)

Module 2:
    Routes for Module 2 (one exported as APP2_VIEW_ROUTE, type Route)
    Component2A
    Component2B
    M2SummaryComponent
    App2View (contains Component2A, Component2B)
    ...etc.

I'm looking for a design pattern whereby the M2SummaryComponent can be written to link to a route within its own module while it is instantiated in Module 1's App1View without having to hard-code or re-assemble routes somehow, manually.

I had hoped this was a common-enough problem that the Angular team likely made it possible using something like router.navigate([APP2_VIEW_ROUTE, ...other params]), where one can simply pass the route object you used to configure RouterModule pertinent to the desired path. Looking at the source code however this doesn't seem to be an option. Instead we have examples of ActivatedRoute.

The problem faced with ActivatedRoute (this.route below) is that it will be relative to App1View. So trying to use router.navigate(['m2SpecialId'],{relativeTo: this.route}) is a non-starter since it will be relative to the path that got us to App1View, not back into module 2's preferred route to App2View.

The only other, somewhat elegant, route (pun) around these issues as far as I can tell would be to make each sub-application's module be importable as a ModuleWithProviders such that, optionally, one can inform the module of the top-level route applied to its state. Then write up helper functions that assemble URIs specific to that sub-application using its defined routes.

That feels very boiler-plate...like perhaps the solution or design pattern already exists in the framework, hence this question.

Question:

Is there a design pattern for using the Angular2 Router that would allow components imported into other modules to cleanly reference their own module's pre-configured routes while maintaining a flexible top-level route definition?

Answer 1

If you want to access your M2Component in M1 via link then you should use RouterModule and do not import module2 in module1.

Inside module1 use

RouterModule.forRoot([
    {
        path: 'module2',
        loadChildren: 'path-of-module2/module2.module#Module2Module'
    }
])

and in module2

RouterModule.forChild([
    {
        path: '',
        component: Module2Component
    }
])

Now you can open Module2Component from route '/module2'.