来自单个.js文件的@angular模块的System.config映射

Question

I am currently developing an Angular 2 application, where the requirement is to put all the resulting javascript files to a single .js file (Namely: output.js) 我目前正在开发Angular 2应用程序，其中的要求是将所有生成的javascript文件放到单个.js文件中（即：output.js）

Now, I 've to add map configuration in System.config.js. 现在，我必须在System.config.js中添加地图配置。

There we usually give the location of the folders for respective modules. 我们通常在此处给出各个模块的文件夹位置。

Eg.) 例如。）

 var map = { '@angular': 'node_modules/@angular' };

But now that I have everything in a single Javascript file, how do I map those entries? 但是现在我将所有内容都保存在一个Javascript文件中，如何映射这些条目？

The problem I am facing because of this is, whenever I try loading the html, it looks for @angular module internally and fails as the path is different. 因此，我面临的问题是，每当我尝试加载html时，它都会在内部查找@angular模块，并且由于路径不同而失败。

My HTML looks like this, 我的HTML看起来像这样，

 <html> <head> <script src="output.js"></script> </head> <body> <test-app>Loading...</test-app> <script> System.import('runtime/main').then(null, function(err) {console.log(err)}); </script> </body> </html>

My System.config.js looks like this, 我的System.config.js看起来像这样，

 (function (global) { // map tells the System loader where to look for things var map = { 'app': 'dist', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular', 'ng2-img-cropper': 'ng2-img-cropper' }; //The above is where I face problems. Since it points to node_modules, I want this to be changed // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': {main: 'newAgain.js', defaultExtension: 'js'}, 'rxjs': {defaultExtension: 'js'}, 'angular2-in-memory-web-api': {defaultExtension: 'js'}, }; var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/platform-browser', '@angular/platform-browser-dynamic' ]; // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } packageNames.forEach(function (pkgName) { packages[pkgName] = {main: 'index.js', defaultExtension: 'js'}; }); var config = { packages: packages }; // filterSystemConfig - index.html's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config); })(this);

Summary: 摘要：

I have a html file 我有一个html文件
I have a single .js file (output.js) that includes the scripts from all dependencies and also the project specific js. 我有一个.js文件（output.js），其中包括来自所有依赖项的脚本以及项目特定的js。 (Like angular, systemjs, rxjs, ....) （例如angular，systemjs，rxjs等）

Requirement: 需求：

Link/Map modules properly in the system.config.js configuration. 在system.config.js配置中正确链接/映射模块。

Any help would be appreciated! 任何帮助，将不胜感激！

Thanks. 谢谢。

Answer 1

Finally! 最后！ I was able to get an answer to the above solution. 我能够得到上述解决方案的答案。 I have actually made that as a git repository. 我实际上已将其作为git存储库。

If anybody is looking for the answer for these kinds of problems. 如果有人在寻找这些问题的答案。 Github - angular2-bundle-all-single-script Github-angular2-bundle-all-single-script

来自单个.js文件的@angular模块的System.config映射

问题描述

1 个解决方案

解决方案1
0 2016-09-17 05:45:11

来自单个.js文件的@angular模块的System.config映射

问题描述

1 个解决方案

解决方案1 0 2016-09-17 05:45:11

解决方案1
0 2016-09-17 05:45:11