桶进口似乎打破了加载订单 [英] 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>';

视情况而定。

但是，当我更改了单元测试AND组件中的导入以直接引用服务文件，单元测试工作正常。

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）从
桶中导入并使用服务/组件（B），其中包含A和B的出口，A在桶中出现在B
之前，B的导入值为undefined。

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.

所以在你的情况下，如果你将root 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屋！