简体   繁体   English

在使用Angular2 beta和SystemJS的Karma单元测试中加载angular2-polyfilles.js时出现_setAsap错误

[英]_setAsap error when loading angular2-polyfilles.js in Karma unit test with Angular2 beta and SystemJS

When running Karma unit test, I am getting the following error: 运行业力单元测试时,出现以下错误:

Chrome 47.0.2526 (Linux 0.0.0) ERROR Chrome 47.0.2526(Linux 0.0.0)错误
Uncaught TypeError: Cannot read property '_setAsap' of undefined 未捕获的TypeError:无法读取未定义的属性'_setAsap'
Evaluating path/node_modules/angular2/bundles/angular2-polyfills.min.js 评估path / node_modules / angular2 / bundles / angular2-polyfills.min.js
Error loading path/node_modules/angular2/bundles/angular2-polyfills.min.js 加载路径/node_modules/angular2/bundles/angular2-polyfills.min.js时出错

The karma.conf.js contains something like: karma.conf.js包含以下内容:

// Karma configuration
// Generated on Tue Dec 08 2015 14:19:08 GMT-0600 (CST)
module.exports = function(config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '../',
        files: [
            'node_modules/angular2/bundles/angular2-polyfills.min.js',
            'node_modules/es6-shim/es6-shim.js',
            'node_modules/systemjs/dist/system.js',
            'node_modules/rxjs//Rx.js',
            'node_modules/angular2/bundles/angular2.min.js',
            'dist/components/uploader.js',
            'dist/components/uploader.spec.js'
        ],
        ...

The uploader.js is a compiled JavaScript file from TypeScript and is an Angular2 component. uploader.js是TypeScript编译的JavaScript文件,是Angular2组件。 Uploader.spec.js is the unit test. Uploader.spec.js是单元测试。 I use Karma, SystemJS and Angular2 beta to try to set up the unit test. 我使用Karma,SystemJS和Angular2 beta来尝试设置单元测试。

When looking into _angular2_polyfills.js_, the _setAsap seems to point to module es6-promise . 当查看_angular2_polyfills.js_时, _setAsap似乎指向模块es6-promise However, even I have node_modules/es6-promise/dist/es6-promise.js added into the file list, it does not work. 但是,即使我将node_modules/es6-promise/dist/es6-promise.js添加到文件列表中,也无法正常工作。

So, I had similar issues, and I had to add this to my system.conf.js file: 因此,我遇到了类似的问题,必须将其添加到我的system.conf.js文件中:

System.config({
    paths: {
        'agular2-polyfills': 'node_modules/angular2/bundles/angular2-polyfills.js',
        'typescript': 'node_modules/typescript/lib/typescript.js',
        'systemjs': 'node_modules/systemjs/dist/system.js',
        'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js',
        'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js'
    },
    map: {
        angular2: 'node_modules/angular2',
        rxjs: 'node_modules/rxjs',
        crypto: '@empty'// this fixed my last issue
    },
    meta: {
        'path/to/components/*': {
            format: 'register'
        }
    }
});

If I remember correctly (I don't claim to be a systemjs ninja ) after looking through several stack questions and reading the config docs , I came to this solution, but I don't remember the reason for some of it other than it having to do with having to load everything using karma. 如果我在浏览了几个堆栈问题并阅读了config文档后没记错的话(我不声称自己是systemjs ninja ),那么我来到了这个解决方案,但是我不记得它的某些原因,除了它具有与必须使用业力加载所有内容有关。

My karma.conf files array: 我的karma.conf文件数组:

// list of files / patterns to load in the browser
    files: [
      'node_modules/reflect-metadata/Reflect.js',
      '*.spec.js',
      '**/*.spec.js',
      '**/**/*.spec.js'
    ]

and the karma.conf systemjs config: 和karma.conf systemjs配置:

systemjs: {
    // Path to your SystemJS configuration file 
    configFile: 'system.conf.js',

    // Patterns for files that you want Karma to make available, but not loaded until a module requests them. eg. Third-party libraries. 
    serveFiles: [
        'client/**/*.js',
        'server/**/*.js',
    ],

    // SystemJS configuration specifically for tests, added after your config file. 
    // Good for adding test libraries and mock modules 
    config: {
        transpiler: null,
        defaultJSExtensions: true
    },

    meta: {
        'angular2/angular2':{
            format: 'register'
        }
    }
},

IMPORTANT NOTE This may not be the best way, or even close, but this is how I got it working. 重要说明这可能不是最好的方法,甚至不是最好的方法,但这就是我的工作方式。 I have not yet gone through my refactor phase on this part of my project, as I'll do that after I'm done with the first phase of my project. 我尚未在项目的这一部分进行重构阶段,因为在完成项目的第一阶段之后 ,我将进行此操作。

Good luck! 祝好运!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM