[英]Lodash killing Karma in SystemJS Angular 2 app
我正在使用Lodash,“npm run start”可用於構建和啟動應用程序。 但是,當我嘗試用“npm run test”運行Karma時,它會在Lodash上窒息。 有任何想法嗎?
這是錯誤:
404: /base/node_modules/lodash/index.js
Chrome 55.0.2.883 (Windows 7) ERROR
{"originalStack": Error: (SystemJS) XHR error (404 Not Found) loading node_modules/lodash/index.js}
正如你在圖片中看到的那樣,lodash不是唯一一個給我這個錯誤的模塊,也就是一個名為Wijmo的模塊,它是一個圖形工具。 這些不是我正在使用的唯一第三方模塊,正如您在下面的systemjs.config.js中看到的那樣,問題是“為什么這些模塊會導致問題,而其他模塊卻沒有?”
我的karma配置的“files”數組中有'node_modules / lodash / lodash.js',如下所述: 將lodash導入angular2 + typescript應用程序
...雖然添加/刪除該行似乎沒有什么區別。
這是完整的karma.conf.js文件,供參考:
module.exports = function(config) {
var appBase = 'app/'; // transpiled app JS and map files
var appSrcBase = 'app/'; // app source TS files
var appAssets = '/base/app/'; // component assets fetched by Angular's compiler
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'), // click "Debug" in browser to see it
require('karma-htmlfile-reporter') // crashing w/ strange socket error
],
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: [
'node_modules/lodash/lodash.js',
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
'node_modules/reflect-metadata/Reflect.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: 'systemjs.config.js', included: false, watched: false },
{ pattern: '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: {},
// disabled HtmlReporter; suddenly crashing w/ strange socket error
reporters: ['progress', 'kjhtml'],//'html'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
在我的systemjs.config.js中,我有以下內容:
(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: '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',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ng2-translate': 'npm:ng2-translate/bundles',
'lodash': 'npm:lodash',
'socket.io-client': 'npm:socket.io-client/socket.io.js',
'mydatepicker': 'npm:mydatepicker',
'wijmo': 'npm:wijmo'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'ng2-translate': {
main: 'ng2-translate',
defaultExtension: 'umd.js'
},
'socket.io-client': {
defaultExtension: 'js'
},
'mydatepicker': {
main: './dist/index.js',
defaultExtension: 'js'
},
lodash: {
main: './index.js',
defaultExtension: 'js'
},
wijmo: {
defaultExtension: 'js'
}
}
});
})(this);
在我的組件中,我正在加載Lodash,如下所示:
import * as _ from "lodash";
如果我嘗試導入它沒有“* as”它會拋出一個錯誤,說lodash沒有任何默認導出。
最后,這是我的package.json中的“test”腳本,當我輸入“npm run test”時調用它:
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
Karma config指向'node_modules / lodash / lodash.js',而SystemJS config指向'node_modules / lodash / index.js'。 我想這可能是因為你試圖引用... / index.js而它是.... / lodash.js。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.