1

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 个启用了延迟加载的应用程序。有许多子应用程序，但目前，一切都在一个项目中。

我们的基础设施正在实现一个可插拔/可扩展的架构。因此，我们需要将 UI 也分离到单独的应用程序/lib/bundle 中（无论哪个有效），因此我们只能将所需的子应用程序打包到包中。但是需要直接附加和删除子应用程序，而无需重新构建或刷新 angular app。所以基本上当构建 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。此外，即使这项工作我们需要帮助来超越目前的范围，我假设我知道模块名称。我们需要的是运行时模块补丁，甚至不知道模块的名称。

{
      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 教程都是动态导入组件，而不是在运行时导入和附加完整的模块（带路由）。

这样的事情在角度上是否可行，如果可以，可以做什么以及我们哪里出错了（我们是否错误地构建了 feature.js）？

任何帮助是极大的赞赏。非常感谢。

4

0 回答 0