Angular2 Quckstart seed：如何让 Karma 在没有 404 的情况下加载具有正确 .js 扩展名的注入打字稿？

Question

我正在使用 Angular2 quickstart 种子项目... Karma 可以很好地加载所有默认规范。当我添加一个名为 src/ng-testing/router-stubs.ts 的模拟时，它编译为 .js 就好了。但是，当我运行 Karma 时，我得到一个 404，因为它试图在没有扩展名的情况下加载 /base/ng-testing/router-stubs。

因为 ng-testing/ 在我的 src/ 中是正确的，所以它应该包含在 karma 配置的 globbing 模式中。 src/**/*.js

我只是在我的规范文件中使用正常的 angular/typescript 导入它（加载并编译为 .js 很好）：

import { AppComponent } from './app.component';
import { RouterLinkStubDirective, RouterOutletStubComponent } from '../ng-testing/router-stubs';

如何让它加载扩展程序？不管我把这个文件放在哪个文件夹中，testing/ 或 src/ng-testing/ 它仍然会尝试加载无扩展名。

如果需要，Karma conf：

 module.exports = function(config) {

  var appBase    = 'src/';       // transpiled app JS and map files
  var appSrcBase = appBase;      // app source TS files

  // Testing helpers (optional) are conventionally in a folder called `testing`
  var testingBase    = 'testing/'; // transpiled test JS and map files
  var testingSrcBase = 'testing/'; // test source TS files

  config.set({
    basePath: '',
    frameworks: ['jasmine'],

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter')
    ],

    client: {
      builtPaths: [appBase, testingBase], // add more spec base paths as needed
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },

    customLaunchers: {
      // From the CLI. Not used here but interesting
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

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

      // Polyfills
      'node_modules/core-js/client/shim.js',

      // zone.js
      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/jasmine-patch.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.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: appBase + 'systemjs.config.js', included: false, watched: false },
      { pattern: appBase + 'systemjs.config.extras.js', included: false, watched: false },
      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels

      // transpiled application & spec code paths loaded via module imports
      { pattern: appBase + '**/*.js', included: false, watched: true },
      { pattern: testingBase + '**/*.js', included: false, watched: true },


      // Asset (HTML & CSS) paths loaded via Angular's component compiler
      // (these paths need to be rewritten, see proxies section)
      { pattern: appBase + '**/*.html', included: false, watched: true },
      { pattern: appBase + '**/*.css', included: false, watched: true },

      // Paths for debugging with source maps in dev tools
      { pattern: appBase + '**/*.ts', included: false, watched: false },
      { pattern: appBase + '**/*.js.map', included: false, watched: false },
      { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
      { pattern: testingBase + '**/*.js.map', included: false, watched: false}
    ],

    // Proxied base paths for loading assets
    proxies: {
      // required for modules fetched by SystemJS
      '/base/src/node_modules/': '/base/node_modules/'
    },

    exclude: [],
    preprocessors: {},
    reporters: ['progress', 'kjhtml'],

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

Answer 1

是 system.config.js。它只是为应用程序路径设置环境默认扩展名。要么将您的测试文件夹放在那里，要么包含具有默认扩展名的 src 包。

packages: {
  app: {
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

Angular2 Quckstart seed：如何让 Karma 在没有 404 的情况下加载具有正确 .js 扩展名的注入打字稿？

Angular2 Quckstart seed: how to get Karma to load injected typescript with correct .js extension without 404?

javascript

jasmine

typescript

karma-runner

angular