Angular 5 custom Local directive is visible, my global custom directive is not

Question

These are the first and second directives I've ever written. (sorry) Basic CLI framework.

HomePageModule has home-page component plus MyFirst.directive.ts and this is referenced in home-page.component.html just fine.

MySecond.directive.ts is almost identical, but is at the app.component level. app.module.ts contains its declaration, but home-page.component.html CANNOT reference it.

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

Home Page Module

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

Home Page HTML

<p>
  home-page works!
</p>
<div>
  <h1 myfirst>TESTING</h1>
  <h3 mysecond>Again</h3>
</div>

Program Output

Program Structure

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');
  }
}

Thanks in advance! Chuck

Answer 1

Angular modules are not hierarchical.

Registering your directive in your root AppModule only tells Angular that the AppModule uses the declared directive. You'll still need to import it into whichever module you want to use the directive.

Generally, it is not recommended to export anything from your root AppModule since you won't be importing the root module into any other modules.

If you want your components/directives to be used in multiple modules of your app, create a SharedModule, export the components/directives from there and import it in any module that uses them.

The biggest confusion regarding imported modules is that developers think they make a hierarchy. And it's probably reasonable to assume that a module that imports other modules becomes the parent module for its imports. However, that's not what happens. All modules are merged during compilation phase. And thus there's no hierarchical relationship between the module that is imported and the module that imports.

from Angular In Depth