Angular2:NG2-Simple-Timer未加载

时间:2016-12-19 09:08:43

标签: angular

我正在尝试将ng2-simple-timer模块嵌入到我的应用程序中,但似乎我在做错了网站上的说明(我希望我提供所有相关信息):

  1. 我已经npm install ng2-simple-timer --save运行,然后在SimpleTimer中将providers添加到app.module数组。尝试加载应用程序会导致错误:GET http://localhost:3000/ng2-simple-timer 404 (Not Found)。这是因为该模块安装在node_modules
  2. 按照其他示例的说明,我已将以下行添加到systemjs.config.js'ng2-simple-timer': 'npm:ng2-simple-timer/index.js'。这导致错误:GET http://localhost:3000/node_modules/ng2-simple-timer/lib/simple-timer 404 (Not Found)。如果我理解正确,这是因为simple-timer是纯JS模块而不是Typescript。
  3. 我删除了上述行并添加了以下内容:///<reference path="../node_modules/ng2-simple-timer/index.d.ts" />typings/index.d.ts<script src="node_modules/ng2-simple-timer/index.js"></script>index.html,但仍导致错误:Uncaught ReferenceError: exports is not defined index.js:1 < / LI>

    那么在我的应用程序中包含此模块的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

以下是我在ng2-simple-timer-example中使用的systemjs.config.js。该示例已更新为支持angular2 2.4.x。

(function (global) {
  // map tells the System loader where to look for things
  var map = {
    'app': 'app', // 'dist',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    'ng2-simple-timer': 'node_modules/ng2-simple-timer',
    'angular2-uuid': 'node_modules/angular2-uuid'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { main: 'bundles/Rx.min.js', defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-simple-timer': { main: 'index.js', defaultExtension: 'js' },
    'angular2-uuid': { main: 'index.js', defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic'
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);