我在使用Angular2工作时遇到了麻烦 . 我的项目结构如下所示：
// Typescript sourcefiles：
/脚本
//透明文件
/ wwwroot文件/应用
//我将使用过的node_modules复制到
/ wwwroot的/ LIB / node_modules
//我的systemjs.config.js在
/ wwwroot文件
(function(global)
var libFolder = 'lib/';
var nodeModulesFolder = libFolder + 'node_modules/';
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
// Vendor
'rxjs': nodeModulesFolder + 'rxjs',
'zone': nodeModulesFolder + 'zone',
'jquery' : nodeModulesFolder + 'jquery/dist',
'select2' : nodeModulesFolder + 'select2/dist/js',
'nanobar' : nodeModulesFolder + 'nanobar',
'qtip2' : nodeModulesFolder + 'qtip2/dist',
'timeago' : nodeModulesFolder + 'timeago/dist',
'highcarts' : nodeModulesFolder + 'highcharts',
'highcarts-more' : nodeModulesFolder + 'highcharts',
'chart' : nodeModulesFolder + 'chart',
'solid-gauge' : nodeModulesFolder + 'highcharts/modules/',
'bootstrap-tour' : nodeModulesFolder + 'bootstrap-tour/build/js',
'password-analyzer' : nodeModulesFolder + 'custom',
'moment' : nodeModulesFolder + 'moment',
'nl': nodeModulesFolder + 'moment/locale',
'ng2-charts': nodeModulesFolder + 'ng2-charts/components/charts'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', format: 'register', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zone': { main: 'zone.js', defaultExtension: 'js' },
'jquery': {
main: 'jquery.min.js',
defaultExtension: 'js'
},
'select2': {
main: 'select2.full.min.js',
defaultExtension: 'js'
},
'nanobar': {
main: 'nanobar.full.min.js',
defaultExtension: 'js'
},
'qtip2': {
main: 'jquery.qtip.min.js',
defaultExtension: 'js'
},
'proigia_encryptie': {
defaultExtension: 'js'
},
'timeago': {
main: 'jquery.timeago.js',
defaultExtension: 'js'
},
'highcharts': {
main: 'highcharts.src.js',
defaultExtension: 'js'
},
'highcharts-more': {
main: 'highcharts-more.src.js',
defaultExtension: 'js'
},
'chart': {
main: 'Chart.min.js',
defaultExtension: 'js'
},
'solid-gauge': {
main: 'solid-gauge.src.js',
defaultExtension: 'js'
},
'bootstrap-tour': {
main: 'bootstrap-tour-standalone.js',
defaultExtension: 'js'
},
'password-analyzer': {
main: 'password-analyzer.js',
defaultExtension: 'js'
},
'moment' : {
main: 'moment.js',
defaultExtension: 'js'
},
'nl' : {
main: 'nl.js',
defaultExtension: 'js'
},
'ng2-charts': {
main: 'charts.js',
defaultExtension: 'js'
}
};
var npmPackages = [
'@angular',
'rxjs'
];
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
npmPackages.forEach(function (pkgName) {
map[pkgName] = nodeModulesFolder + pkgName;
});
ngPackageNames.forEach(function(pkgName) {
var main = global.ENV === 'testing' ? 'index.js' :
'bundles/' + pkgName + '.umd.js';
packages['@angular/'+pkgName] = { main: main, defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);}
我的karma.conf.js和karma-test-shim.js看起来像：
// #docregion
module.exports = function(config) {
var appBase = 'app/'; // transpiled app JS and map files
var appSrcBase = 'scripts/'; // app source TS files
var appAssets = '/base/app/'; // component assets fetched by Angular's compiler
var dependencies = [
'@angular',
'rxjs'
];
var configuration = {
basePath: 'wwwroot',
frameworks: [
'jasmine'
],
plugins: [
require('karma-jasmine'),
require('karma-coverage'),
require('karma-remap-istanbul'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-htmlfile-reporter')
],
browsers: ['Chrome'],
reporters: ['progress', 'kjhtml', 'coverage', 'karma-remap-istanbul'],
preprocessors: {
//'app/**/!(*spec).js': ['coverage']
},
// Generate json used for remap-istanbul
coverageReporter: {
reporters: [{
type: 'json',
subdir: '.',
file: 'coverage-final.json'
}]
},
remapIstanbulReporter: {
src: 'coverage/coverage-final.json',
reports: {
html: 'coverage'
},
timeoutNotCreated: 5000
},
htmlReporter: {
// Open this file to see results in browser
outputFile: '_test-output/tests.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: __dirname
},
files: [
// System.js for module loading
{pattern: 'lib/system.src.js', included: true, watched: true},
// Polyfills
{pattern: 'lib/shim.min.js', included: true, watched: true},
{pattern: 'lib/Reflect.js', included: true, watched: true},
// zone.js
{pattern: 'lib/node_modules/zone/zone.js', included: true, watched: true},
{pattern: 'lib/node_modules/zone/long-stack-trace-zone.js', included: true, watched: true},
{pattern: 'lib/node_modules/zone/proxy.js', included: true, watched: true},
{pattern: 'lib/node_modules/zone/sync-test.js', included: true, watched: true},
{pattern: 'lib/node_modules/zone/jasmine-patch.js', included: true, watched: true},
{pattern: 'lib/node_modules/zone/async-test.js', included: true, watched: true},
{pattern: 'lib/node_modules/zone/fake-async-test.js', included: true, watched: true},
{pattern: 'lib/**/*.js', included: false, watched: false},
{pattern: 'systemjs.config.js', included: false, watched: false},
'../karma-test-shim.js',
// transpiled application & spec code paths loaded via module imports
{pattern: 'app/**/*.js', included: false, watched: true},
{pattern: 'content/**/*.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}
],
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": "/base/app/",
"/lib/node_modules/" : "/base/lib/node_modules/"
},
exclude: [],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false
};
dependencies.forEach(function(key) {
configuration.files.push({
pattern: 'lib/node_modules/' + key + '/**/*.js',
included: false,
watched: false
});
});
config.set(configuration);
};
卡玛 - 测试shim.js
// #docregion
// /*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;
var builtPath = '/base/app/';
__karma__.loaded = function () { };
function isJsFile(path) {
return path.slice(-3) == '.js';
}
function isSpecFile(path) {
return /\.spec\.(.*\.)?js$/.test(path);
}
function isBuiltFile(path) {
return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}
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' } },
map: {
'@angular/core/testing': 'lib/node_modules/@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'lib/node_modules/@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'lib/node_modules/@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'lib/node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'lib/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'lib/node_modules/@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'lib/node_modules/@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'lib/node_modules/@angular/forms/bundles/forms.umd.js'
}
});
System.import('systemjs.config.js')
// .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);
}
我有一个非常简单的.spec.file文件名为1st.spec.ts，其中包含：
describe('Testing math', () => {
it('multiplying should work', () => {
expect(4 * 4).toEqual(16);
});
});
我跑的时候
业力开始karma.conf.js
它开始了，但我明白了：
有谁知道我怎么解决这个问题？我已经尝试了几天，但似乎无法找到解决方案 .
非常感谢您的帮助！