我有一个Angular 2应用程序(RC7),它作为单个组件开始,但很快就会以各种不同(有时甚至是完全不相关)的方式在整个项目中使用 .
因此,单个 NgModule 引导所有组件似乎是一个可怕的想法与巨大的膨胀 . 我正在努力寻找一种方法来拥有多个模块(模块A将包含组件A,模块B将包含组件B等),并且仍然允许在单个页面上引导多个A2应用程序 .
在实践中,我想要实现的是:
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',
defaultExtension: 'js'
},
}
});
})(this);
AppOne和AppTwo的模块只是引导相关组件(componentOne&componentTwo) . 但是,两者不会同时在同一页面上呈现 . 我在控制台中没有错误,但是最后在systemjs.config.js文件中列出的最新软件包是唯一要加载的软件包 .
谁能明白为什么它可能不起作用?或者推荐另一种方法来构建我的模块 . 我宁愿没有列出所有组件,服务等的父模块 - 这似乎打败了Angular 2的嵌套组件树,并最终会以指数方式影响页面加载时间 .
提前致谢 .
3 回答
对于任何感兴趣的人来说,问题在于引导 . 两个应用程序必须一致地引导才能工作 .
index.html
systemjs.config.js
appOneAndTwo.main.ts
它仍然不理想,因为我必须为我创建的Angular 2应用程序的每个组合创建一个新的main.ts文件,但它确实意味着导入仅在必要时严格导入,并且有效负载不会膨胀给最终用户 .
我目前正在使用Webpack查看AoT编译器(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)和uglification / minification以进一步减少有效负载大小 .
你可以从AppModule中提升一个组件数组,如下所示:
然后在index.html中
我不知道你是否能够实现你想要的确切解决方案,但你可以尝试延迟加载一些模块 .
例如,您创建一个AppModule(用于引导) . 在AppModule中,您只导入“home”模块(我将其命名为HomeModule) .
比所有其他模块都可以延迟加载(reference)