我正在使用Angular（2），typescript，karma和SystemJs构建系统。
应用程序构建完美地将apps / samples / **中的src文件转换为build / **这是构建目录的结构。我运行我的gulp任务构建文件，浏览器同步显示我的应用程序：）
apps/
samples/
app/
app.component.ts
app.module.ts
main.ts
assets/
scss/
js/ //@angular and other node libs get kept here
test/
app.component.spec.ts
index.html
systemjs.config.js
systemjs.config.extras.js
build/
app/
app.component.js
app.component.js.map
app.module.js
app.module.js.map
main.js
main.js.map
assets/
css/
js/ //@angular and other node libs get kept here
test/
app.component.spec.js
app.component.spec.js.map
index.html
systemjs.config.js
systemjs.config.extras.js
Gulpfile.babel.js
karma.conf.js
karma-test-shim.js
package.json
现在如前所述，我对打字稿或构建的任何其他部分没有任何问题，在运行业力时会出现问题，我不断收到如下错误：
Chrome 55.0.2883 (Windows 10 0.0.0) ERROR: 'Unhandled Promise rejection:', '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error loading http://localhost:9876/base/systemjs.config.js', '; Zone:', '<root>', '; Task:', 'Promise.then', '; Value:', Error{stack: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error loading http://localhost:9876/base/systemjs.config.js', message: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error loading http://localhost:9876/base/systemjs.config.js', originalStack: 'Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error loading http://localhost:9876/base/systemjs.config.js', zoneAwareStack: 'Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error loading http://localhost:9876/base/systemjs.config.js', name: 'Error', toString: function toString() { ... }, originalErr: Error{stack: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', message: 'XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', originalStack: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', zoneAwareStack: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js', name: 'Error', toString: function toString() { ... }}}, '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/systemjs.config.js
Error loading http://localhost:9876/base/systemjs.config.js'
现在我一直在使用角度快速启动项目和教程https://www.agvision.ro/angular-2-karma-jasmine-unit-testing/
的组合这是我的karma.config.js
module.exports = function(config) {
var appBase = 'build/app/'; // transpiled app JS and map files
var appSrcBase = 'apps/samples/app//'; // app source TS files
var appAssets = '/build/app/'; // component assets fetched by Angular's compiler
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'testing/'; // transpiled test JS and map files
var testingSrcBase = 'testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{ pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
{ pattern: 'build/systemjs.config.js', included: false, watched: false },
{ pattern: 'build/systemjs.config.extras.js', included: false, watched: false },
'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.js', included: false, watched: true },
// Asset (HTML & CSS) paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{ pattern: appBase + '**/*.html', included: false, watched: true },
{ pattern: appBase + '**/*.css', included: false, watched: true },
// Paths for debugging with source maps in dev tools
{ pattern: appSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: appBase + '**/*.js.map', included: false, watched: false },
{ pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": appAssets
},
exclude: [],
preprocessors: {},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true
})
}
这是我的karma-test-shim.js
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
// builtPaths: root paths for output ("built") files
// get from karma.config.js, then prefix with '/base/' (default is 'app/')
var builtPaths = (__karma__.config.builtPaths || ['app/'])
.map(function (p) {
return '/base/build/' + p;
});
__karma__.loaded = function () {
};
function isJsFile(path) {
return path.slice(-3) == '.js';
}
function isSpecFile(path) {
return /\.spec\.(.*\.)?js$/.test(path);
}
// Is a "built" file if is JavaScript file in one of the "built" folders
function isBuiltFile(path) {
return isJsFile(path) &&
builtPaths.reduce(function (keep, bp) {
return keep || (path.substr(0, bp.length) === bp);
}, false);
}
var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isBuiltFile);
System.config({
baseURL: 'base/',
// Extend usual application package list with test folder
packages: {'testing': {main: 'index.js', defaultExtension: 'js'}},
// Assume npm: is set in `paths` in systemjs.config
// Map the angular testing umd bundles
map: {
'@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',
},
});
System.import('systemjs.config.js').then(function (m) {
console.log(m);
})
//.then(importSystemJsExtras)
.then(initTestBed)
.then(initTesting);
/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras() {
return System.import('systemjs.config.extras.js')
.catch(function (reason) {
console.log(
'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
);
console.log(reason);
});
}
function initTestBed() {
return Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
])
.then(function (providers) {
var coreTesting = providers[0];
var browserTesting = providers[1];
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting());
})
}
// Import all spec files and start karma
function initTesting() {
return Promise.all(
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
})
)
.then(__karma__.start, __karma__.error);
}
现在我得到了错误，并在帖子后发帖后阅读了一些提及karma放入文件的基础/目录，有些人提到了包和模块以及更多但是现在给出了一个明确的答案，为什么业力不会加载系统js
我是一个有角度2的neewb，更喜欢构建结构，所以不会改变那个方面，即使我遗漏了一些非常简单的东西，其他任何东西都会有所帮助。
答案 0 :(得分：0)
尝试更改：
{ pattern: 'build/systemjs.config.js', included: false, watched: false },
{ pattern: 'build/systemjs.config.extras.js', included: false, watched: false }
为：
{ pattern: '/systemjs.config.js', included: false, watched: false },
{ pattern: '/systemjs.config.extras.js', included: false, watched: false }