2016-11-20 31 views
1

我剛開始的單元測試添加到我的角2的應用程序,我有一個噩夢,我每次都導入新的東西進入我的應用程序,我以前沒有使用過,它添加「/測試」每個導入的末尾:角2不斷添加「/測試」我的文件導入的結束 - systemjs

如:

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); 

回答

2

什麼不對您需要映射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` 

需要@angular/compiler從可用映射(compiler.umd.js),並增加了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',