Angular 2中的多个模块 [英] Multiple modules in Angular 2

问题描述

我有一个Angular 2应用程序(RC7)，它最初是一个单独的组件，但是很快就以各种不同的(有时是完全不相关的)方式在整个项目中使用.

I have an Angular 2 app (RC7) which started as a single component but is quickly becoming used throughout the project in various different (and sometimes completely unrelated) ways.

因此，单个 NgModule 引导所有组件似乎是一个可怕的主意，并且有大量的膨胀. 我正在努力寻找一种具有多个模块的方法(模块A将包含组件A，模块B将具有组件B，等等)，并且仍然允许在单个页面上引导多个A2应用程序.

As a result of this, a single NgModule bootstrapping all the components seems like a terrible idea with a huge amount of bloat. I am struggling to find a way to have multiple modules (Module A would contain Component A, Module B would have Component B, etc) and still allow the bootstrapping of multiple A2 applications on a single page.

在实践中，我要实现的目标是:

In practice, what I am trying to achieve is this:

第1页的引导程序模块A-这有效.

Page 1 bootstraps Module A - this works.

第2页的引导程序模块B-这有效.

Page 2 bootstraps Module B - this works.

第3页的引导程序模块A&模块B-这不起作用.

Page 3 bootstraps Module A & Module B - this doesn't work.

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文件中最后列出的那个软件包是唯一要加载的软件包.

AppOne and AppTwo's modules simply bootstrap the relevant component (componentOne & componentTwo). However, both will not render on the same page at the same time. I have no errors in the console, but whichever package is listed last within the systemjs.config.js file is the only one to load.

谁能看到为什么它可能无法正常工作? 或者也许推荐另一种结构模块的方式. 我宁愿没有列出所有组件，服务等的父模块-这似乎违反了Angular 2的嵌套Component树的观点，最终将成倍地影响页面加载时间.

Can anyone see why it might not be working? Or perhaps recommend another way to structure my modules. I'd rather not have one parent module with all components, services, etc listed - this seems to defeat the point of Angular 2's nested Component trees, and will eventually affect page-load times exponentially.

谢谢.

推荐答案

对于任何感兴趣的人，问题在于引导.必须同时引导两个应用程序才能正常工作.

For anyone interested, the issue was bootstrapping. Both apps have to be bootstrapped in unison in order to work.

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);

这仍然不是理想的，因为我必须为我创建的Angular 2应用的每个组合创建一个新的 main.ts 文件，但这确实意味着仅在必要时才导入导入，并且有效负载不会使最终用户肿.

It's still not ideal as I have to create a new main.ts file for every combination of Angular 2 apps I create, but it does mean the imports are only imported strictly when necessary and the payload isn't bloated to the end user.

我目前正在查看AoT编译器( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html )，并使用Webpack进行丑化/缩小，以进一步减小有效负载大小.

I am currently looked at the AoT compiler (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) and uglification/minification using Webpack to further reduce payload size.

这篇关于Angular 2中的多个模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！