Angular2 Component How to Import Directive Component?

Question

I just upgraded to angular2 final release and there were alot of breaking changes from rc4. One of which is there is no longer a Directives collection on the component... I uesd to do something like this:

@Component({
    selector: 'resource-tab',
    templateUrl: './app/applicationMgmt/resource/resource-tab.html',
    directives: [
        NgSwitch,
        NgSwitchCase,
        NgSwitchDefault,
        OtherResourceEditorComponent,
        MvcResourceEditorComponent,
        WcfResourceEditorComponent,
        WebResourceEditorComponent,
        WebApiResourceEditorComponent,
        ConfigResourceEditorComponent
    ]    
})

to reference other components that are used as directives on the view template... How does one do this now?

Answer 1

The best way to do it would be to create a ResourceEditorModule like this:

@NgModule({
    declarations:[
            OtherResourceEditorComponent,
            MvcResourceEditorComponent,
            WcfResourceEditorComponent,
            WebResourceEditorComponent,
            WebApiResourceEditorComponent,
            ConfigResourceEditorComponent
    ],
    exports:[
            OtherResourceEditorComponent,
            MvcResourceEditorComponent,
            WcfResourceEditorComponent,
            WebResourceEditorComponent,
            WebApiResourceEditorComponent,
            ConfigResourceEditorComponent
    ]
})
export class ResourceEditorModule{}

and add ResourceEditorModule as import in your AppModule:

@NgModule({
    imports:[
        ...
        ...
        ResourceEditorModule
    ],
    ...
    ...
    ...
})
export class AppModule{}

The idea bedhind modules is to split your components, directives, pipes and services in groups that belongs to the same "package", like everything you need to use http for HttpModule, everything you need to use forms for FormsModule