Angular 5自定义局部指令可用，全局自定义指令无法引用求助

大家好，我基于Angular CLI框架写了两个指令，遇到个问题想请教下：

• 放在HomePageModule里的MyFirst.directive.ts，能在home-page.component.html里正常引用，样式也能生效；
• 但放在根目录（app.component层级）的MySecond.directive.ts，虽然我已经在AppModule里声明并导出了，却没法在home-page.component.html里使用，浏览器直接报错找不到这个指令。

下面是我的相关代码、程序输出和项目结构截图，麻烦帮忙看看问题出在哪，怎么解决！

AppModule 代码 #

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import {HomePageModule} from './home-page/home-page.module'; 
import {MySecondDirective} from './MySecond.directive'; // 已引入

@NgModule({
  declarations: [
    AppComponent,
    MySecondDirective // 已声明
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomePageModule
  ],
  providers: [],
  exports: [MySecondDirective], // 已导出
  bootstrap: [AppComponent]
})
export class AppModule { }

HomePageModule 代码 #

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { HomePageComponent } from './home-page/home-page.component'; 
import {MyFirstDirective} from './home-page/MyFirst.directive'; // 已引入

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HomePageComponent,
    MyFirstDirective // 已声明
  ],
  exports: [
    HomePageComponent,
    MyFirstDirective // 已导出
  ]
})
export class HomePageModule { }

HomePage 组件HTML代码 #

<p> home-page works! </p>
<div>
  <h1 myfirst>TESTING</h1> <!-- 这个指令正常生效 -->
  <h3 mysecond>Again</h3> <!-- 这个指令找不到 -->
</div>

程序输出截图 #

项目结构截图 #

MyFirstDirective 代码 #

import {Directive, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[myfirst]'
})
export class MyFirstDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    const nativeElement = elementRef.nativeElement;
    this.renderer.setStyle(nativeElement, 'color', 'red');
    this.renderer.setStyle(nativeElement, 'background-color', 'yellow');
    this.renderer.setStyle(nativeElement, 'border', '1px solid green');
  }
}

MySecondDirective 代码 #

import {Directive, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[mysecond]'
})
export class MySecondDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    const nativeElement = elementRef.nativeElement;
    this.renderer.setStyle(nativeElement, 'color', 'green');
    this.renderer.setStyle(nativeElement, 'background-color', 'orange');
    this.renderer.setStyle(nativeElement, 'border', '2px solid red');
  }
}

提前谢谢大家的帮助！

内容的提问来源于stack exchange，提问作者Yogi Bear