karma-systemjs
karma-systemjs copied to clipboard
Published
20 hours ago •
rolaveric
rolaveric
404 Errors from jspm packages
My karma.conf.js file reads:
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['systemjs', 'jasmine'],
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-systemjs'
],
systemjs: {
configFile: 'jspm.config.js',
config: {
defaultJSExtensions: true,
packages: {
'test/unit': {
defaultExtension: 'ts'
},
'app': {
defaultExtension: 'ts'
}
},
transpiler: 'typescript',
},
loadFiles: [
'test/unit/app.spec.ts'
],
serveFiles: [
'app/**/*.ts',
'app/**/!(*.spec).ts'
],
testFileSuffix: '.spec.ts'
},
proxies: {
'/jspm_packages/': '/base/jspm_packages/'
},
client: {
captureConsole: true
},
files: [
'test/unit/app.spec.ts'
],
preprocessors: {},
exclude: [],
captureTimeout: 60000,
logLevel: config.LOG_INFO,
colors: true,
port: 9876,
singleRun: false,
reporters: ['progress', 'dots']
});
};
My file structure looks like:
.
+-- app
| +-- app.ts
+-- jspm_packages
+-- node_modules
+-- jspm.config.js
+-- package.json
+-- test
| +-- unit
| | +-- app.spec.ts
My app.ts looks like:
import * as angular from 'angular';
import StorageServiceProvider
from './storage-service-provider.ts';
module ngPersist {
export const name = 'ngPersist';
angular
.module(name, ['ngCookies']);
angular.element(document).ready(() => {
angular.bootstrap(document.body, [ngPersist.name], {
strictDi: true
});
});
}
export default ngPersist;
And my app.spec.ts looks like:
import App from 'app/app';
// import 'angular-mocks';
console.log(App);
describe('Test', () =>
// beforeEach(module('ngPersist'));
it('should work.', () => {
return expect(1).toBe(1);
}
)
);
And my jspm configuration looks like:
System.config({
defaultJSExtensions: true,
transpiler: "typescript",
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"systemjs": "jspm_packages/system.js",
"system-polyfills": "jspm_packages/system-polyfills.js",
"typescript": "node_modules/typescript/lib/typescript.js",
"es6-module-loader": "node_modules/es6-module-loader/dist/es6-module-loader.js"
},
buildCSS: false,
packages: {
"app": {
"main": "app/app",
"defaultExtension": "ts"
},
"test": {
"main": "test/unit/app.spec",
"defaultExtension": "ts"
}
},
map: {
"angular": "github:angular/[email protected]",
"angular-mocks": "github:angular/[email protected]",
"clean-css": "npm:[email protected]",
"es6-module-loader": "npm:[email protected]",
"typescript": "npm:[email protected]",
"github:angular/[email protected]": {
"angular": "github:angular/[email protected]"
},
"github:jspm/[email protected]": {
"assert": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"buffer": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"events": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"Base64": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"stream": "github:jspm/[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"github:jspm/[email protected]": {
"https-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"os-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"path-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"process": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"stream-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"url": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"module": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"base64-js": "npm:[email protected]",
"child_process": "github:jspm/[email protected]",
"fs": "github:jspm/[email protected]",
"ieee754": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"commander": "npm:[email protected]",
"fs": "github:jspm/[email protected]",
"http": "github:jspm/[email protected]",
"https": "github:jspm/[email protected]",
"os": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"source-map": "npm:[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"child_process": "github:jspm/[email protected]",
"events": "github:jspm/[email protected]",
"fs": "github:jspm/[email protected]",
"graceful-readlink": "npm:[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]",
"util": "github:jspm/[email protected]",
"when": "npm:[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"http": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"os": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"core-util-is": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]",
"stream-browserify": "npm:[email protected]",
"string_decoder": "npm:[email protected]"
},
"npm:[email protected]": {
"amdefine": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"readable-stream": "npm:[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]",
"punycode": "npm:[email protected]",
"querystring": "npm:[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"inherits": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
}
}
});
I have tried a few different things and have tried following the documentation but every time I run the karma server (through gulp) I get the following error:
Error: XHR error (404 Not Found) loading
[... redacted]/jspm_packages/github/angular/[email protected]
Error loading [... redacted]/jspm_packages/github/angular/[email protected] as "angular" from [... redacted]/app/app.ts
Any ideas on what might be going wrong? Your help is much appreciated. @rolaveric
Update: It works if I take out import 'angular' from app.ts and install angular through bower and add "bower_components/angular/angular.js" to my files array in karma.conf.js but this defeats the purpose of loading everything through jspm for me.
@g2graman @rolaveric Any progress/update on this issue? I'm running into the same issue as I setup Karma-systemjs. Thought I'd ask here in case this is a solved issue.
@tommysander Sorry but the trick I mentioned just before your comment was the only thing I've noticed to work and haven't tried it since.
@g2graman Thanks for the reply. I'll post here if I find an alternative solution for this.