Angular + Typescript 프로젝트에서 타입 스크립트를 추가하면 app.module.ts에 정의를 추가해줘야 합니다. app.module.ts는 Angular 프로젝트에서 컴포넌트(Component)들을 관리해주는 역할입니다. 참고로 Angular에서 컴포넌트는 아래와 같은 구조를 가집니다. 아래 4개 파일을 모듈이라고 부릅니다. css의 확장인 scss 또는 acss가 포함될 수 있습니다.

ngm.editor.component.html
ngm.editor.component.css
ngm.editor.component.spec.ts // 단위 테스트를 안하면 필요 없는 파일
ngm.editor.component.ts

그래서, 보통 모듈은 3개에서 5개까지 묶어서 말합니다. 아무튼, ngm.editor.component.ts를 추가 했으면 Angular 모듈(app.module.ts)에 등록해줘야 합니다.

import { NgmEditorComponent } from './pages/ngm/ngm-editor-gui/ngm-editor-gui.component';
...
...


@NgModule({
	declarations: [
    ...
    NgmEditorComponent,
    ...

Angular 프로젝트의 구조를 이해하면 별거 아닌 문제지만, 프로젝트에 투입되서 인수인계나 교육 없이 바로 시작하게 되면 난감합니다-_-; 웹 프로젝트를 진행해본 경험이 있다면 Angular나 Vue와 같은 프로젝트도 쉽게할 수 있습니다. 하지만, CS쪽 개발만 하다가 온 경우에는 처음에 적응하기가 쉽지 않습니다. 전통적인 웹과 동일하게 Angular도 index.html이 먼저 실행됩니다. 그 다음에 main.ts로 넘어가는데 여기에 아래와 같은 코드들이 있습니다.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { MiaAppModule } from './app/app.module'; // <-- 모듈 로딩
import { environment } from './environments/environment';
...
...

app.module.ts를 보면 로딩되는 모듈은 크게 2가지입니다. Angular 모듈과 우리가 만든 모듈들입니다. 이외에도 서드파티나 외부 모듈도 같이 처리되는데요. 대표적으로 ng-zorro를 많이 사용합니다. GUI를 일관되게 꾸밀 수 있고, 여러가지 편리한 모듈도 제공하기 때문입니다. 아마, 제 홈페이지에서도 몇차례 소개한적이 있는데요. 그만큼 괜찮은 프레임워크라서 강력 추천합니다~