Importing barrels with '../shared' fails

[francisoud]

Importing barrels as explain in https://angular.io/styleguide#!#04-10 doesn't work with @angular2@2.0.0.rc3 or [email protected] (I don't know which one is faulty ;) )

I have a contract-list/contract-list.component.spec.ts
Karma fails:

[2016-07-15 14:35:08.959] [WARN] web-server - 404: /base/dist/app/contracts/shared.js
Missing error handler on `socket`.

...

import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import {
  beforeEach, beforeEachProviders,
  describe, xdescribe,
  expect, it, xit,
  async, inject
} from '@angular/core/testing';

import { ContractListComponent } from './contract-list.component';
import { ContractService }    from '../shared';

describe('Component: ContractList', () => {
  it('should create an instance', () => {
    let component = new ContractListComponent(new ContractService());
    expect(component).toBeTruthy();
  });
});

Workaround:
import { ContractService } from '../shared';
with
import { ContractService } from '../shared/index';

I think I got the same issue inside a component (not a test)...

[Foxandxss]

do you have the index.ts file that exports the component and that added to the system config?

/cc @filipesilva

[filipesilva]

It also seems to me that it's not being added to system-config. Basically, System does not know that app/contracts/ has an entry point of index.js, which is why you get web-server - 404: /base/dist/app/contracts/shared.js.

[francisoud]

I create a sample project from scratch to reproduce the problem: https://github.com/francisoud/angular.io.issue.1896
I have same problem during runtime (in console log) in contract-list.component.ts and for test (as describe above).

You were right the problem is in system-config.ts there are 2 lines that are missing and should have been added during ng generate (see command line below)

// App specific barrels.
  'app',
  'app/shared',
  'app/contracts',
  **'app/contracts/shared',**
  'app/contracts/contract-list',
  **'app/contracts/contract-list/shared'**

I think it's a bug in angular-cli
I think something is missing during ng generate component ... somewhere near this line:
https://github.com/angular/angular-cli/blob/master/addon/ng2/blueprints/component/index.js#L117

[filipesilva]

@francisoud can you open this issue in https://github.com/angular/angular-cli instead then? It does sound like a bug in the CLI.

[francisoud]

Closing this one :)
Will be tracked in angular/angular-cli#1418