Global routing between angular modules

Question

I'm using Angular2 in my project and I have several modules.

I have base module which is called BaseModule And have for example two (or more) extra modules - FirstModule and SecondModule .

Each module has his own routing. BaseModule has basic routes for system, FirstModule and SecondModule has his own separated routes.

BUT

I want to create routes like

/user/10/profile

Where ProfileComponent for user contains into FirstModule

Another examples

/user/10/stories

Where StoriesComponent for user contains into FirstModule

/user/10/news

Where NewsComponent for user contains into SecondModule !!!!

But Angular Router allow only routes like:

/firstmodule/......

/secondmodule/......

So, they should be grouped by module.

I want to do it with modules because I want to have async(lazy) loaded parts of my application.

As I know Angular disallow variants when we async(lazy) load components.

Anybody have ideas how I can create what I want?

Answer 1

For routes in root module define your roots as RouterModule.forRoot(['']) and for routes in the other modules use RouterModule.forChild(['']) . Since your child modules will be in the imports of the parent this will route properly.