Angular CLI를 사용하여 특정 폴더에 컴포넌트를 생성하는 방법

Angular CLI를 사용하여 특정 폴더에 컴포넌트를 생성하는 방법

특정 폴더에 컴포넌트를 생성하려면 다음 단계를 따르세요.

1. 프로젝트 루트 폴더로 이동합니다.
2. 다음 명령을 실행합니다.

ng generate component [컴포넌트 이름] --module [모듈 이름] --path [폴더 경로]

옵션:

• --module: 컴포넌트를 등록할 모듈을 지정합니다. 생략하면 루트 모듈에 등록됩니다.
• --path: 컴포넌트를 생성할 폴더 경로를 지정합니다.

예시:

ng generate component MyComponent --module AppModule --path src/app/components

이 명령은 src/app/components 폴더에 MyComponent라는 컴포넌트를 생성하고 AppModule에 등록합니다.

다음은 추가 옵션입니다.

• --selector: 컴포넌트의 셀렉터를 지정합니다. 생략하면 컴포넌트 이름에 자동으로 지정됩니다.
• --prefix: 컴포넌트 셀렉터에서 사용할 접두사를 지정합니다. 생략하면 angular.json 파일의 설정을 따릅니다.
• --inlineTemplate: HTML 파일을 별도로 만들지 않습니다. 생략하면 별도로 HTML 파일을 생성합니다.
• --spec: 테스트 파일(~.spec.ts)을 별도로 만들지 않습니다. 생략하면 별도로 테스트 파일을 생성합니다.
• --flat: 컴포넌트를 위한 전용 폴더를 별도로 만들지 않습니다. 생략하면 별도로 컴포넌트를 위한 전용 폴더를 생성합니다.

자세한 내용은 Angular CLI 공식 문서를 참조하십시오.

참고:

• Angular CLI는 버전에 따라 명령 구문이 다를 수 있습니다. 사용 중인 버전의 문서를 참조하십시오.
• ng generate 명령은 다양한 Angular 구성 요소를 생성하는 데 사용할 수 있습니다. 명령에 대한 자세한 내용은 ng help generate를 실행하십시오.

예제 코드

프로젝트 구조:

├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── components
│   │       └── my-component
│   │           ├── my-component.component.html
│   │           ├── my-component.component.ts
│   │           └── my-component.component.spec.ts
│   └── index.html
└── package.json

코드:

// 프로젝트 루트 폴더에서 다음 명령을 실행합니다.

ng generate component MyComponent --module AppModule --path src/app/components

결과:

src/app/components 폴더에 다음 파일이 생성됩니다.

• my-component.component.html

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<h1>My Component</h1>

<p>This is my component.</p>

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './components/my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

특정 폴더에 컴포넌트를 생성하는 대체 방법

컴포넌트 파일을 직접 생성합니다.

다음 파일을 직접 생성합니다.

• [컴포넌트 이름].component.ts
• [컴포넌트 이름].component.html (선택 사항)

// src/app/components/my-component/my-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

// src/app/components/my-component/my-component.component.html

<h1>My Component</h1>

<p>This is my component.</p>

// src/app/components/my-component/my-component.component.css

/* 컴포넌트 스타일 */

모듈 파일에 컴포넌트를 등록합니다.

컴포넌트를 사용할 모듈의 declarations 배열에 컴포넌트를 추가합니다.

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './components/my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(선택 사항) 컴포넌트 폴더를 생성합니다.

컴포넌트를 위한 전용 폴더를 생성하고 위의 단계 1 및 2를 수행합니다.

// src/app/components/my-component

// my-component.component.ts
// my-component.component.html
// my-component.component.css

주의:

• Angular CLI를 사용하지 않고 컴포넌트를 생성하는 경우 컴포넌트 셀렉터, 템플릿 URL 및 스타일 시트 URL을 직접 지정해야 합니다.
• Angular CLI는 컴포넌트 테스트 파일을 자동으로 생성하지만 직접 생성해야 합니다.