Angular 2中的多个模块
|
我有一个Angular 2应用程序(RC7),它作为单个组件开始,但很快就会以各种不同(有时甚至是完全不相关)的方式在整个项目中使用.
因此,单个NgModule引导所有组件似乎是一个可怕的想法,有大量的膨胀. 在实践中,我想要实现的是： Page 1 bootstraps模块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',}
});
})(this);
AppOne和AppTwo的模块只是引导相关组件(componentOne& componentTwo).但是,两者不会同时在同一页面上呈现.我在控制台中没有错误,但是最后在systemjs.config.js文件中列出的最新软件包是唯一要加载的软件包. 谁能明白为什么它可能不起作用？ 提前致谢.
对于任何感兴趣的人来说,问题在于引导.两个应用程序必须一致地引导才能工作.
的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/'
},appOneAndTwo: '/angular2/',appOneAndTwo: {
main: './appOneAndTwo.main.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文件,但它确实意味着导入仅在必要时严格导入,并且有效负载不会膨胀给最终用户. 我目前正在使用Webpack查看AoT编译器(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)和uglification / minification以进一步减少有效负载大小. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |