Angular2 - Unable to use directive in another component

Question

I have an angular app with following app module.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import {AppComponent} from './app.component';


// Import components
import {
  AppAsideComponent,
  AppBreadcrumbsComponent,
  AppFooterComponent,
  AppHeaderComponent,
  AppSidebarComponent,
  AppSidebarFooterComponent,
  AppSidebarFormComponent,
  AppSidebarHeaderComponent,
  AppSidebarMinimizerComponent,
  APP_SIDEBAR_NAV
} from './components';

const APP_COMPONENTS = [
  AppAsideComponent,
  AppBreadcrumbsComponent,
  AppFooterComponent,
  AppHeaderComponent,
  AppSidebarComponent,
  AppSidebarFooterComponent,
  AppSidebarFormComponent,
  AppSidebarHeaderComponent,
  AppSidebarMinimizerComponent,
  APP_SIDEBAR_NAV
]

// Import directives
import {
  AsideToggleDirective,
  NAV_DROPDOWN_DIRECTIVES,
  ReplaceDirective,
  SIDEBAR_TOGGLE_DIRECTIVES
} from './directives';

const APP_DIRECTIVES = [
  AsideToggleDirective,
  NAV_DROPDOWN_DIRECTIVES,
  ReplaceDirective,
  SIDEBAR_TOGGLE_DIRECTIVES
]

import {AppRoutingModule} from './app.routing';

@NgModule({
  imports: [
    AppRoutingModule,
    BrowserModule
  ],
  declarations: [
    AppComponent,
    ...APP_CONTAINERS,
    ...APP_COMPONENTS,
    ...APP_DIRECTIVES
  ],
  exports: [],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

I want to use the directive AsideToggleDirective in the component of another module which is a child of the main AppModule. I am able to use it properly in the components mentioned in const APP_COMPONENTS, but it does not work for another module components.

What am I missing here?

P.S. The other modules are defined by routes

You should create module that will declare and export AsideToggleDirective. Then import this module in AppModule and in another module See also https://stackoverflow.com/questions/39601784/angular-2-use-component-from-another-module/39601837#39601837 — yurzui, Nov 24 '17 at 13:43

score 2 · Answer 1 · answered Nov 24 '17 at 14:08

2

Simply add AsideToggleDirective to exports array :)

answered Nov 24 '17 at 14:08

Mick

8,203
10
44
66

Angular2 - Unable to use directive in another component

1 Answers1