(webpack) Cannot import with barrels

[efriandika]

Please look at this code:

import {NavbarComponent, FooterComponent} from './shared/index';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    directives: [NavbarComponent, FooterComponent]
})
export class AppComponent {}

It will get an error: EXCEPTION: Unexpected directive value 'undefined' on the View of component AppComponent'

When I dont use barrels:

import {NavbarComponent} from './shared/navbar/navbar.component';
import {FooterComponent} from './shared/footer/footer.component';

It run properly.

So, what should I do ? Is this a bugs of angular cli ?

Version: angular-cli@webpack
OS: MacOSX El Capitan

[hansl]

Could you give me the content of the index file for your shared directory? Thanks.

[coryrylan]

I have the same issue. I can try to come up with a reduced example as well. I noticed it wont allow imports form barrels if they are components. Services and pipes seem to work just fine.

This is what my shared/index.ts looks like

export * from './components/collapse-text';
export * from './components/geo-button'
export * from './components/google-static-map';
export * from './components/image-gallery';
export * from './components/loading-spinner';
export * from './components/social-sharing-links';
export * from './dto/org';
export * from './dto/postal-code';
export * from './pipes/ellipsis.pipe';
export * from './services/geo.service';
export * from './services/graph.service';
export * from './services/postal-code.service';
export * from './services/postal-code.service';
export * from './services/sale.service';
export * from './services/settings.service';
export * from './services/viewport.service';

[hansl]

Okay. I suggest as a temporary workaround to remove the barrels. With Angular RC5 the styleguide is moving away from barrels and we will as well.

Sorry for the temporary inconvenience.

[hansl]

Sorry if I was missing some information. Barrels are being replaced with NgModules so where you have to specify directives for your components, you'll simply put them in your module and they'll be available to all components (in the same NgModule).

[efriandika]

Thanks for the information @hansl

[layton-glympse]

@hansl so, just to be clear, this means that index.ts files are no longer the way to retrieve package contents?
Seems weird, because I can still get angular contents from their barrels...?

@hansl how would this work with e.g. domain objects? They are not components/directives. Right now we've got a separate file per domain class, and exporting them all in index.ts.
I can't put them in an ngModule as they are not Angular objects. How should I be doing that?

[hansl]

You mean simple utility class? No one is preventing you from using a barrel, just that the CLI will not produce barrels anymore.

If you have a specific issue, please file a separate issue with examples so we move the conversation there. I consider this done and will lock the conversation.