CLI를 사용하여 Angular 4에서 새 구성 요소를 만드는 방법

각도 2에서 나는 사용

ng g c componentname

하지만 Angular 4에서는 지원하지 않기 때문에 수동으로 생성했는데 모듈이 아니라는 오류가 표시됩니다.

개발 서버를 통해 Angular 프로젝트 생성 및 제공-

먼저 프로젝트 디렉토리로 이동하여 아래를 입력하십시오.

ng new my-app
cd my-app
ng g component User
ng serve

여기서“ D : \ Angular \ my-app> ”은 내 Angular 애플리케이션 프로젝트 디렉터리이고“ 사용자 ”는 구성 요소의 이름입니다.

커먼즈는 다음과 같습니다.

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

Angular4에서는 동일하게 작동합니다. 오류가 발생하면 문제가 다른 곳에 있다고 생각합니다.

명령 프롬프트 유형에서

구성 요소 YOURCOMPONENTNAME 생성

이것에 대한 약어도 있습니다 : 명령 generate은 다음 g과 component같이 사용할 수 있습니다 c.

ng gc YOURCOMPONENTNAME

당신이 사용할 수있는 ng --help, ng g --help또는 ng g c --help워드 프로세서합니다.

물론 YOURCOMPONENTNAME의 이름을 사용하려는 이름으로 바꿉니다.

문서 : angular-cli는 app.module.ts에서 구성 요소, 지시문 및 파이프에 대한 참조를 자동으로 추가합니다.

업데이트 : 이것은 Angular 버전 8에서 여전히 작동합니다.

1) 먼저 프로젝트 디렉토리로 이동하십시오.

2) 그런 다음 터미널에서 아래 명령을 실행하십시오.

ng generate component componentname

또는

ng g component componentname

3) 그 후 다음과 같은 출력이 표시됩니다.

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

.spec파일 없이 새 컴포넌트를 생성 하려면 다음을 사용할 수 있습니다.

ng g c component-name --spec false

이러한 옵션은 다음을 사용하여 찾을 수 있습니다. ng g c --help

ng g component componentname

컴포넌트를 생성하고 모듈 선언에 컴포넌트를 추가합니다.

수동으로 컴포넌트를 생성 할 때 다음과 같이 모듈 선언에 컴포넌트를 추가해야합니다.

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

CMD 라인의 프로젝트 디렉토리에 있는지 확인하십시오.

    ng g component componentName

특정 폴더에 컴포넌트 생성

ng g c employee/create-employee --skipTests=false --flat=true

이 줄은 폴더 이름 'employee'를 만들고 그 아래에 'create-employee'구성 요소를 만듭니다.

폴더를 만들지 않고

ng g c create-employee --skipTests=false --flat=true

ng g c componentname

다음 4 개의 파일이 생성됩니다.

1. componentname.css
2. componentname.html
3. componentname.spec.ts
4. componentname.ts

ng 생성 component_name은 내 경우에는 'app'을 프로젝트 폴더 이름으로 사용하는 대신 다른 이름으로 변경했기 때문에 작동하지 않았습니다. 다시 앱으로 변경했습니다. 자, 잘 작동합니다

ng g c COMPONENTNAME

이 명령은 angular2에서 사용하는 터미널을 사용하여 구성 요소를 생성하는 데 사용됩니다.

구성 요소에 대해 c를 생성하려면 g

제 경우에는 폴더에 다른 .angular-cli.json파일이 src있습니다. 그것을 제거하면 문제가 해결되었습니다. 도움이되기를 바랍니다.

angular 4.1.1 angular-cli 1.0.1

ng g component component name

이 명령을 입력하기 전에 프로젝트 지시문 경로에 있습니다.

ng gc --dry-run을 사용하면 실제로 수행하기 전에 수행 할 작업을 확인할 수 있으므로 좌절감을 줄일 수 있습니다. 실제로 수행하지 않고 수행 할 작업을 보여줍니다.

