在角2中使用的system.config.js文件是什么？

Question

var映射、包、var配置做什么。还解释映射和包对象的所有配置属性。是否有可用配置的文档？

这是我的系统控制文件

/**
 * 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 compiler.map编译的模块(节点模块)，将模块的名称引用到包含JavaScript代码的JS文件中。

Answer 2

我想通过给出一个深入的例子来跟进@Sajeetharan的回答。因此，假设您想安装一个新模块，我们将以angular2-highcharts为例。这里供参考的是高图表的文档。

1. 如您所知，首先运行npm命令npm install angular2-highcharts --save。 现在，您将在node_modules文件夹中看到已安装的模块。
2. 好的，你已经安装了一个新的模块来使用，现在你必须告诉你的应用程序在哪里找到这个新模块，以及如何加载它。这就是你systemjs.config.js发挥作用的地方。 首先，你需要"map“或者告诉你的应用程序在哪里找到这个新模块。在这种情况下看起来是这样的..。'angular2-highcharts': 'node_modules/angular2-highcharts',

1. now lets break this down a little. `'angular2-highcharts':` this is saying if you are referencing angular2-highcharts then use the following path of 'node\_modules/angular2-highcharts'

下一个是Package部分。这是说，好的，你已经映射到哪里找到这个新的模块，现在在这个新的模块文件夹中，你想要运行什么？在这种情况下，它是`index.js‘，我们这样定义.

Angular2-高级图表：{ main：'./index.js'，defaultExtension：'js‘}

现在您已经正确地安装了该模块并在您的systemjs.config.js中引用了它，您可以在您的'app.modules‘组件中调用导入，并在您想要的任何组件中调用它。

编辑

忘了解释config。Config只是一种定义文件夹或文件的方法，其值很短。在您的配置npm: node_modules中，基本上是说您可以用npm短手node_modules。这显示在映射语句中，如.'npm:@angular/core/bundles/core.umd.js'而不是写出node_modules/@angular/core/bundles/core.umd.js

Answer 3

如果您使用的是角-Cli，应该不需要systemjs.config.每件事都应该用角度来照顾。