Lodash 在 SystemJS 中杀死 Karma Angular 2 个应用程序
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}
Here's a link to a PICTURE of the actual error (I can't embed images yet)
正如您在图片中看到的，lodash 并不是唯一给我这个错误的模块，还有一个名为 Wijmo 的模块，它是一个图形实用程序。这些不是我使用的唯一第 3 方模块，正如您在下面的 systemjs.config.js 中看到的，所以问题是 "why are these causing problems while the others are not?"
我的业力配置的 "files" 数组中有 'node_modules/lodash/lodash.js'，如下所述：
...虽然 adding/removing 那一行似乎没有什么不同。
这里是完整的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 配置指向 'node_modules/lodash/lodash.js' 而 SystemJS 配置指向 'node_modules/lodash/index.js'。我认为这可能是因为您正在尝试引用 .../index.js 而它是 ..../lodash.js.
我正在使用 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}
Here's a link to a PICTURE of the actual error (I can't embed images yet)
正如您在图片中看到的，lodash 并不是唯一给我这个错误的模块，还有一个名为 Wijmo 的模块，它是一个图形实用程序。这些不是我使用的唯一第 3 方模块，正如您在下面的 systemjs.config.js 中看到的，所以问题是 "why are these causing problems while the others are not?"
我的业力配置的 "files" 数组中有 'node_modules/lodash/lodash.js'，如下所述：
...虽然 adding/removing 那一行似乎没有什么不同。
这里是完整的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 配置指向 'node_modules/lodash/lodash.js' 而 SystemJS 配置指向 'node_modules/lodash/index.js'。我认为这可能是因为您正在尝试引用 .../index.js 而它是 ..../lodash.js.