angular-cli를 사용하여 특정 폴더에 구성 요소를 생성하는 방법은 무엇입니까?


221

angular-cli와 함께 angualr4를 사용하고 있으며 다음 명령으로 새 구성 요소를 만들 수 있습니다.

E:\HiddenWords>ng generate component plainsight

그러나 평원 안에 자식 구성 요소를 생성해야합니다. 앵귤러 클리와 관련이 있습니까?


15
ng 구성 요소를 생성 / 경로 / /에서 / 응용 프로그램 / 폴더 / 평온
maxime1992

4
@Maxime이 언급했듯이 또는 디렉토리에 cd
Z. Bagley

답변:


124

ng g component plainsight/some-name하게 새 디렉토리를 우리가 그것을 사용할 때.

최종 결과는 다음과 같습니다.

plainsight/some-name/some-name.component.ts

이를 피하려면 flat 옵션 을 사용 하면 새 폴더 만들지 않고ng g component plainsight/some-name --flat 파일이 생성됩니다.

plainsight/some-name.component.ts

12
--flat 옵션은 내가 찾던 것입니다!
아마도

1
@ user3611927 --flat은 기존 폴더를 사용하고 존재하지 않는 폴더 만 만드는 답입니다. 완전한!! 이것은 IMHO의 기본 행동이어야합니다
Andrew Day

40

빠르고 간단하며 오류가없는 방법

즉, app/component폴더에 컴포넌트를 생성하고 다음 단계를 따르십시오

  1. 구성 요소를 만들 폴더를 마우스 오른쪽 버튼으로 클릭하십시오.
  2. 선택 Open in Command Prompt옵션
  3. 새 터미널에서 (선택한 경로가 표시됨) 입력 한 다음 ng g c my-new-component

또한이 이미지를 통해이 과정을 확인할 수 있습니다

여기에 이미지 설명을 입력하십시오


1
당신은 천재이거나 난 그냥 바보 같은 바보입니다 ... 가장 좋은 방법은!
Ap0st0l

19

ng g c component-name

사용자 정의 위치를 ​​지정하려면 다음을 수행하십시오. ng g c specific-folder/component-name

여기에 component-name특정 폴더 안에 생성됩니다.

Similarl 접근법과 같은 다른 구성 요소를 생성하기 위해 사용될 수있는 directive, pipe, service, class, guard, interface, enum, module, 등


12

구성 요소를 생성하는 더 짧은 코드 : ng g c component-name
위치를 지정하려면 다음 을 수행하십시오.ng g c specific-folder/component-name



지시문을 생성하는 추가 정보가 더 짧은 코드 : ng g d directive-name
위치 지정 :ng g d specific-folder/directive-name



4

CLI에서 구성 요소를 생성 할 때 터미널에서 디렉토리 나 파일을 작성하는 것과 달리 CLI는 구성 요소 를 기본적으로 입력 한 경로에 src / app 경로를 추가하기 때문에 위의 옵션이 작동하지 않았습니다 .

메인 앱 폴더에서 컴포넌트를 생성하면 (WRONG WAY)

ng g c ./src/app/child/grandchild 

생성 된 구성 요소는 다음과 같습니다.

src/app/src/app/child/grandchild.component.ts

그래서 나는 타이핑해야했습니다.

ng g c child/grandchild 

잘하면 이것은 누군가를 돕는다.


3

위의 답변 (포함 --flat)으로 운이 없었지만 나를 위해 일한 것은 다음과 같습니다.

cd path/to/specific/directory

거기서부터 나는 ng g c mynewcomponent


1

단순한

ng g component plainsight/some-name

"plainsight"폴더를 생성하고 그 안에 이름 컴포넌트를 생성합니다.



1

프로젝트 디렉토리에 있으면 사용 cd path/to/directory하면 ng g c component_name --spec=false모든 것을 자동화하고 오류가 없습니다.

g c수단은 생성 컴포넌트



1

Angular CLI는 앱 개발에 필요한 모든 명령을 제공합니다. 특정 요구 사항에 따라 쉽게 ng g( ng generate)를 사용 하여 작업을 완료 할 수 있습니다 .

ng g c directory/component-name폴더에 component-name컴포넌트를 생성 directory합니다.

다음은 응용 프로그램에서 사용할 수있는 몇 가지 간단한 명령의 맵입니다.

  1. ng g c comp-name또는 ng generate component comp-name이름이 'comp-name'인 구성 요소를 작성하려면
  2. ng g s serv-name또는 ng generate service serv-name이름이 'SERV 이름'으로하는 서비스 만들기
  3. ng g m mod-name또는 ng generate module mod-name이름이 '모드 이름'으로 모듈을 만들려면
  4. ng g m mod-name --routing또는 ng generate module mod-name --routing각도 라우팅을 사용하여 이름이 'mod-name'인 모듈을 만들려면

도움이 되었기를 바랍니다!

행운을 빕니다!


1

VSCode를 사용하는 경우 Angular Console 사용을 고려하십시오

Angular CLI에 대한 인터페이스를 제공합니다. 경로를 지정하는 옵션이 표시됩니다.

Angular CLI는 엄청나게 강력하고 확장 가능합니다. 실제로 개발자가 사용 가능한 모든 명령에 대해 서로 다른 구성 옵션을 모두 갖는 것이 도움이되는 기능이 너무 많습니다.

Angular Console을 사용하면 추천을 받고 가장 쉽게 잊어 버리거나 거의 사용하지 않는 기능까지 끌어 올릴 수 있습니다!

Angular Console은 무엇보다도 Angular CLI가 제공하는 작업을보다 생산적으로 수행 할 수있는 방법입니다.


0

먼저 컴포넌트를 생성하려면 다음을 사용해야합니다.

  • ng gc 구성 요소 이름

    위의 명령을 사용하면 위에서
    지정한 (componentname) 의 폴더에 새 구성 요소가 생성됩니다 .

그러나 다른 구성 요소 내부 또는 특정 폴더에 구성 요소를 만들어야하는 경우 :-

  • ng gc componentname / newComponentName

0

사용자 정의 디렉토리를 사용할 때 --dryRun을 사용해야 함

ng명령 과 함께 사용자 정의 디렉토리 경로를 전달할 수 있습니다 .

ng g c myfolder\mycomponent

그러나 경로의 철자를 놓치면 새 폴더가 생성되거나 디렉토리 변경이 대상이 될 수 있습니다. 이런 이유로 dryRun매우 도움이됩니다. 변경 사항이 어떻게 적용되는지에 대한 출력을 표시합니다.
여기에 이미지 설명을 입력하십시오

결과를 확인한 후 -d변경 하지 않고 동일한 명령을 실행할 수 있습니다 .

--dryRun = true | false

true 인 경우 결과를 쓰지 않고 활동을보고합니다.

기본값 : false

별칭 : -d

공식 문서 :-https: //angular.io/cli/generate

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.