Angular 4 Custom directives confusion

Question

So I've started learning angular recently. I've gotten to the point where I want to start making custom directives. After some research I gathered that there is only a few steps required to do this.

1. Create the directive
2. Import it in your app module
3. Include it in the app module declarations array
4. Use it in the template of a component

With this in mind I set out to create a custom directive that would just simply change the background color of the element the attribute directive was attached to. However, my directive didn't seem to work. I then tried including it in my routing module and then the directive worked...

Why do I have to include it in the routing module? That feels less global and I feel like i'd rather include it in root module directly so that I can use the directive throughout the entire app. Shouldn't it still work if I include it only in the app root module?

Would it be better to create a separate module for the directive and then export that module and import it in the root module? Or is importing the directive in my routing module okay?

Updated

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Routing Module
import { AppRoutingModule } from './app-routing.module';
// app layout components
import { AppComponent } from './app.component';
import { AppNavbarComponent } from './components/app-navbar/app-navbar.component';
import { AppFooterComponent } from './components/app-footer/app-footer.component';


@NgModule({
  declarations: [
    AppNavbarComponent,
    AppFooterComponent,
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// Routing Components
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { PageNotFoundComponent } from './components/page-not-
found/page-not-found.component';
// Directives
import { TestDirective } from './directives/test/test.directive';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AboutComponent,
    HomeComponent,
    PageNotFoundComponent,
    TestDirective
  ],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app-component.html

<app-navbar></app-navbar>

<router-outlet></router-outlet>

<app-footer></app-footer>

So the problem being that the navbar and footer appear to not have access to the directive if I include it in the app-routing.module.ts file but if I include the directive in the app.module.ts file, the directive appears to only work for the navbar and footer but not any of the individual routes. Obviously I cant include the directive in both modules.

I can however use any of the built in angular directives, such as ngIf, from anywhere in the app. I'd like for my directive to have that same scope.

Answer 1

Directives, components, and pipes are not global. Services are, under special conditions.
Directives are available in the module they belong to and in modules that import the module that exports the directive directly or transitively