Using of Dependency Injected routes causes reload of page

There are two (at least) possible ways of how to make routing between some page and its sub-components rendered after the router-outlet tag:

1) Common. Route table in root module:

    const userRoutes: Routes = [
      { path: 'RootPath',
        component: SomeRootComponent1,
        children: [
          { path: 'subApp1', component: SomeChildComponent1},
          { path: 'subApp2', component: SomeChildComponent2},
          { path: '', component: FallbackChildComponent}
        ]
      },
    ];

this route table resides inside the SomeRootComponent1-routing.module

in this case If we use routerLink Angular does not reopen the whole page during the navigation to children pages

2) When we use a kind of Dependency injection - all routes we store in children Components and root component knows about them almost nothing (well, it imports their modules, but it is by Angular design)

An example above after applying of DI technique:

in children, we have to add routing modules, for example to SomeChildComponent1:

    // split our route to three dedicated routes for every child and put them to children's routing-modules:

    // child 1 routing table
    const routes: Routes = [
        { path: 'RootPath',
          component: SomeRootComponent1,
          children: [
            { path: 'subApp1', component: SomeChildComponent1},
          ]
        },
    ];

    // child 2 routing table
    const routes: Routes = [
        { path: 'RootPath',
          component: SomeRootComponent1,
          children: [
            { path: 'subApp2', component: SomeChildComponent2},
          ]
        },
    ];

    // fallback child (default land page) routing table
    const routes: Routes = [
        { path: 'RootPath',
          component: SomeRootComponent1,
          children: [
            { path: '', component: FallbackChildComponent},
          ]
        },
    ];

I think an idea is clear. It works perfect, the only problem - Angular reloads the whole page during a navigation. In fact routes in approach 1) and 2) the same, so would be better to not reload the page. As far as I understand it occurs because routes do not have optimisation after creation and for Angular they are dedicated route array members and therefore it reloads the page.

angular / router

Using of Dependency Injected routes causes reload of page #434