Angular 2一直在添加“ / testing”到我的文件导入的末尾-System.js [英] Angular 2 keeps adding "/testing" to the end of my file imports - systemjs

问题描述

我刚刚开始向我的angular 2应用程序添加单元测试，而我却遇到了噩梦，每次我不得不将以前从未使用过的新内容导入到我的应用程序中时，都会向其中添加 / testing每次导入的结尾：

I've just started to add unit tests to my angular 2 app and I am having a nightmare, every time I have to import something new into my app that I haven't used before, it adds "/testing" to the end of each import:

例如：

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

这让我发疯了，因为我修复了一个错误，然后在我需要导入其他内容时另一个文件导入也发生了同样的事情。

It is driving me nuts because I fix one of that error and then the same thing happens to another file import when I need to import something else.

当前完整错误：

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中：

I've been trying to fix it by adding lines like this to my systmejs.config.js:

'@ angular / core / testing'： npm：@ angular / core / bundles / core-testing.umd.js，每当出现新错误时，有时它就会起作用，有时却不会，但是无论如何都要花很长时间-我的东西有问题吗systemjs.config.js？：

'@angular/core/testing': "npm:@angular/core/bundles/core-testing.umd.js", each time a new error like it arises and it sometimes works and sometimes doesn't but it is taking a long time regardless - is there something wrong with my 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);

推荐答案

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

You need to map the testing packages to the testing files. For instance, look your core module configuration

'@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 文件。现在来看一下编译器模块的配置

Here, @angular/core/testing is mapped to the core-testing.umd.js file. Now look at you compiler module configuration

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

没有相应的测试配置。因此，当文件尝试导入

There's no corresponding testing configuration. So when a file tries to import

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

从可用映射中提取 @ angular / compiler （ compiler.umd.js ），并在最后添加 testing 。核心模块不会发生这种情况，因为存在 testing 映射。

it takes @angular/compiler from the available mapping (compiler.umd.js) and adds the testing at the end. This doesn't happen with the core module, because there is a testing mapping.

所以您需要为编译器模块和公共模块创建正确的映射。如果您在 快速入门中的karma-test-shim ，您会看到所有可用的测试模块。

So what you need to do is create the correct mappings for both the compiler module and the common module. If you look in the example in the karma-test-shim of the quickstart, you'll see all the different testing modules available.

'@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”到我的文件导入的末尾-System.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！