Angular 2 一直在我的文件导入末尾添加“/testing”-systemjs

Question

我刚刚开始向我的 angular 2 应用程序添加单元测试，但我做噩梦了，每次我必须向我的应用程序导入我以前从未使用过的新东西时，它在每次导入的末尾添加“/testing”：

例如：

localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js/testing 404 (Not Found)

这让我抓狂，因为我修复了其中一个错误，然后当我需要导入其他文件时，同样的事情发生在另一个文件导入上。

当前完整错误：

zone.js:1382 GET http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js/testing 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM1624:3fetchTextFromURL @ system.src.js:1051(anonymous function) @ system.src.js:1781ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1780(anonymous function) @ system.src.js:2809(anonymous function) @ system.src.js:3387(anonymous function) @ system.src.js:3701(anonymous function) @ system.src.js:4093(anonymous function) @ system.src.js:4556(anonymous function) @ system.src.js:4825(anonymous function) @ system.src.js:407ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:232 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js/testing(…)ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost:3002/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/testing 404 (Not Found)

我一直在尝试通过在 systmejs.config.js:

中添加这样的行来修复它

'@angular/core/testing': "npm:@angular/core/bundles/core-testing.umd.js", 每次都会出现类似的新错误，它有时有效，有时无效，但无论如何都会花费很长时间 - 我的 systemjs.config.js 有问题吗？:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'js/app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/core/testing': "npm:@angular/core/bundles/core-testing.umd.js",
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'angular2-google-maps': 'npm:angular2-google-maps',
      'angular2-google-map-auto-complete' : 'npm:angular2-google-map-auto-complete', 
      'ng2-bs3-modal': 'npm:ng2-bs3-modal',
      "ng2-popover": "npm:ng2-popover",
      "zone.js": "npm:zone.js"
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: 'main.js',
        defaultExtension: 'js'
      },
      "node_modules/ng2-bs3-modal": {
        defaultExtension: 'js' 
      },
      'node_modules/angular2-google-maps/core': { 
        defaultExtension: 'js', 
        main: 'index.js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 1

您需要将 testing 包映射到测试文件。例如，查看您的核心模块配置

'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/core/testing': "npm:@angular/core/bundles/core-testing.umd.js",

这里，@angular/core/testing映射到core-testing.umd.js文件。现在看看你的编译器模块配置

'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

没有对应的testing配置。所以当一个文件试图导入

import { Something } from '@angular/compiler/testing`

它从可用映射 (compiler.umd.js) 中获取 @angular/compiler 并在末尾添加 testing。核心模块不会发生这种情况，因为存在 testing 映射。

所以您需要做的是为编译器模块和通用模块创建正确的映射。如果您查看 karma-test-shim of the quickstart 中的示例，您将看到所有可用的不同测试模块。

'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',

Angular 2 一直在我的文件导入末尾添加“/testing”-systemjs

Angular 2 keeps adding "/testing" to the end of my file imports - systemjs

angular

systemjs

angular2-testing