如何在 Angular2 中使用 bootstrapModule() 引导两个模块？答案

【问题标题】：How to bootstrap two Modules using bootstrapModule() in Angular2?如何在 Angular2 中使用 bootstrapModule() 引导两个模块？
【发布时间】：2018-01-08 21:22:51
【问题描述】：

通常这是模块与 main.ts 集成或引导的方式。

import {platformBrowserDynamic} from'@angular/platform-browser-dynamic'

import {AppModule} from './app.module'

platformBrowserDynamic().bootstrapModule(AppModule)

但如果我们有两个模块说：

AppModule - 与 UI 相关的更改/修改一起使用
DataModule - 用于通信/修改/显示数据相关接口

AppModule 和 DataModule 都处理 UI 修改，但考虑到各自的 UI 修改目标，我想同时使用两个模块。我该如何开始？

这种方法是否能够渲染两个模块并执行独立的操作？

在 index.html

 ...
 ...
 <body class="container">
  <!--Listing Selectors for loading App-Module -->
  <events-app></events-app>
  <events-list></events-list>
  <!-- listing Selectors for loading Data-Module -->
  <events-data></events-data>
  <filter-data></filter-data>
 </body>
 ...
 ...

在 main.ts

import {platformBrowserDynamic} from'@angular/platform-browser-dynamic'
import {AppModule} from './app.module'
import {DataModule} from './data.module'

platformBrowserDynamic().bootstrapModule(AppModule, DataModule)

【问题讨论】：

标签： angularjs-module angular2-modules

【解决方案1】：

好吧，我在我的 Angular 4 应用程序中做了类似的事情，只是在 main.ts 和 tsconfig.json 中进行了一些配置，并且它工作得非常好。您可以按照以下步骤进行尝试。

第 1 步：创建您的模块并声明您在引导该模块时要加载的根组件。

例如。在这里我创建了user.module.ts

import { NgModule }      from '@angular/core';

// root component of usermodule
import { UserAppComponent }   from './userapp.component';

@NgModule({
  imports:[FormsModule,HttpModule],
  declarations:[UserAppComponent],
  providers:[],
  bootstrap:[UserAppComponent]
})
export class UserModule { }

第 2 步：转到main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';

window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;

第 3 步：转到 tsconfig.json 并将新创建的模块和组件插入到 "files" 数组中

"files":[
    //....your other components ...//
    "myapp/user.module.ts",  
    "myapp/userapp.component.ts",           
  ]

第 4 步：现在您可以从 .js 文件中的任意位置引导 Angular 模块。就像我从我的 .js 文件中这样引导。引导可能会根据您的要求而有所不同，但步骤 1 到 3 应该相同。

window.platform.bootstrapModule(window.UserModule);

【讨论】：

错误 TS2339：“窗口”类型上不存在属性“平台”。
我可以使用这种方法创建两个相同的模块并在其中使用它们两次：