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

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

---

각도 2에서 나는 사용

ng g c componentname

하지만 Angular 4에서는 지원하지 않아서 수동으로 만들었는데 모듈이 아니라는 오류가 나옵니다.

---

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 버전 7에서 여전히 작동합니다.

---

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)

---

ng g component componentname

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

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

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

---

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

ng g c component-name --spec false

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

---

프로젝트 cmd 줄에 있는지 확인하십시오.

    ng g component componentName

---

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

---

ng g c COMPONENTNAME

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

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

---

ng g c componentname

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

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

---

특정 폴더에 컴포넌트 생성

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

폴더를 만들지 않고

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

이 줄은 create-employee 구성 요소를 만드는 아래에 employee라는 폴더 이름을 만듭니다.

---

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

angular 4.1.1 angular-cli 1.0.1

---

ng g component component name

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

---

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

---

개발 서버를 통해 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)

---

You should be in the src/app folder of your angular-cli project on command line. For example:

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

Only then it will generate your component.

---

Did you update the angular-cli to latest version? or did you try updating node or npm or typescript? this issue comes because of versions like angular/typescript/node. If you are updating the cli, use this link here. https://github.com/angular/angular-cli/wiki/stories-1.0-update

---

go to your angular project folder and open the command promt an type "ng g component header" where header is the new component that you want to create.As default the header component will be created inside the app component.You can create components inside a component .For example if you want to create a component inside he header that we made above then type"ng g component header/menu". This will create a menu component inside the header component

---

ng g c COMPONENTNAME should work, if your are getting module not found exception then try these things-

1. Check your project directory.
2. If you are using visual studio code then reload it or reopen your project in it.

---

Go to Project location in Specified Folder

C:\Angular6\sample>

Here you can type the command

C:\Angular6\sample>ng g c users

Here g means generate , c means component ,users is the component name

it will generate the 4 files

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

---

Step1:

Get into Project Directory!(cd into created app).

Step2:

Type in the following command and run!

ng generate component [componentname]

• Add the name of component you want to generate in the [componentname] section.

OR

ng generate c [componentname]

• Add name of component you want to generate in the [componentname] section.

Both will work

For reference checkout this section of Angular Documentation!

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

For reference also checkout the link to Angular Cli on github!

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

---

go to your project directory in CMD, and run the following commands. You can use the visual studio code terminal also.

ng generate component "component_name"

OR

ng g c "component_name"

a new folder with "component_name" will be created

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

new component will be Automatically added module.

you can avoid creating spec file by following command

ng g c "component_name" --nospec

---

There are mainly two ways to generate new component in Angular, using ng g c <component_name> , another way is that using ng generate component <component_name>. using one of these commands new component can be generated.

---

ng generate component componentName.

It will automatically import the component in module.ts

참고URL : https://stackoverflow.com/questions/44151427/how-to-create-a-new-component-in-angular-4-using-cli