Angular 基于main.ts中的URL引导多个或单个模块

我正在处理一个（.NET Framework MVC）web项目，该项目无法完全转换为完整的angular项目，因此我不能使用angular的路由来延迟加载，但我也不想在使用angular组件的地方加载所有内容。这是一个企业解决方案，说“嘿，让我们充分利用angular，忘掉旧项目吧！”并不容易（也不便宜）

因此，在我看来，我已经以一种干净的方式解决了这个问题，基于URL加载不同的模块，以避免将所有内容都加载在一起：

main.ts

console.log("bootstrapping start");
if (window.location.pathname.toLowerCase().includes("contactplans/details")) {
    console.log("bootstrapping contactplan details");
    platformBrowserDynamic().bootstrapModule(ContactplanDetailsModule)
        .catch(err => console.log(err));
} else if (window.location.pathname.toLowerCase().includes("contactplans/index") || window.location.pathname.toLowerCase().endsWith("contactplans") || window.location.pathname.toLowerCase().includes("settings/contactplans")) {
    console.log("bootstrapping contactplan index");
    platformBrowserDynamic().bootstrapModule(ContactplanListModule) //contact plan index and settings page
        .catch(err => console.log(err));
} 
console.log("bootstrap decision done, bootstrapping menu");
platformBrowserDynamic().bootstrapModule(MenuModule)
    .catch(err => console.log(err));

因此，基于URL，它加载模块，并在每个页面上加载菜单模块

就目前而言，我不得不这样做，这只是一个小例子angular的使用将在越来越多的单独页面上显著增长，直到我们可以更容易地“切换”到完整的angular项目（在一起工作的.NET Core中）

因此，这在开发中非常有效。使用

ng build--watch

执行所需的操作。 现在开始生产，运行

ng build--prod

会产生问题。在我看来，它更像是一只虫子，而不是别的东西

在下面的屏幕截图中，我演示了当我修改上述代码时，

ng build--prod

之后生成的内容

正如您所看到的，当只使用一行引导时，它工作正常，没有错误

但是，当我有多个我想要的模块时，它会将实际模块更改为

function（）{}

，然后给出控制台错误：

Uncaught错误：找不到'function（）{}的NgModule元数据。

这真的是一个bug还是我做错了什么？

基于url引导组件 我也有同样的问题，我的解决方案是基于url引导不同的组件，而不是引导不同的模块

解决方案基于本文：

您不编辑main.ts，但在AppModule中，您可以根据url手动引导不同的组件，并将它们添加到DOM中

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ContactplanDetailsComponent } from './ContactplanDetails.component';
import { ContactplanListComponent } from './ContactplanList.component';
import { MenuComponent } from './Menu.component';



@NgModule({
  imports: [BrowserModule],
  declarations: [
     ContactplanDetailsComponent,
     ContactplanListComponent,
     MenuComponent
  ],
  //bootstrap: [AppComponent] Bootstrapping is done manually
  entryComponents: [
     ContactplanDetailsComponent,
     ContactplanListComponent,
     MenuComponent
  ]

})
export class AppModule { 
  ngDoBootStrap(app) {
    bootstrapComponent(app);
  }
}

function bootstrapComponent(app) {

  var name = [];

  const options = {
    'contact-plan-details': ContactplanDetailsComponent,
    'contact-plan-list': ContactplanListComponent,
    'menu': MenuComponent
  };

  if (window.location.pathname.toLowerCase().includes("contactplans/details")) {
    name.push("contact-plan-details"); 
  } else if (window.location.pathname.toLowerCase().includes("contactplans/index") || window.location.pathname.toLowerCase().endsWith("contactplans") || window.location.pathname.toLowerCase().includes("settings/contactplans")) {
    name.push("contact-plan-list");
  } 
  name.push("menu")

  name.forEach(function (element) {

    const componentElement = document.createElement(element);
    document.body.appendChild(componentElement);

    const component = options[element];
    app.bootstrap(component);

  });
}

---

虽然这在某种程度上是一个有效的答案，但不幸的是，我注意到它要求我导入每个组件所需的所有模块。因此，我不能100%确定这是否有利于加载时间/性能。例如，html编辑器导入到AppModule中，而它仅在

ContactplanDetailsComponent

中需要。你觉得呢？我也这么做了，我在发球时收到了这个警告未启用惰性路由发现中的警告。因为主文件中既没有entryModule，也没有静态分析的引导代码```嗨，蓝白细胞，你找到这个问题的解决方案了吗？你采取了哪种方法？请提出建议。@kaleshanagineni不幸的是，我找不到比唯一答案更好的解决方案。