时间戳

首页 > 解决方案 > 基于 main.ts 中的 URL 引导多个或单个模块

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 加载模块，并在每个页面上加载菜单模块。

目前，我不得不这样做，这只是一个小例子，角度的使用将在越来越多的单独页面上显着增长，直到我们可以更轻松地“切换”到完整的角度项目（在 .NET Core 中协同工作非常棒）。

因此，这在development上运行良好。使用ng build --watch做想要的事情。现在开始生产，运行ng build --prod它会产生问题。对我来说，它看起来更像是一个错误而不是其他东西。

在下面的屏幕截图中，我演示了ng build --prod对上述代码进行修改后产生的内容。

点击这里显示更大 在此处输入图像描述

如您所见，仅使用一行引导程序时，它工作正常，没有错误。

但是当我有多个我想要的时，它会更改实际的模块function() {}，然后给出控制台错误：

Uncaught Error: No NgModule metadata found for 'function(){}'.

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

标签： angulartypescript

解决方案

基于 url 的引导组件

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

该解决方案基于这篇文章：如何手动引导 Angular 应用程序

您无需编辑 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);

  });
}

推荐阅读