Angular 2中的多个模块

Question

我有一个Angular 2应用程序（RC7），它作为一个单独的组件开始，但很快就会以各种不同的（有时是完全不相关的）方式在整个项目中使用。

因此，一个单独的NgModule引导所有组件似乎是一个巨大的膨胀的可怕想法。 我很努力地找到一种方法来拥有多个模块（模块A将包含组件A，模块B将包含组件B等），并且仍然允许在单个页面上引导多个A2应用程序。

在实践中，我想实现的是：

1个白手起家模块A - 这个工程。

Page 2 bootstraps模块B - 这个工程。

Page 3 bootstraps模块A &模块B - 这不起作用。

的index.html

<script src="/angular2/node_modules/zone.js/dist/zone.js"></script> 
<script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script> 
<script src="/angular2/node_modules/systemjs/dist/system.src.js"></script> 
<script src="/angular2/systemjs.config.js"></script> 


<script type="text/javascript"> 
    System.import('appOne').catch(function(err){ console.error(err); }); 
    System.import('appTwo').catch(function(err){ console.error(err); }); 
</script> 

systemjs.config.js

(function (global) { 
    System.config({ 
     paths: { 
      'npm:': '/angular2/node_modules/' 
     }, 
     map: { 
      appOne: '/angular2/', 
      appTwo: '/angular2/', 
     }, 
     packages: { 
      appOne: { 
       main: './appOne.main.js', 
       defaultExtension: 'js' 
      }, 
      appTwo: { 
       main: './appTwo.main.js', 
       defaultExtension: 'js' 
      }, 
     } 
    }); 
})(this); 

AppOne和AppTwo的模块简单地引导相关的组分（ComponentOne的& componentTwo）。但是，两者不会同时在同一页面上呈现。我在控制台中没有错误，但无论哪个程序包在systemjs.config.js文件中最后列出，都是唯一要加载的程序包。

任何人都可以看到为什么它可能不工作？ 或者，也许建议另一种方式来组织我的模块。 我宁愿没有一个包含列出的所有组件，服务等的父模块 - 这似乎打败了Angular 2的嵌套组件树，并且最终会以指数方式影响页面加载时间。

在此先感谢。

Answer 1

任何有兴趣，问题是引导。为了工作，这两个应用必须一致引导。

的index.html

<script src="/angular2/node_modules/zone.js/dist/zone.js"></script> 
<script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script> 
<script src="/angular2/node_modules/systemjs/dist/system.src.js"></script> 
<script src="/angular2/systemjs.config.js"></script> 


<script type="text/javascript"> 
    System.import('appOneAndTwo').catch(function(err){ console.error(err); }); 
</script> 

systemjs.config。JS

(function (global) { 
    System.config({ 
     paths: { 
      'npm:': '/angular2/node_modules/' 
     }, 
     map: { 
      appOne: '/angular2/', 
      appTwo: '/angular2/', 
      appOneAndTwo: '/angular2/', 
     }, 
     packages: { 
      appOne: { 
       main: './appOne.main.js', 
       defaultExtension: 'js' 
      }, 
      appTwo: { 
       main: './appTwo.main.js', 
       defaultExtension: 'js' 
      }, 
      appOneAndTwo: { 
       main: './appOneAndTwo.main.js', 
       defaultExtension: 'js' 
      }, 
     } 
    }); 
})(this); 

appOneAndTwo.main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {AppOneModule} from './app/app.one.module'; 
import {AppTwoModule} from './app/app.two.module'; 

platformBrowserDynamic().bootstrapModule(CommentAppModule); 
platformBrowserDynamic().bootstrapModule(WorkflowAppModule); 

它仍然不理想，因为我必须创建一个新的main.ts文件角2个应用程序创建的每个组合，但它确实意味着只有在必要时严格导入导入，并且有效载荷不会扩展到最终用户。

我目前使用Webpack查看AoT编译器（https://angular.io/docs/ts/latest/cookbook/aot-compiler.html）和uglification/minification以进一步减少有效负载大小。

Answer 2

我不知道你是否可以达到你想要的确切解决方案，但你可以尝试延迟加载你的一些模块。

例如，您创建一个AppModule（用于引导）。在AppModule中，你只导入你的“家”模块（我将称之为HomeModule）。

比其他所有模块可以延迟加载（reference）

Answer 3

您可以从上文AppModule，像这样的自举组件阵列：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import {AppComponent} from "./app.component"; 
import {MainSidebarComponent} from "./menus/main-sidebar.component"; 
import {FormsModule} from "@angular/forms"; 
import {appRouting} from "./app.routes"; 
import {DashBoardComponent} from "./dashboard/dashboard.component"; 
import {HomeComponent} from "./home/home.component"; 
import {LoginComponent} from "./login/login.component"; 
import {UsersModule} from "./users/users.module"; 
import {TopBarComponent} from "./menus/top-bar.component"; 

@NgModule({ 
    imports:  [ 
     BrowserModule, 
     FormsModule, 
     appRouting, 

     UsersModule 
    ], 
    declarations: [ 
     AppComponent, 
     MainSidebarComponent, 
     TopBarComponent, 
     DashBoardComponent, 
     HomeComponent, 
     LoginComponent 
    ], 
    bootstrap: [ AppComponent, MainSidebarComponent, TopBarComponent ] 
}) 
export class AppModule { } 

然后在你的index.html

<!doctype html> 
<head> 
    <base href="/"> 
    <meta charset="UTF-8"> 

    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) { 
      console.error(err); 
     }); 
    </script> 
</head> 
<body class=" sidebar_main_open sidebar_main_swipe"> 

<header id="header_main"> 
<top-bar></top-bar> 
</header>< 


<aside id="sidebar_main"> 
    <main-sidebar></main-sidebar> 
</aside> 


<div id="page_content"> 
    <div id="page_content_inner"> 
     <my-app>Loading....</my-app> 
    </div> 
</div> 
</body> 
</html>