Custom Angular 2 directive not working

Question

Error
Template Analysis Errors:
Cannot bind to "time-delta" since this is not a known property of "p".

Solution in the documentation
I have to add a directive to the declaration array. I have already done this.

Now my architecture: I have three modules:

• AppModule (root)
• TimeModule (later there should be a helper module with some directives)
• AuthModule (input, component registration, etc.)

AppModule:

@NgModule({
    imports: [
        TimeModule,
        BrowserModule,
        FormsModule,
        AuthModule,
        routing,
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})

AuthModule:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        authRouting
    ],
    declarations: [
        AuthComponent,
        LoginComponent,
        SignupComponent,
        LogoutComponent
    ],
    providers: [
        AuthGuard,
        AuthService
    ],
    bootstrap: [ LoginComponent ]
})

TimeModule:

@NgModule({
    declarations: [
        ReadableDatePipe,
        TimeDeltaDirective
    ]
})

And now I'm trying to use my TimeDeltaDirective in the LoginComponent view. And I already tried to add the directive to other ad arrays, but that won't work either.

I am grateful for any support! Thanks

TimeDeltaDirective:

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

@Directive({ selector: '[time-delta]' })
export class TimeDeltaDirective {
    constructor(renderer: Renderer, el: ElementRef) {
        function getTimeDelta(date: Date) {
            var now = new Date();
            return (now.getTime() - date.getTime()) / 1000;
        }

        this.delta = getTimeDelta(new Date(this.date));
    }

    @Input('date') date: string;
    delta: number;
}

in LoginComponent (example):

@Component({
    selector: 'login',
    template: `
    <p date="2016-09-28 00:00:00" [time-delta]>{{delta}}</p>
  `
})

Answer 1

TimeDeltaDirective TimeModule, TimeModule AuthModule, LoginComponent , . , TimeDeltaDirective LoginComponent, AuthModule. , :

AuthModule

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        authRouting,
        TimeModule
    ],
    declarations: [
        AuthComponent,
        LoginComponent,
        SignupComponent,
        LogoutComponent
    ],
    providers: [
        AuthGuard,
        AuthService
    ],
    bootstrap: [ LoginComponent ]
})

TimeModule

@NgModule({
    declarations: [
        ReadableDatePipe,
        TimeDeltaDirective
    ],
    exports: [
        TimeDeltaDirective
    ]
})