Angular2 测试，SystemJS 无法加载模块

Question

我的环境设置与官方 Angular2 快速入门非常相似，只有一个区别：我没有 public/src/app，而是 public/app.

当尝试用 ViewChild 测试 Component 时：

@ViewChild('profileModal')
profileModal: ModalComponent;

在被测组件中加载为：

import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

npm test 显示此错误：

05 05 2017 17:45:48.218:WARN [web-server]: 404: /base/ng2-bs3-modal/ng2-bs3-modal
[1] Chrome 58.0.3029 (Mac OS X 10.12.2) ERROR
[1]   {
[1]     "originalErr": {
[1]       "__zone_symbol__currentTask": {
[1]         "type": "microTask",
[1]         "state": "notScheduled",
[1]         "source": "Promise.then",
[1]         "zone": "<root>",
[1]         "cancelFn": null,
[1]         "runCount": 0
[1]       }
[1]     },
[1]     "__zone_symbol__currentTask": {
[1]       "type": "microTask",
[1]       "state": "notScheduled",
[1]       "source": "Promise.then",
[1]       "zone": "<root>",
[1]       "cancelFn": null,
[1]       "runCount": 0
[1]     }
[1]   }

karma.config.js: [为简洁起见省略]

module.exports = function(config) {
  var appBase    = 'app/';       // transpiled app JS and map files
  var appSrcBase = appBase;      // app source TS files

  config.set({
    basePath: '.',

    proxies: {
      '/base/node_modules/': '/base/node_modules/'
    },
  })
}

如何告诉 karma 从 /base/npm_modules/ng2-bs3-modal/ng2-bs3-modal 而不是 /base/ng2-bs3-modal/ng2-bs3-modal 加载，因为它正在尝试。

使用 SystemJs 代替 Webpack。

Answer 1

你应该把它放在 karma.config 文件的文件部分，像这样：

files: [ 'node_modules/ng2-bs3-modal/ng2-bs3-modal.js' ]

不确定您的配置文件中是否已有该部分，但以防万一，请记住您可以传递 systemjs 配置以让它加载您的应用程序及其依赖项：

files: [
    // System.js for module loading
    'node_modules/systemjs/dist/system.src.js',

    // Load any lib not included in systemjs.config here, like zone.js 
    'node_modules/zone.js/dist/zone.js',

    // RxJs
    { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
    { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false},
    // Paths loaded via module imports:
    // Angular itself
    { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
    { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

    { pattern: 'systemjs.config.js', included: false, watched: false },
    { pattern: 'systemjs.config.extras.js', included: false, watched: false },
    'karma-test-shim.js',
]

您可以参考这篇post了解更多详情。

Angular2 测试，SystemJS 无法加载模块

Angular2 testing, SystemJS unable to load modules

karma-runner

karma-jasmine

angular