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

Answer 2

You should specify Components, directives and Pipes under declarations property of the NgModule. So basically the easiest way for me upgrading my angular 2 project to 2.0.0. version was defining one module for the app (app.module.ts) put all there and then start breaking it smaller modules. Good reference for this can be found here

Answer 3

In Angular2.0.0 in-built directives are accessible/available with BrowserModule ,. You just need to import it as shown below and you'll be able to most of in-built directives.

For customDirective, you need to declared them with declarations metadata as shown,

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';

   /*---------import all custom directives-----------*/

   import { OtherResourceEditorComponent} from 'valid path';
   import { MvcResourceEditorComponent } from 'valid path';
   ...
   ...   

    @NgModule({
      imports:      [ BrowserModule],
      declarations: [ AppComponent,OtherResourceEditorComponent,MvcResourceEditorComponent,... ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

Answer 4

As others have stated you need to move your directives and providers to a module for your app. The RC4 to RC5 migration guide explains how to do this, and some other potential problems.