앵귤러 Directive, AppComponent cannot be used..

 

 

앵귤러에서 Directive는 2.0버전 이하일 때는 Component에 포함되어도 정상적으로 작동 하였다.

마찬가지로 ng serve라는 명령어를 실행해도 문제없이 Directive가 잘 작동한다.

그런데, 컴파일을 하는도중 또는 컴파일이 완료된 이후 해당 소스코드를 실행하면 문제가 발생한다.

통상..오류는..Template parse errors 또는 ERROR in AppComponent cannot be used as an entry component 라는 오류가 나온다.

아래 코드를 보면,

import { Component, OnInit, Directive } from '@angular/core';
@Directive({  //<----과거 이런식으로 사용하였다.
    selector: '[셀렉터이름]'
})
@Component({
  selector: 'app-menu',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class Component implements OnInit {
..(생략)
}

@Directive가 컴포넌트 내부에 선언되어 있다.

앵귤러 버전이 올라가면서 더 이상 내부에서 선언 된 Directive는 컴파일 이후 작동하지 않으며 해당 Directive를 외부로 빼야 한다는 것이다.

그러므로 Direcitve가 따로 존재하는 클래스 파일을 만들어야 하며, 해당 파일은 모듈에 등록하여 사용하면 문제 없다.

따로 서비스처럼 providers 속성에 추가하는 것이 아닌 declarations로 추가하여 자유롭게 사용이 가능 하다.

아래 메인 컴포넌트 코드를 살펴보자.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
..(생략)
import {해당 클래스이름} from './내가만든지시자.ts파일위치';

@NgModule({
  declarations: [  //해당 클래스를 선언 해 주는 것만으로도 다른 컴포넌트에서 자유롭게 사용 가능하다.
    해당 클래스이름,
    ..(생략)
  ]
})
export class AppModule { 
}

Directive가 선언 된 클래스파일 형태는 아래처럼 사용한다.

import { ElementRef,Directive, HostListener,Input } from '@angular/core';
@Directive({ //지시자 선언, 지시자 데코레이터 말고 다른 데코레이터는 사용 하면 안된다.
    selector: '[사용될이름]'
})
export class 클래스 명칭 {
..(생략)
}

앵귤러 같은 경우에 2부터 6까지(2019년 기준) 버전이 나와있다.

당황스러운 것은 왠만한 언어는 문법형태가 바뀌는게 아니라 새로이 추가되는 개념으로 개발되는데, 앵귤러는 바꾸어 버린다.

즉, 기존 문법형태로 코딩한 옛날 버전이 최신버전에서는 동작을 안할 수 있다는 것이다; (예: map 메소드 import 위치 및 사용방법)