桶装进口似乎打破装载顺序 [英] Barrel Import Appears To Break Load Order

问题描述

我有一个组件正在尝试进行单元测试，但我不断收到这些错误，具体取决于我的导入语句:

I've got a component that I'm trying to unit test but I keep getting these errors, depending on my import statements:

Error: Cannot resolve all parameters for 'MyComponent'(undefined, FormBuilder).

TypeError: Cannot read property 'toString' of undefined

我的组件有 2 个参数，一个是 FormBuilder，一个是自定义服务，必须注入:

My component takes 2 parameters, one the FormBuilder and one a custom service, that must be injected:

import {MyService} from '../';

@Component({
    ...,
    providers: [MyService]
})
class MyComponent {
    constructor(service: MyService, fb: FormBuilder) { ... }
    ...
}

我的单元测试设置如下:

And my unit test is setup as follows:

import {MyComponent} from './';
import {MyService} from '../';

describe('Component: MyComponent', () => {

    let builder: TestComponentBuilder;

    beforeEachProviders(() => [
        MyService,
        MyComponent
    ]);

    beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
        builder = tcb;
    }));

    it('should inject the component', inject([MyComponent],      
        (component: MyComponent) => {
            expect(component).toBeTruthy();
        })
    );

}

进口似乎是个问题，因为我正在尝试使用桶:

The imports seem to be the problem, since I'm trying to use barrels:

|
|- my-component
|  |- index.ts
|  |- my.component.ts
|  |- my.component.spec.ts
|
|- my-service
|  |- index.ts
|  |- my.service.ts
|
|- index.ts

在我的 index.ts 文件中，我正在做:

Inside my index.ts files, I'm doing:

export * from '<filename>';
export * from '<directory>';

视情况而定.

但是，当我将单元测试和组件中的导入更改为直接引用服务文件时，单元测试可以正常工作.

However, when I change the imports in the unit test AND component to reference the service file directly, the unit test works.

import {MyService} from '../my-service/my.service';

我在这个项目中使用 angular-cli，并且 SystemJS 正在使用生成的配置文件进行配置:

I'm using angular-cli in this project and SystemJS is being configured with the generated config file from that:

...
const barrels: string[] = [
  ...,

  // App specific barrels.
  'app',
  'app/my-service',
  'app/my-component'
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});
...

似乎当我从桶中导入时，组件和服务定义没有在单元测试代码之前加载.无论哪种方式，应用程序本身都会转译和运行.

It seems that when I import from the barrels, the component and service definitions aren't loaded ahead of the unit test code. The application itself will transpile and run, either way.

对不起，如果这是一个广泛的问题，但我对桶和 SystemJS 还是很陌生，我不知道如何进一步缩小范围:

Sorry if this is asking a broad question, but I'm still pretty new to barrels and SystemJS and I don't know how to narrow the scope further:

这是 SystemJS/Jasmine/TypeScript/Angular2 的错误还是我在设置中做错了什么?

Is this a bug with SystemJS/Jasmine/TypeScript/Angular2 or am I doing something wrong in my setup?

推荐答案

我必须查看您要从中导入的桶的内容才能确定，但​​听起来您需要更改导出的顺序你的桶.

I'd have to see the contents of the barrels you're importing from to know for sure but it sounds like you need to change the ordering of exports within your barrel.

angular2 repo 中存在一个问题:https://github.com/angular/angular/issues/9334

An issue in the angular2 repo exists here: https://github.com/angular/angular/issues/9334

如果组件 (A) 从包含 A 和 B 的出口的桶，并且 A 出现在 B 之前在桶中，B的导入值是未定义的.

If a component (A) imports and uses a service/component (B) from a barrel containing the exports of both A and B, and A appears before B in the barrel, the imported value of B is undefined.

因此，在您的情况下，如果您将根 index.ts 修改为以下内容，您应该可以从您的桶中导入.

So in your case, if you modify your root index.ts to the following, you should be able to import from your barrels.

export * from my-service;
export * from my-component;

这篇关于桶装进口似乎打破装载顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！