Angular2 - 如果计划任何新库，如 angular2 -material2 包，如何配置 system-config.ts

Question

我对这个 system-config.ts 的配置方式有点困惑，现在我试图将 material2 代码包含到 Angular 快速启动包中，但它没有用。

在material2 github中显示，需要在system-config.ts中添加以下配置，但找不到解决方案。下面是 material2 依赖项。

    // The core package is required as a peerDependency for other components.
'@angular2-material/core': {
  format: 'cjs',
  defaultExtension: 'js',
  main: 'core.js'
},
'@angular2-material/checkbox': {
  format: 'cjs',
  defaultExtension: 'js',
  main: 'checkbox.js'
},//

在 angular2 quick start 中，它看起来像下面这样，

    (function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];

  // 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 = {
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

除此之外，我还需要在 index.html 页面中添加任何内容吗？angular2 的旧版本，我能够配置它，但是当配置被移动到新的 ts 文件时我不能。请帮助我。

Answer 1

做

var packages = {
    'app': {
        main: 'main.js',
        defaultExtension: 'js'
    },
    'rxjs': {
        defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
        defaultExtension: 'js'
    },
    '@angular2-material/core': {
        format: 'cjs',
        defaultExtension: 'js',
        main: 'core.js'
    },
    '@angular2-material/checkbox': {
        format: 'cjs',
        defaultExtension: 'js',
        main: 'checkbox.js'
    }
};

---

你可能因为那个packageNames而感到困惑，但如果你看下面它有一个循环

只需将每个 packageNames 成员添加到 packeges 对象并提供默认值

{ main: 'index.js', defaultExtension: 'js' }.