0
只有當我嘗試運行我的茉莉花測試時纔會出現此錯誤。我使用spec runner html文件運行它們。導入Angular 2測試類ComponentFixture＆TestBed導致404錯誤
zone.js:1382 GET http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing 404 (Not Found)
zone.js:232 Error: (SystemJS) XHR error (404 Not Found)
如果我只是運行我的應用程序，它工作正常。我想要運行的進口角2測試模塊
我的spec文件：
import { ComponentFixture, TestBed } from '@angular/core/testing';而這是什麼原因造成的錯誤。
不過該行正是在angular 2 testing documentation
我systemjs.config.js也是完全一樣的人在 angular 2 documentation。
的問題是，角測試模塊是@angular/core所以這行的systemjs.config.js應注意的是：
map: {
// our app is within the app folder
app: 'js/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
然而這是@angular內node_modules的文件結構，我也點擊了「 index.js」告訴你，那就是將文件導出，我想在spec測試中使用的類：
但b rowser表明，它在導入過程中尋找這樣的：
zone.js:1382 GET http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing 404 (Not Found)
顯然不可能有core.umd.js文件中的文件或文件夾，所以很容易地看到，這是錯誤的。
我想我可能希望它在尋找這樣的：
http://localhost:3002/node_modules/@angular/core/testing/index.js
那麼，如何利用它做些什麼？在systemjs.config.js當然，我會對這一行做些什麼？
map: {
// our app is within the app folder
app: 'js/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
或者添加另一個映射後專門爲@angular/core內的測試模塊？
我已經試過這樣：
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/testing/index.js',
，我也嘗試過這個（看底部包）：
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'
},
'@angular/core/testing': {
main:'npm:@angular/core/testing/index.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/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/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",
},
// 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'
},
'@angular/core/testing': {
main:'npm:@angular/core/testing/index.js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
我的茉莉花規格亞軍HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Vepo Unit Tests</title>
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<!-- #1. add the system.js and angular libraries -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
Promise.all([
System.import('js/app/landing-page/landing-page.component.spec.js'),
System.import('js/app/pipes/my-uppercase.pipe.spec.js'),
System.import('js/app/landing-page/subcomponents/middle-row.component.spec.js')
]).then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
我的規格文件：
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { MiddleRowComponent } from './middle-row.component';
let comp: MiddleRowComponent;
let fixture: ComponentFixture<MiddleRowComponent>;
let de: DebugElement;
let el: HTMLElement;
describe('MiddleRowComponent',() => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [MiddleRowComponent], // declare the test component
});
fixture = TestBed.createComponent(MiddleRowComponent);
comp = fixture.componentInstance; // MiddleRowComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
it('should display original title',() => {
fixture.detectChanges();
expect(el.textContent).toContain(comp.word);
});
it('should display a different test title',() => {
comp.word = 'Test Title';
fixture.detectChanges();
expect(el.textContent).toContain('Test Title');
});
});