在角2 SystemJS和噶负载点模块 [英] Load node module with SystemJS and Karma in Angular 2
问题描述
我建立使用角2，SystemJS和噶测试一个web应用程序。
我试图加载节点舱 NGRX /存储在测试：
进口{
它描述，期望，beforeEach，注入
}从angular2 /测试';从@ NGRX /存储进口{存储};描述（图表店'，（）=＆GT; {
让图; beforeEach（注（[存储]，（存储：存储＆LT;＆任何GT）=＆GT; {
图表= store.select（'图形'）;
}））; 它（'作品'，（）=＆GT; {
//期望图表做某事
}）;
}）;
不过，我的测试中失败，出现以下消息：
404 / @ NGRX /存储
铬48.0.2564（Mac OS X的10.11.3）错误
错误：XHR错误（404未找到）装载的http：//本地主机：9876 / @ NGRX /存储
其实我有在开发同样的问题，以及，事实证明SystemJS不知道在哪里可以找到 @ NGRX /存储。为了解决这个问题，我这样做：
System.config（{
包：{
SRC：{
格式为：注册，
defaultExtension：'JS'
}
}，
图：{'@ NGRX /存储'：'node_modules/@ngrx/store/dist/store.js'} //＆LT; - 这
}）;
我修改了噶垫片文件做同样的。一旦运行测试的第二次，我现在得到一个不同的错误：
404：/node_modules/@ngrx/store/dist/store.js
铬48.0.2564（Mac OS X的10.11.3）错误
错误：XHR错误（404未找到）装载的http：//本地主机：9876/node_modules/@ngrx/store/dist/store.js
这意味着它必须服用我给它考虑了明确的路径，但它仍然无法找到该模块。它是对模块的正确路径，然而，在浏览器中加载时的工作原理。
我是pretty失去了对下一步该怎么做。有人能指出我朝着正确的方向吗？
有几件事情需要注意：
- 添加节点模块噶的
文件阵列是不是一种选择，因为它的依赖需要与SystemJS解决 - 这仅与其中SystemJS需要在它们位于何处定制指令节点模块发生。我可以加载其他模块只是在我的测试中没有细提供了一个特定的位置，只要SystemJS是能够找到它
下面是我的噶配置：
//设置的帮助下
// http://twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/module.exports =功能（配置）{
config.set（{ 基本路径：，。 框架：['茉莉']， 文件：
//由噶加载路径
{模式：node_modules / angular2 /包/ angular2-polyfills.js，包括：真实，观看视频：真}，
{模式：node_modules / systemjs /距离/ system.src.js'，包括：真实，观看视频：真}，
{模式：node_modules / rxjs /包/ Rx.js'，包括：真实，观看视频：真}，
{模式：node_modules / angular2 /包/ angular2.dev.js'，包括：真实，观看视频：真}，
{模式：node_modules / angular2 /包/ testing.dev.js'，包括：真实，观看视频：真}，
{模式：业力试验shim.js，包括：真实，观看视频：真}， //通过模块加载进口路径
{模式：'SRC / ** / * JS'，包括：假的，看：真}， //路径支持调试与开发工具的源地图
{模式：'SRC / ** / * TS'，包括：假的，看：假}，
{模式：'SRC / ** / * js.map'，包括：假的，看了：假}
] //代理基路径
代理：{
//需要通过角的编译器获取的成分资产
/ src目录/'：'/基/ src目录/'
}， 端口：9876， LOGLEVEL：config.LOG_INFO， 颜色：真， autoWatch：真实， 浏览器：['铬']， //噶插件加载
插件：
卡玛 - 茉莉花，
果报报道，
因果报应 - 铬 - 发射
] // //覆盖率记者生成覆盖率
//记者：'进步'，'点'，'覆盖']，
//
你想生成覆盖// //源文件。
// //不包括测试或库（这些文件将在伊斯坦布尔进行检测）
// preprocessors：{
//'的src / ** /（*规格）.js文件！'：['覆盖']
//}， // coverageReporter：{
//记者：
// {类型：'JSON'，子目录：''，文件：覆盖率final.json'}
//]
//}， singleRun：真
}）
};
这是我的噶垫片：
在错误帮助调试 //敦全堆栈跟踪
Error.stackTraceLimit =无限;jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;// //取消噶的同步启动，
// //我们称之为'__karma __。开始（）`后，一旦所有的规格被加载。
。__karma __加载=功能（）{};System.config（{
包：{
基地/ src目录：{
defaultExtension：'JS'，
格式为：注册，
图：Object.keys（窗口.__人缘__文件）.filter（onlyAppFiles）。降低（createPathRecords，{}）
}
}，
//这使得它在浏览器中运行，而不是在我的测试中！
路径：{'@ NGRX /存储'：'node_modules/@ngrx/store/dist/store.js'}
}）;System.import（'angular2 / src目录/平台/浏览器/ browser_adapter'）
。然后（功能（browser_adapter）{browser_adapter.BrowserDomAdapter.makeCurrent（）;}）
。然后（函数（）{返回Promise.all（resolveTestFiles（））;}）
。然后（函数（）{__karma __开始（）;}，功能（错误）{__karma __错误（error.stack ||错误）;}）;功能createPathRecords（pathsMapping，APPPATH）{
//创建与路径因果报应的指纹，例如本地模块名称映射到全局路径：
//'./vg-player/vg-player：
//'/base/src/vg-player/vg-player.js?f4523daf879cfb7310ef6242682ccf10b2041b3e
VAR pathParts = appPath.split（'/'）;
。VAR模块名=./+ pathParts.slice（Math.max（pathParts.length - 2，1））加入（'/'）;
MODULENAME = moduleName.replace（/ \\ $ JS /，''）;
pathsMapping [模块名] = APPPATH +'？ +窗口.__人缘__文件[APPPATH]。
返回pathsMapping;
}功能onlyAppFiles（文件路径）{
返回/\\/base\\/src\\/(?!.*\\.spec\\.js$).*\\.js$/.test(filePath）;
}功能onlySpecFiles（路径）{
返回/\\.spec\\.js$/.test(path）;
}功能resolveTestFiles（）{
返回Object.keys（窗口.__因缘__。文件）//由噶供应的所有文件。
.filter（onlySpecFiles）
.MAP（功能（MODULENAME）{
//通过其全球的模块名称加载所有规格的文件（例如，
//'基地/ src目录/ VG-播放器/ VG-player.spec'）
返回System.import（MODULENAME）;
}）;
}
更新
有一个例子库的错误这里。你可以看到，导致错误<一个具体变化href=\"https://github.com/dchacke/karma-angular2-error-reproduction/commit/8894ac5c275fb7bd021dd35878c1165a15278970\"相对=nofollow>此处。运行 $ NPM安装和 $ NPM测试来得到错误。
包括 @ NGRX /存储与捆绑的其余部分，将解决404错误
//在karma.conf.js测试
文件：
//由噶加载路径
{模式：node_modules/@ngrx/store/dist/store.js，包括：真实，观看视频：真}，
]
但是，与被编译成系统模块捆的其余部分， @ NGRX /存储被编译为模块CommonJS的
//'node_modules / angular2 /包/ angular2.dev.js
格式化注册;
System.register（angular2 / src目录/门面/郎，[]，真实，功能（需，出口，模块）{
....//'node_modules / rxjs /包/ Rx.js
格式化注册;
System.register（rxjs / UTIL /根，[]，真实，功能（需，出口，模块）{
....//'node_modules/@ngrx/store/dist/store.js~~V
....
VAR Observable_1 =要求（'rxjs /可观察到的'）;
....
这会导致一个错误：
未捕获的ReferenceError：要求没有定义
// {与模式：〜/ store.js'，indluded：真正}
// context.html包括
＆LT;脚本类型=文/ JavaScript的 src=\"/base/node_modules/@ngrx/store/dist/store.js?fb5e807149603c3c2f998c98faf6826c7e301d71\"></script>这就是为什么你不应该包括它：
{模式：node_modules/@ngrx/store/dist/store.js，包括：假的，看：真}这基本上都会列出它在
办理窗口.__因缘__。文件对象，但不会将其添加为因果报应的context.html <脚本/ code> - 浏览器将不会加载并运行code导致错误。装载应SystemJS ...如果您用
因果报应测试singleRun：假您可以检查在Chrome的Devtools文件>网络。你会看到那里的加载文件列表，这就是拼图的最后一块是：在你的
卡玛测试shim.js变更System.config.map来：图：{'@ NGRX /存储'：'/base/node_modules/@ngrx/store/dist/store.js'}
执行的4成功的4（0.037秒/ 0.008秒）
I'm building a web app using Angular 2, SystemJS, and Karma for tests.
I'm trying to load the node module ngrx/store in a test:
import { it, describe, expect, beforeEach, inject } from 'angular2/testing'; import { Store } from '@ngrx/store'; describe('Graphs store', () => { let graphs; beforeEach(inject([Store], (store: Store<any>) => { graphs = store.select('graphs'); })); it('works', () => { // expect graphs to do something... }); });However, my tests fail with the following message:
404: /@ngrx/store Chrome 48.0.2564 (Mac OS X 10.11.3) ERROR Error: XHR error (404 Not Found) loading http://localhost:9876/@ngrx/storeI actually had the same problem in dev as well, and it turns out SystemJS did not know where to find
@ngrx/store. To solve this, I did this:System.config({ packages: { src: { format: 'register', defaultExtension: 'js' } }, map: { '@ngrx/store' : 'node_modules/@ngrx/store/dist/store.js' } // <-- this });I modified my Karma shim file to do the same. Upon the running the tests a second time, I now get a different error:
404: /node_modules/@ngrx/store/dist/store.js Chrome 48.0.2564 (Mac OS X 10.11.3) ERROR Error: XHR error (404 Not Found) loading http://localhost:9876/node_modules/@ngrx/store/dist/store.jsThis means it must be taking the explicit path I gave it into account, but it still cannot find the module. It is the correct path to the module, however, and works when loaded in a browser.
I'm pretty lost on what to do next. Can someone point me in the right direction?
A few things to note:
- Adding the node module to Karma's
filesarray is not an option, since its dependencies need to be resolved with SystemJS- This only happens with node modules for which SystemJS needs custom instructions on where they are located. I can load other modules just fine in my tests without providing a specific location as long SystemJS is able to find it
Here is my Karma configuration:
// Set up with the help of // http://twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/ module.exports = function(config) { config.set({ basePath: '.', frameworks: ['jasmine'], files: [ // paths loaded by Karma {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true}, {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true}, {pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true}, {pattern: 'node_modules/angular2/bundles/angular2.dev.js', included: true, watched: true}, {pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true}, {pattern: 'karma-test-shim.js', included: true, watched: true}, // paths loaded via module imports {pattern: 'src/**/*.js', included: false, watched: true}, // paths to support debugging with source maps in dev tools {pattern: 'src/**/*.ts', included: false, watched: false}, {pattern: 'src/**/*.js.map', included: false, watched: false} ], // proxied base paths proxies: { // required for component assets fetched by Angular's compiler '/src/': '/base/src/' }, port: 9876, logLevel: config.LOG_INFO, colors: true, autoWatch: true, browsers: ['Chrome'], // Karma plugins loaded plugins: [ 'karma-jasmine', 'karma-coverage', 'karma-chrome-launcher' ], // // Coverage reporter generates the coverage // reporters: ['progress', 'dots', 'coverage'], // // // Source files that you wanna generate coverage for. // // Do not include tests or libraries (these files will be instrumented by Istanbul) // preprocessors: { // 'src/**/!(*spec).js': ['coverage'] // }, // coverageReporter: { // reporters:[ // {type: 'json', subdir: '.', file: 'coverage-final.json'} // ] // }, singleRun: true }) };And here is my Karma shim:
// Tun on full stack traces in errors to help debugging Error.stackTraceLimit = Infinity; jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; // // Cancel Karma's synchronous start, // // we will call `__karma__.start()` later, once all the specs are loaded. __karma__.loaded = function() {}; System.config({ packages: { 'base/src': { defaultExtension: 'js', format: 'register', map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {}) } }, // This makes it work in the browser, but not in my tests! paths: { '@ngrx/store' : 'node_modules/@ngrx/store/dist/store.js' } }); System.import('angular2/src/platform/browser/browser_adapter') .then(function(browser_adapter) { browser_adapter.BrowserDomAdapter.makeCurrent(); }) .then(function() { return Promise.all(resolveTestFiles()); }) .then(function() { __karma__.start(); }, function(error) { __karma__.error(error.stack || error); }); function createPathRecords(pathsMapping, appPath) { // creates local module name mapping to global path with karma's fingerprint in path, e.g.: // './vg-player/vg-player': // '/base/src/vg-player/vg-player.js?f4523daf879cfb7310ef6242682ccf10b2041b3e' var pathParts = appPath.split('/'); var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/'); moduleName = moduleName.replace(/\.js$/, ''); pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]; return pathsMapping; } function onlyAppFiles(filePath) { return /\/base\/src\/(?!.*\.spec\.js$).*\.js$/.test(filePath); } function onlySpecFiles(path) { return /\.spec\.js$/.test(path); } function resolveTestFiles() { return Object.keys(window.__karma__.files) // All files served by Karma. .filter(onlySpecFiles) .map(function(moduleName) { // loads all spec files via their global module names (e.g. // 'base/src/vg-player/vg-player.spec') return System.import(moduleName); }); }
Update
There is an example repository with the error here. You can see the specific changes that cause the error here. Run
$ npm installand$ npm testto get the error.解决方案Including
@ngrx/storewith the rest of your bundles, would resolve 404 error// for testing in karma.conf.js files: [ // paths loaded by Karma {pattern: 'node_modules/@ngrx/store/dist/store.js', included: true, watched: true}, ],But unlike the rest of the bundles that are compiled as System modules,
@ngrx/storeis compiled as commonjs module// 'node_modules/angular2/bundles/angular2.dev.js' "format register"; System.register("angular2/src/facade/lang", [], true, function(require, exports, module) { .... // 'node_modules/rxjs/bundles/Rx.js' "format register"; System.register("rxjs/util/root", [], true, function(require, exports, module) { .... // 'node_modules/@ngrx/store/dist/store.js' .... var Observable_1 = require('rxjs/Observable'); ....which causes an error:
Uncaught ReferenceError: require is not defined
// with {pattern: '~/store.js', indluded: true} // context.html includes <script type="text/javascript" src="/base/node_modules/@ngrx/store/dist/store.js?fb5e807149603c3c2f998c98faf6826c7e301d71"></script>That's why you shouldn't include it:
{pattern: 'node_modules/@ngrx/store/dist/store.js', included: false, watched: true}This will basically list it in
window.__karma__.filesobject, but won't add it as a script in karma'scontext.html- browser won't load and run the code that causes the error. Loading should be handled by SystemJS...If you run karma tests with
singleRun: falseyou can inspect files in Chrome's Devtools > Network. You'll see there a list of loaded files and that's where the last piece of the puzzle is:In your
karma-test-shim.jschangeSystem.config.mapto:map: { '@ngrx/store' : '/base/node_modules/@ngrx/store/dist/store.js' }
Executed 4 of 4 SUCCESS (0.037 secs / 0.008 secs)
这篇关于在角2 SystemJS和噶负载点模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
