什么是angular2中使用system.config.js文件？

var map，packages，var config做什么？ 还解释了map和package对象的所有configuration属性。 有没有可用的configuration文件？

这是我的系统configuration文件

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'fscopy': 'npm:fs-extra/lib/copy/index.js', 'file-system': 'npm:file-system/file-system.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, fs: { defaultExtension: 'js' } } }); })(this); 

Answer 1

system.config.js是允许加载使用TypeScript编译器编译的模块（节点模块）的地方.map指的是包含JavaScript代码的JS文件的模块名称。

Answer 2

我想通过一个深入的例子来跟踪@Sajeetharan的答案。 所以假装你想要安装一个新的模块，我们将使用angular2-highcharts作为例子。 这里供参考是hightcharts的文档。

1. 如你所知，你开始运行你的npm命令npm install angular2-highcharts --save

   一个。 现在，您将在node_modules文件夹中看到已安装的模块

2. OK，所以你已经安装了一个新的模块来使用，现在你必须告诉你的应用程序在哪里find这个新的模块，以及如何加载它。 这是systemjs.config.js发挥作用的地方。

   一个。 首先，您需要“ map ”或告诉您的应用程序在哪里可以find这个新模块。 在这种情况下，它看起来像这样… 'angular2-highcharts': 'node_modules/angular2-highcharts',

   1. 现在让我们稍微分解一下。 'angular2-highcharts':这是说如果你正在引用angular2-highcharts，那么使用下面的path'node_modules / angular2-highcharts'

   湾 接下来是Package部分。 这是现在说，好的你已经映射到哪里可以find这个新的模块，现在你想运行在这个新的模块文件夹内？ 在这种情况下，它的'index.js'，我们定义如此…

    angular2-highcharts': { main: './index.js', defaultExtension: 'js' } 

   现在，您已经正确安装了模块并将其引用到systemjs.config.js中，您可以在“app.modules”组件中以及您希望的任何组件中调用导入。

编辑

忘了解释config 。 configuration只是一种简单的定义文件夹或文件的方法。 在你的configurationnpm: node_modules ，基本上是说你可以用npm简写node_modules。 这是显示在你像这样映射语句…. 'npm:@angular/core/bundles/core.umd.js'而不是写出node_modules/@angular/core/bundles/core.umd.js