Angular - динамический модуль вставки Dynami c с маршрутами

Question

Товарищ Angular Разработчики,

Нужна помощь, чтобы пройти реструктуризацию Angular Приложения.

Позвольте мне начать с нашей текущей настройки:

We have angular 8.1.1
  "dependencies": {
    "@angular/animations": "^8.1.1",
    "@angular/cdk": "^8.0.2",
    "@angular/common": "^8.1.1",
    "@angular/compiler": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/forms": "^8.1.1",
    "@angular/material": "^8.0.2",
    "@angular/platform-browser": "^8.1.1",
    "@angular/platform-browser-dynamic": "^8.1.1",
    "@angular/platform-server": "^4.4.6",
    "@angular/router": "^8.1.1"
...
}
And Webpack "webpack": "^4.29.6"
And no angular.json file as we are still building using external webpack way as it started as angular2 (3-4 years old project).

Мы все еще используем JIT по наследству. В настоящее время у нас есть 1 приложение с включенной функцией отложенной загрузки. Существует множество подпрограмм, но в настоящее время все в одном проекте.

Наша инфраструктура реализует подключаемую / расширяемую архитектуру. Таким образом, с этим нам нужно также разделить пользовательский интерфейс на отдельные приложения / lib / bundle (в зависимости от того, что работает), чтобы мы могли упаковать только необходимое субприложение в пакет. Но необходимо сделать это, подключая и удаляя вложенные приложения напрямую, без перестройки или обновления angular приложения . Таким образом, в основном, когда приложение angular было создано, какой-то «NewAppModule» не был частью его , но мы хотим добавить его во время выполнения. И, повторяя, этот NewAppModule будет большим приложением с несколькими маршрутами и многочисленными компонентами (~ 100).

Мы попытались упаковать NewAppModule в отдельный чанк и загрузить и поместить его в route.config:

Feature Module:

const routes: Routes = [
  { path: 'other1', component: FeatureComponent1 },
  { path: 'other2', component: FeatureComponent2 },
  { path: 'other3', component: FeatureComponent3 },
...
];

@NgModule({
  imports: [RouterModule.forChild(routes),...],
  exports: [RouterModule],

})
export class FeatureModule { }

Webpack:

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts',
        'feature': './src/feature/feature.module'
    },
...

Основное приложение

Login Routes:
export const loginRoutes: Route[] = [
    {
        path: 'logincontroller',
        component: LoginComponent
    },
    { path: '**', redirectTo: '/' }
];

App Module:
@NgModule({
    imports: [
        HttpClientModule,
        BrowserAnimationsModule,
        LoginModule,
        CoreModule.forRoot(),
        RouterModule.forRoot(loginRoutes, { useHash: true, preloadingStrategy: CustomPreloader })
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent],
    exports: [RouterModule]
})

export class AppModule {
    public static config: ConfigService;
}


export const homeRoutes: Route[] = [
  {
      path: 'home',
      component: HomeComponent,
      canActivate: [AuthGuard]
  },
  {
      path: 'feature',
      loadChildren: () => fetch('feature.js')
      .then(response => response.text())
      .then(source => {
          const obj = eval(source);
          return obj.FeatureModule;
      }),
      ,canActivate: [AuthGuard]
  }
];

];

В конце мы видим модуль, добавленный к this.router.config , но маршруты неправильные , маршруты указывают на loginRoutes. Также, даже если для этой работы нам потребуется помощь на go сверх этого, как в настоящее время, я предполагаю, что знаю имя модуля. Нам нужно исправление модуля времени выполнения, даже не зная его имени.

{
      path: 'feature',
      loadChildren: () => fetch('feature.js')
      .then(response => response.text())
      .then(source => {
          const obj = eval(source);
          return obj;   // This is directly the module that we need as we do not know the name
      }),
      ,canActivate: [AuthGuard]
  }

Мы также пытались обновить router.config и router.resetConfig:

let newRoute =   {
      path: 'feature',
      loadChildren: () => fetch('feature.js')
      .then(response => response.text())
      .then(source => {
          const obj = eval(source);
          return obj.FeatureModule;
      }),
      ,canActivate: [AuthGuard]
  };
this._router.resetConfig([...this._router.config, route]);

This fails completely, no module loading, nothing.

Все IVY учебники, которые мы видим, - это динамический импорт компонентов , но не импорт и не присоединение полного модуля (с маршрутами) во время выполнения .

Возможно ли что-то подобное в angular, если да, что можно сделать и где мы идем не так (мы строим функцию. js неправильно)?

Любая помощь очень ценится. Большое спасибо.