I get this error only when I try to run my jasmine tests. I run them with a spec runner html file.
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)
If I just run my app, it works fine.
My spec file that I'm trying to run imports angular 2 testing modules:
import { ComponentFixture, TestBed } from '@angular/core/testing'; and that's what is causing the error.
However that line is exactly what is in the angular 2 testing documentation
My systemjs.config.js is also exactly the same as the one in the
angular 2 documentation.
The issue is that the angular testing module is in @angular/core so this line of systemjs.config.js should take care of that:
map: {
// our app is within the app folder
app: 'js/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
However this is the file structure of @angular inside node_modules and I have also clicked on "index.js" to show you that that is the file exporting the classes that I want to use in the spec test:
But the browser shows that it's looking for this during the import:
zone.js:1382 GET http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing 404 (Not Found)
Obviously there can't be a file or folder inside core.umd.js file, so it's easy to see that that is wrong.
I think I probably want it to be looking for this:
http://localhost:3002/node_modules/@angular/core/testing/index.js
So how do I make it do that? In systemjs.config.js surely, I will be doing something to this line?
map: {
// our app is within the app folder
app: 'js/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
Or adding another mapping after it specifically for the testing modules which are inside @angular/core?
I've tried this:
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',
and I have also tried this (look at the bottom package):
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'
},
But both didn't work/cause other issues.
What do I do to fix this error?
My systemjs.config.js file:
/**
* 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);
my jasmine spec runner html file:
<!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>
my spec file:
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');
});
});
