Невозможно привязать к «нижнему регистру», так как это не известное свойство «ионного ввода»

Question

Я довольно новичок в Ionic 3 и Angular, и я столкнулся с чем-то, что немного запуталось, так как похоже, что я делаю все правильно, но получаю ошибку в названии.

У меня есть директива, которую я пытаюсь применить к полю, в котором запись должна быть в нижнем регистре:

import {Directive, Input, Output, EventEmitter, OnInit} from '@angular/core';

@Directive({
    selector: '[lowercase]',
    host: {
        '[value]': 'lowercase',
        '(input)': 'format($event.target.value)'
    }
})
export class LowercaseDirective implements OnInit {

    @Input() lowercase: string;
    @Output() lowercaseChange: EventEmitter<string> = new EventEmitter<string>();

    constructor() {
    }

    ngOnInit() {
        this.lowercase = this.lowercase || '';
        this.format(this.lowercase);
    }

    format(value) {
        value = value.toLowerCase();
        this.lowercaseChange.next(value);
    }
}

Я добавил DirectivesModule в мой главный контроллер приложений:

import { NgModule } from '@angular/core';
import { LowercaseDirective } from './lowercase/lowercase';
@NgModule({
    declarations: [LowercaseDirective],
    imports: [],
    exports: [LowercaseDirective]
})
export class DirectivesModule {}

Но когда я пытаюсь добавить его на свою страницу входа, вот так:

<ion-content padding class="master">

    <div class="error-message" *ngIf="error !== ''">
        {{error}}
    </div>
    <ion-list>
      <form #loginForm="ngForm" 
            (ngSubmit)="userLogin(loginForm)">
        <ion-item>
          <ion-label for="name" stacked>username</ion-label>
          <ion-input 
            required
            ngModel 
            [(lowercase)]="login"
            name="login" 
            type="text" 
            id="login" 
            #login="ngModel"></ion-input>
        </ion-item>
        <div class="warnings" *ngIf="login.touched && !login.valid">username is required!</div>
        <ion-item>
            <ion-label for="password" stacked>password</ion-label>
            <ion-input 
              required
              ngModel
              #password="ngModel"
              name="password" 
              type="password" 
              id="password" ></ion-input>
          </ion-item>
          <div class="warnings" *ngIf="password.touched && !password.valid">password is required!</div>
          <button  
            class="button"
            [disabled]="!loginForm.valid" 
            ion-button color="primary" 
            round 
            full 
            type="submit">Login</button>
        </form>
    </ion-list>

<a class="go-to-reset" (click)="goToResetPassword()">Whoops. I forgot my login...</a>

</ion-content>

Импорт на моем login.component.ts выглядит следующим образом:

import { AuthenticationProvider } from './../../providers/authentication/authentication';
import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import 'rxjs/add/operator/do';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  error = '';


  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private auth: AuthenticationProvider) {
  }

  ngOnInit(){
    console.log('Member Info: ', this.auth.memberInfo());
  }
...

Я получаю следующую ошибку:

Невозможно привязать к «нижнему регистру», так как это не известное свойство «ионного ввода»

Чего мне не хватает?

Answer 1

Декларации (Компоненты, Директивы, Трубы) доступны только в модулях, в которые они импортированы. Поставщики (сервисы) доступны в глобальном приложении, многократный импорт сервиса приведет к сбросу сервиса новым экземпляром.

Вы можете найти объяснение Почему услуга, предоставляемая в функциональном модуле, видна везде? на angular.io:

Это по замыслу. Расширяемость за счет импорта NgModule является основной цель системы NgModule. Слияние провайдеров NgModule в Инжектор приложений облегчает библиотеку модулей для обогащения все приложение с новыми услугами. Добавляя HttpClientModule один раз каждый компонент приложения может отправлять HTTP-запросы.

Для лучшего понимания Я рекомендую эту статью Кирилла Тузи .