Angular 5：无法绑定到属性customDirective，因为它不是customElement的已知属性

Question

我正在尝试在Angular 5中编写一个功能切换指令，以便在我的整个应用程序中使用。

我有一个功能切换模块，如下所示：

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 { }

当我将此模块导入app.module时，如下所示：

@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 { ... }

我收到此错误：

无法绑定到'appFeatureToggle'，因为它不是'div'的已知属性。 （”

]*appFeatureToggle="'feature'">

“）：ng：///StatusCheckModule/ResultsComponent.html@28：5属性绑定appFeatureToggle未被嵌入式模板上的任何指令使用。请确保属性名称拼写正确且所有指令都列在”@NgModule“中。声明“。（”

[错误 - >]

“）：ng：///StatusCheckModule/ResultsComponent.html@28：0错误：模板解析错误：无法绑定到'appFeatureToggle'，因为它不是'div'的已知属性。（”

我理解错误意味着什么，但我对它为什么会发生这一点感到困惑。

当我将此模块导入app-need-help组件的模块并以这种方式使用时，它可以正常工作。

如何将它导入app.module不能以相同的方式工作？

Answer 1

当declarations在exports之前出现时我遇到了同样的问题。我不知道为什么会这样，但这不是工作形式：

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    FeatureToggleDirective,
  ],
  exports: [
    FeatureToggleDirective,
  ],
  providers: [
    FeatureToggleService,
  ],
})
export class FeatureToggleModule { }

这工作：

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    FeatureToggleDirective,
  ],
  declarations: [
    FeatureToggleDirective,
  ],
  providers: [
    FeatureToggleService,
  ],
})
export class FeatureToggleModule { }

Answer 2

检查你的FeatureToggleDirective是否使用任何第三方，确保在imports: []进口