本文介绍了业力无法加载导入的文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我已经苦苦挣扎了几天,因为我无法对Karma进行任何真正的测试.我可以运行不需要导入的测试(例如基本的健全性测试),但是一旦我不得不从我的应用程序中导入某些内容,我就会收到错误消息:

I've been struggling for days now with the fact I cannot run any real test with Karma. I can run tests which do not require imports (like basic sanity tests) but as soon I have to import something from my app I get the error:

我需要提一下:测试示例:

I need to mention :Example test:

import { provide } from 'angular2/core';
import {TestService} from './test.service';
import {
//   beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
//   injectAsync
} from 'angular2/testing';

 describe('TestService', () => {

  beforeEachProviders(() => [
    provide(TestService, {useClass: TestService})
  ]);
  it('should say hello with name', inject([TestService], (testService: TestService) => {
    expect(testService.name).toBe('Injected Service');
  }));

  it('should say hello with name', () => {
    expect(true).toBe(true);
  });

});

我的项目结构是基于多模块的:

My project structure Is multi module based like :

Karma.conf.js:

Karma.conf.js:

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.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 },
    { pattern: 'dist/components/matchers.js', included: true, watched: true },

    // paths loaded via module imports
    { pattern: 'dist/components/**/*.js', included: false, watched: true },

    // paths loaded via Angular's component compiler
    // (these paths need to be rewritten, see proxies section)
    { pattern: 'dist/*.html', included: false, watched: true },
    { pattern: 'dist/styles/*.css', included: false, watched: true },
    { pattern: 'dist/components/**/*.html', included: false, watched: true },
    { pattern: 'dist/components/**/*.css', included: false, watched: true },

    // paths to support debugging with source maps in dev tools
    { pattern: 'src/components/**/*.ts', included: false, watched: false },
    { pattern: 'dist/components/**/*.js.map', included: false, watched: false }
],

// proxied base paths
proxies: {
    // required for component assests fetched by Angular's compiler
    "/src/": "/base/src"
},

karma-test-shim.js:

karma-test-shim.js:

...

System.config({
    packages: {
        'base/src': {
            defaultExtension: false,
            format: 'register',
            map: Object.keys(window.__karma__.files).
                filter(onlyAppFiles).
                reduce(function createPathRecords(pathsMapping, appPath) {
                    // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
                    // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
                    var moduleName = appPath.replace(/^\/base\/src\//, './').replace(/\.js$/, '');
                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                    return pathsMapping;
                }, {})

        }
    }
});


function filePath2moduleName(filePath) {
    console.log('filePath2moduleName', filePath)
    return filePath.
        replace(/^\//, '').              // remove / prefix
        replace(/\.\w+$/, '');           // remove suffix
}


function onlyAppFiles(filePath) {
    console.log('filePath', filePath)
    return /^\/base\/src\/.*\.js$/.test(filePath)
}


function onlySpecFiles(path) {
    return /.spec\.js$/.test(path);
}

任何想法都非常受欢迎!

Any idea very welcomed !

推荐答案

如果将TS文件编译到dist文件夹中,我认为您还有差距.我会在您的karma-test-shim.js文件中尝试以下操作:

If you compile your TS files into the dist folder, I think that you have a gap. I would try the following within your karma-test-shim.js file:

System.config({
  packages: {
    'base/dist': {
        defaultExtension: false,
        format: 'cjs',
        map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
    }
  }
});

(...)

function createPathRecords(pathsMapping, appPath) {
  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;
}

createPathRecords函数中的以下行似乎很奇怪,因为您不应该从src中获取文件,而应该从dist中获取文件.

The following line in your createPathRecords function seems strange since you shouldn't have files from src but from dist.

使用此代码,我生成了以下SystemJS配置(map块):

With this code, I have the following SystemJS configuration generated (map block):

System.config({
  packages: {
    'base/dist': {
      defaultExtension: false,
      format: 'register',
      map: {
        './comps/my-list': '/base/dist/comps/my-list.js?e9(...)',
        './dist/my-app': '/base/dist/my-app.js?fe(...)',
        './pipes/my-pipe': '/base/dist/pipes/my-pipe.js?78(...)',
        './services/http-service': '/base/dist/services/http-service.js?c1(...)',
        './services/my-service': '/base/dist/services/my-service.js?b1(...)'
      }
    }
  }
});

对于您来说,/base/dist/components/test.service不能由SystemJS解决,所以我想您的map块不正确或packages的条目.

In your case /base/dist/components/test.service can't be resolved by SystemJS so I guess that either your map block isn't correct or the entry for the packages one.

请注意,map块的条目是相对于packages的键的.对于您的情况,我想您会生成以下配置:

Notice that the entry of the map block are relative to the key of the packages one. In your case, I guess that you generate the following configuration:

System.config({
  packages: {
    'base/src': {
      defaultExtension: false,
      format: 'register',
      map: {
        './components/test.service': '/base/dist/components/test.service.js',
        (...)
      }
    }
  }
});

因此,要调试您的问题,我将执行以下操作:

So to debug your problem, I would do the following:

  • createPathRecords函数中记录appPath:

reduce(function createPathRecords(pathsMapping, appPath) {
  console.log('appPath = '+appPath);
  (...)
}

  • 记录整个map配置:

    console.log(Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {}));
    

  • 基于这些提示,您需要调整代码以具有以下配置:

    Based on these hints, you need to adapt your code to have this configuration:

    {
      './components/test.service': '/base/dist/components/test.service.js',
      (...)
    }
    

    这篇关于业力无法加载导入的文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    1403页,肝出来的..

    09-06 13:41