Angular 2 - Directives declared yet still have errors

Question

In RootModule:

@NgModule({
    imports: [
        ModuleA
    ],
    declarations: [
        ScrollToWhen
    ],
    bootstrap: [BootComponent],
})
class RootModule {}

In one of the component template inside Module A, I use ScrollToWhen, but I got error: Can't bind to 'scrollToWhen' since it isn't a known property of 'div'.

Why?

Error: Unexpected directive 'HbClass' imported by the module 'Module'

Answer 1

Either add ScrollToWhen to declarations of ModuleA or move it to a module that you can then add to imports: [...] of ModuleA to make it available there.

A component/directive can only be listed in one single module in declarations: [...]. Then import this module everywhere where you want to use this component/directive.

For module used for declaring directives and pipe, you need to set them in exports like:

@NgModule({
    declarations: [
        myDirectives
    ],
    exports: [
        myDirectives
    ]
})