代码之家 › 专栏 › 技术社区 › CularBytes

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

typescript angular

CularBytes · 技术社区 · 6 年前

我使用的是一个(.NET frameworkmvc)web项目,它不能完全转换成一个完整的角度项目,所以我不能使用angular的路由来延迟加载,但是我也不想在使用angular组件的地方加载所有东西。这是一个企业解决方案,说:“嘿,让我们充分利用angular,忘掉旧项目吧!”并不容易(而且便宜)。

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

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

发展 . 使用 ng build --watch 做你想做的事。 ng build --prod 它会产生问题。在我看来更像是然后是别的。

在下面的屏幕截图中,我演示了之后制作的内容

Click here to show bigger

因此,正如您所看到的,当只使用一行引导时,它工作得很好,没有错误。

但是当我有多个我想要的时候,它会将实际的模块改为 function() {} 然后显示控制台错误:

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

这真的是个虫子还是我做错了什么?

1 回复 | 直到 6 年前

sondreoanas 6 年前

基于url的引导组件

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

解决方案基于本文: How to manually bootstrap an Angular application

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

应用程序模块.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);

  });
}