src/app명령 줄의 angular-cli 프로젝트 폴더에 있어야합니다 . 예를 들면 :

D:\angular2-cli\first-app\src\app> ng generate component test

그래야만 구성 요소가 생성됩니다.

angular-cli를 최신 버전으로 업데이트 했습니까? 또는 노드 또는 npm 또는 typescript를 업데이트하려고 했습니까? 이 문제는 angular / typescript / node와 같은 버전으로 인해 발생합니다. CLI를 업데이트하는 경우 여기에서이 링크를 사용하십시오. https://github.com/angular/angular-cli/wiki/stories-1.0-update

각도 프로젝트 폴더로 이동하여 "ng g component header"유형의 명령 promt를 엽니 다. 여기서 header는 만들려는 새 구성 요소입니다. 기본적으로 헤더 구성 요소는 앱 구성 요소 내부에 생성됩니다. 예를 들어 위에서 만든 헤더 안에 컴포넌트를 생성하려면 "ng g component header / menu"를 입력합니다. 이것은 헤더 구성 요소 내부에 메뉴 구성 요소를 만듭니다.

ng g c COMPONENTNAME 작동해야합니다. 모듈을 찾을 수 없음 예외가 발생하면 다음을 시도하십시오.

1. 프로젝트 디렉토리를 확인하십시오.
2. Visual Studio 코드를 사용하는 경우 다시로드하거나 프로젝트를 다시 엽니 다.

지정된 폴더의 프로젝트 위치로 이동

C:\Angular6\sample>

여기에 명령을 입력 할 수 있습니다.

C:\Angular6\sample>ng g c users

여기서 g는 생성을 의미하고, c는 구성 요소를 의미하고, 사용자는 구성 요소 이름입니다.

4 개의 파일이 생성됩니다.

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

1 단계:

프로젝트 디렉토리에 들어가십시오! (생성 된 앱에 cd).

2 단계:

다음 명령을 입력하고 실행하십시오!

ng generate component [componentname]

• [componentname] 섹션에 생성하려는 구성 요소의 이름을 추가합니다.

또는

ng generate c [componentname]

• [componentname] 섹션에 생성하려는 구성 요소의 이름을 추가합니다.

둘 다 작동합니다

참조를 위해 Angular Documentation의이 섹션을 확인하십시오!

https://angular.io/tutorial/toh-pt1

참고로 github의 Angular Cli 링크를 확인하십시오!

https://github.com/angular/angular-cli/wiki/generate-component

ng generate component componentName.

module.ts의 구성 요소를 자동으로 가져옵니다.

프로젝트로 이동하여 실행하십시오.

> ng generate component "componentname"
ex: ng generate component shopping-cart

또는

> ng g c shopping-cart

( "shopping-cart"라는 이름의 "app"폴더 아래에 새 폴더가 생성되고 .html, .ts, .css. specs 파일이 생성됩니다.)

.spec 파일을 생성하지 않으려는 경우

> ng g c shopping-cart --skipTests true

"app"아래의 특정 폴더에 구성 요소를 생성하려는 경우

> ng g c ecommerce/shopping-cart

( "app / ecommerce / shopping-cart"폴더 구조가 나타납니다)

CMD의 프로젝트 디렉토리로 이동하여 다음 명령을 실행하십시오. Visual Studio 코드 터미널도 사용할 수 있습니다.

ng generate component "component_name"

또는

ng g c "component_name"

새 폴더 "component_name"가 생성됩니다.

component_name / component_name.component.html component_name / component_name.component.spec.ts component_name / component_name.component.ts component_name / component_name.component.css

새 구성 요소가 자동으로 추가되는 모듈입니다.

다음 명령으로 사양 파일 생성을 피할 수 있습니다.

ng g c "component_name" --nospec

Angular에서를 사용하여 새 구성 요소를 생성하는 방법은 주로 두 가지가 있으며 ng g c <component_name>다른 방법은 ng generate component <component_name>. 이러한 명령 중 하나를 사용하여 새 구성 요소를 생성 할 수 있습니다.