What is the correct replacement for the @Component metadata directives array?

Question

In many examples on the web I see code with a directives array in the @Component metadata ie:

@Component({ selector: 'sprint-tasks', inputs: ['sprintTask'], templateUrl: './views/sprint-tasks.html', directives: [Dragula], providers: [SprintTaskService], viewProviders: [DragulaService] })

From: How to install a component wrapper for Angular2 (Dragula in particular)

In the 1.0 release of Angular2, this array was removed from the metadata:(https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html)

When trying to use a 3rd party directive (dragula in this case) I get the following error that I assume was previously handled by the directives array:

Can't bind to 'dragula' since it isn't a known property of 'div'

So, where am I supposed to inject Dragula/DragulaDirective (the current release doesn't actually seem to export Dragula) so the parser can find this custom directive? I have imported DragulaModule into the app module as instructed by the Github readme(https://github.com/valor-software/ng2-dragula#setup) and DragulaService is a view provider on the app component.

Is the app component where you are trying to use it? When importing the dragula module into the app module, that makes the directives only available to component declared in the app module. If the component you want to use the directive on is declared in a different module, then that module also needs to import the dragula module — Paul Samsotha
– Paul Samsotha, Commented Nov 6, 2016 at 6:15
@peeskillet That was it; I had just refactored into feature modules and didn't think about that. If you post that as an answer I'll accept it — BradleyDotNET
– BradleyDotNET, Commented Nov 6, 2016 at 16:05

Paul Samsotha · Accepted Answer · 2016-11-07 00:51:34Z

When importing the dragula module into the app module, that makes the directives only available to components declared in the app module. If the component you want to use the directive on is declared in a different module, then that module also needs to import the dragula module

@NgModule({ imports: [ DragularModule ] declarations: [ ComponentUsingDragula ], exports: [ ComponentUsingDragula ] }) class SomeFeatureModule {}

Manish · Accepted Answer · 2016-11-06 06:21:21Z

1

import { DragulaModule } from 'ng2-dragula/ng2-dragula'; @NgModule({ imports: [ BrowserModule, DragulaModule ], declarations: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }

It will start working after that, no need to add it in component.

answered Nov 6, 2016 at 6:21

Manish

2,19018 silver badges18 bronze badges

2 Comments

BradleyDotNET Over a year ago

Thank you for your answer, you are mostly correct; I needed to also do this in my feature module.

Dan J Over a year ago

I'm a newbie to angular and I must be missing something. I get the following error in my browser (and yes, I have dragula installed in node_modules/dragula & node_modules/ng2-dragula): (index):22 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-dragula/ng2-dragula(…)

Collectives™ on Stack Overflow

What is the correct replacement for the @Component metadata directives array?

2 Answers 2

Comments

2 Comments

Hot Network Questions