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

时间:2016-05-07 15:57:53

标签: angular typescript angular-material

我对如何配置这个system-config.ts感到很困惑,现在我试图将材料2代码包含在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快速启动中,它看起来如下所示,

    (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文件时,我无法做到。请帮帮我。

1 个答案:

答案 0 :(得分:5)

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' }