title: Angular 5: Can't bind to property customDirective as it isn't a known property of customElement
body: <p>I am trying to write a feature toggle directive in Angular 5, for use across my whole application.</p>
  
  <p>I have a feature toggle module, as so:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FeatureToggleDirective } from './feature-toggle.directive';
  import { FeatureToggleService } from '../../common/feature-
  toggle/feature-toggle.service';
  
  @NgModule({
    imports: [
      CommonModule
    ],
    declarations: [
      FeatureToggleDirective,
    ],
    exports: [
      FeatureToggleDirective,
    ],
    providers: [
      FeatureToggleService,
    ],
  })
  export class FeatureToggleModule { }
  </code></pre>
  
  <p>When I import this module into my app.module, like so: </p>
  
  <pre><code>@NgModule({
      imports: [
          BrowserModule,
          routing,
          MetaModule.forRoot({provide: MetaLoader, useFactory: 
  metaFactory}),
          HomeModule,
          HttpClientModule,
          NgReduxModule,
          StoreModule,
          SsoModule,
          ShellModule,
          BannerModule,
          ContentfulModule,
          PodsModule,
          BreakpointModule,
          AnalyticsModule,
          FeatureToggleModule,
      ],
      declarations: [
          AppComponent,
      ],
      providers: [
          NonProdGuard,
          KillSwitchGuard,
          LoggerService,
          {
              provide: HTTP_INTERCEPTORS,
              useClass: AnalyticsInterceptor,
              multi: true,
          },
      ],
      bootstrap: [AppComponent],
  })
  export class AppModule { ... }
  </code></pre>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p>Can't bind to 'appFeatureToggle' since it isn't a known property of
    'div'. (" </p>
    
    ]*appFeatureToggle="'feature'">
    
    <p>"): ng:///StatusCheckModule/ResultsComponent.html@28:5 Property
    binding appFeatureToggle not used by any directive on an embedded
    template. Make sure that the property name is spelled correctly and
    all directives are listed in the "@NgModule.declarations". (" </p>
    
    <p>[ERROR ->]</p>
    
    <p>"): ng:///StatusCheckModule/ResultsComponent.html@28:0 Error: Template
    parse errors: Can't bind to 'appFeatureToggle' since it isn't a known
    property of 'div'. (" </p>
  </blockquote>
  
  <p>I understand what the error means, but I am a bit confused as to why it's happening. </p>
  
  <p>When I import this module into the module of the app-need-help component and use it that way, it works just fine. </p>
  
  <p>How come importing it into the app.module doesn't work in the same way?</p>