Angular-CLI를 사용하여 컴포넌트를 생성하여 특정 모듈에 추가

Angular-CLI를 사용하여 컴포넌트를 생성하여 특정 모듈에 추가

저는 angular-cli를 사용하기 시작했고, 제가 무엇을 하고 싶은지에 대한 답을 찾기 위해 이미 많은 책을 읽었지만 성공하지 못했기 때문에 이곳에 왔습니다.

새 모듈에 대한 구성 요소를 만드는 방법이 있습니까?

::ng g module newModule

ng g component newComponent(「새로운 모듈」은

은 angular-cli에 새로운 컴포넌트를 입니다.app.module하고, , 모든 시키지 않도록 싶습니다.app.module수아니면 angular-cli를수동으로 가 있습니까?니면수 수동 ?? ????

모듈의 일부로 컴포넌트를 작성하려면

1. ng g module newModule
2. cd newModulenewModule 표시
3. ng g component newComponent이치노

업데이트: 각도 9

이제 구성 요소를 생성할 때 어떤 폴더에 있는지 상관 없습니다.

1. ng g module NewModule모듈을 생성합니다.
2. ng g component new-module/new-component[새로운 컴포넌트]를 선택합니다.

하여 ": Angular CLI" new-module/new-component"와 일치시킵니다.new-module -> NewModule ★★★★★★★★★★★★★★★★★」new-component -> NewComponent수에 #및 컴포넌트의 이 간단합니다.처음에는 헷갈릴 수 있기 때문에 #2의 이름을 모듈 및 컴포넌트의 폴더 이름과 대조하는 것이 간단합니다.

ng g component nameComponent --module=app.module.ts

Alexander Cieselski의 답변이 작성 당시 정확한지는 모르겠지만, 나는 이것이 더 이상 작동하지 않는다는 것을 확인할 수 있다.프로젝트에서 Angular CLI를 실행하는 디렉토리는 중요하지 않습니다.입력한 경우

ng g component newComponent

컴포넌트를 생성하여 app.disc.ts 파일로 Import합니다.

CLI를 사용하여 자동으로 다른 모듈로 Import할 수 있는 유일한 방법은

ng g component moduleName/newComponent

moduleName은 프로젝트에서 이미 정의한 모듈입니다.moduleName이 존재하지 않는 경우 컴포넌트는 moduleName/newComponent 디렉토리에 배치되지만 app.module로 Import됩니다.

CLI를 사용하여 최상위 모듈 폴더 내에 컴포넌트를 생성하는 방법과 컴포넌트에 모듈의 선언 컬렉션을 자동으로 추가하는 방법을 나타내는 답변을 찾을 수 없었습니다.

모듈을 작성하려면 다음 절차를 수행합니다.

ng g module foo

foo 모듈폴더 내에 컴포넌트를 생성하여 foo.module.ts 선언 컬렉션에 추가하려면 다음 절차를 수행합니다.

ng g component foo/fooList --module=foo.module.ts

CLI는 모듈 및 컴포넌트를 다음과 같이 비계화합니다.

--새 버전의 angular cli는 다르게 동작합니다. 1.5.5는 모듈 파일 이름을 원하지 않으므로 v1.5.5 명령어는 다음과 같습니다.

ng g component foo/fooList --module=foo

다음 명령어를 사용해 보십시오.이 명령어는 다음과 같습니다.

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module 

그러면 명령어는 다음과 같습니다.

ng g c user/userComponent -m user.module

Angular v4 이상의 경우, 간단히 다음을 사용합니다.

ng g c componentName -m ModuleName

이것이 나에게 효과가 있었다:

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

" " 를 사용합니다.--flat

1. 먼저 를 실행하여 모듈을 생성합니다.

ng g m modules/media

명령어는 " " "라는 이름의 합니다.media에 inside inside inside modules더입니니다다

2. 다음으로 이 모듈에 추가된 컴포넌트를 생성합니다.

ng g c modules/media/picPick --module=modules/media/media.module.ts

첫 ng g c modules/media/picPick인 '컴포넌트 폴더'가 됩니다.picPick에 inside inside inside modules/media witch를 합니다.media★★★★★★ 。

입니다.picPick에서 media으로써 .declarations을 사용하다

첫 번째 생성 모듈:

ng g m moduleName --routing

moduleName 폴더가 생성된 후 모듈 폴더로 이동합니다.

cd moduleName

그 후 컴포넌트를 생성합니다.

ng g c componentName --module=moduleName.module.ts --flat

모듈 폴더 내에 하위 폴더를 만들지 않으려면 --flat을 사용합니다.

ng g c componentName --module=path-to-your-module-from-src-folder

예:

ng g c testComponent --module=/src/app/home/test-component/test-component.module

일반적인 패턴은 루트, 느린 부하 모듈 및 컴포넌트를 사용하여 기능을 작성하는 것입니다.

★★★★★myapp.com/feature

app-buff.ts.

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

파일 구조:

app   
└───my-feature
│   │   my-feature-routing.module.ts
│   │   my-feature.component.html
│   │   my-feature.component.css
│   │   my-feature.component.spec.ts
│   │   my-feature.component.ts
│   │   my-feature.module.ts

이 모든 작업은 CLI에서 수행할 수 있습니다.

ng generate module my-feature --module app.module --route feature

또는 더 짧다

ng g m my-feature --module app.module --route feature

또는 이름을 생략하면 CLI에서 입력을 요구합니다.여러 기능을 작성해야 할 때 매우 유용합니다.

ng g m --module app.module --route feature

각 CLI 버전 8.3에서 다음 명령을 사용하여 특정 모듈에서 선언된 특정 컴포넌트를 생성함으로써 작동합니다.

1. 컴포넌트를 생성해야 할 경우 특정 폴더로 이동합니다.

   cd <component-path>

2. 다음 generate 명령을 호출합니다.

   ng g c <component-name> --module=<module-name>

예

 `ng g c login --module= app`

TL;DR
합니다( .ts제외모듈 이름을 모듈의 파일 이름으로 지정합니다(확장자 .ts 제외).

ng g c components/path-to-a-folder/component-name --module=app.module

주의:

• ng g c 말하다ng generate component
• 경우 에서 컴포넌트를 할 수 collection.module.ts으로 ' '를 사용합니다.--module=collection.module--module=app.module그리고 당신은 가도 좋습니다.

모듈레벨로 이동합니다.루트레벨로 이동하여 아래 명령어를 입력할 수도 있습니다.

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

예:

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

의 .--route https://angular.io/cli/generate#module-command,

이를 아카이브하려면 해당 컴포넌트 모듈의 루트를 어딘가에 추가하고 루트 이름을 지정해야 합니다.

   ng generate module component-name --module=any-parent-module --route=route-path

1.- 평소처럼 기능 모듈을 만듭니다.

ng generate module dirlevel1/module-name

2.- 프로젝트의 루트 경로는 --module로 지정할 수 있습니다(프로젝트 루트에 대한 --module, (/) 루트 포인트에만 해당되며 시스템 루트에는 해당되지 않음).

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

실제 예:

ng generate module stripe/payment-methods-list

ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

출력:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

Angular CLI에서 테스트 완료: 9.1.4

그래서 여기 오신 건지 모르겠지만 모듈, 라우팅, 컴포넌트 파일이 있는 폴더를 만들고 싶었어요.제가 만든 모듈에 컴포넌트를 신고하고 싶었습니다.

이 경우 이 명령어가 매우 도움이 되었습니다.

ng g m path/to/folder/component --routing && ng g c path/to/folder/component

그러면 6개의 파일이 있는 폴더가 생성됩니다.

CREATE path/to/folder/component/component-routing.module.ts (253 bytes)
CREATE path/to/folder/component/component.module.ts (297 bytes)
CREATE path/to/folder/component/component.component.html (26 bytes)
CREATE path/to/folder/component/component.component.spec.ts (655 bytes)
CREATE path/to/folder/component/component.component.ts (295 bytes)
CREATE path/to/folder/component/component.component.scss (0 bytes)
UPDATE path/to/folder/component/component.module.ts (379 bytes)

라우팅을 원하지 않을 경우 --routing을 삭제할 수 있습니다.

Angular CLI를 사용하여 Angular 4 앱에 구성 요소 추가

4 앱에 하려면 Angular 4 합니다.ng g component componentName. 후 는 "Angular CLI" 폴더를 component-name아래src\app그 src\app\app.module.ts자동으로 파일링합니다.

구성 요소는 다음을 가져야 한다.@Component 뒤에 데코레이터 기능class 값은 「」로 할 가 있습니다.export ed. 더@Component데코레이터

Angular CLI를 사용하여 Angular 4 앱의 특정 폴더에 구성 요소 추가

에 새 하려면 명령어를 합니다.ng g component folderName/componentName

적용 중인 여러 모듈에서 비슷한 문제가 발생하고 있습니다.컴포넌트는 어떤 모듈에 대해서도 작성할 수 있으므로 컴포넌트를 작성하기 전에 특정 모듈의 이름을 지정해야 합니다.

'ng generate component newCompName --module= specify name of module'

다음 간단한 명령을 사용합니다.

ng g c users/userlist

users: 모 : 。

userlist 컴포넌트 이름

.angular-cli.json에서 여러 개의 앱을 선언한 경우(예: 기능 모듈에서 작업하는 경우)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

다음과 같은 작업을 수행할 수 있습니다.

ng g c my-comp -a app-name

-a는 --app(이름)의 약자입니다.

Angular docs에 따르면 특정 모듈의 컴포넌트를 작성하는 방법은 다음과 같습니다.

ng g component <directory name>/<component name>

"directory name" = CLI가 기능 모듈을 생성한 위치

예:-

ng generate component customer-dashboard/CustomerDashboard

그러면 Customer-Dashboard 폴더 내에 새 컴포넌트 폴더가 생성되고 CustomerDashboard Component로 기능 모듈이 업데이트됩니다.

번째 실행 ★★★★★★★★★★★★★★★★★★」ng g module newModule 다음 ""를 실행합니다""를 실행합니다ng g component newModule/newModule --flat

특정 루트 폴더를 사용하여 구성 요소 기반 하위 모듈을 만들었습니다.

아래 cli 명령어는 제가 지정한 명령어입니다.확인해 주세요.

ng g c Repair/RepairHome -m Repair/repair.module

복구는 자 모듈의 루트 폴더입니다.

-m은 --syslog입니다.

count의 경우

g는 generate를 나타냅니다.

저는 오늘 Angular 9 어플리케이션의 발판을 짜다가 이 문제에 부딪혔습니다. 'module does not exist error'를 'error..module.ts또는.module모듈명으로 이동합니다.CLI에는 확장자가 없는 모듈 이름만 필요합니다.모듈명이 있는 경우:brands.module.ts가 사용한 는 '''입니다

ng g c path/to/my/components/brands-component -m brands --dry-run

제거하다--dry-run파일 구조가 정확한지 확인되면.

---

특정 모듈, 서비스 및 구성 요소를 만듭니다.

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)

먼저 다음 명령을 사용하여 새 모듈을 작성해야 합니다.

ng g module newModule

그런 다음 다음 명령을 사용하여 해당 디렉토리 안으로 들어가야 합니다.

cd command  
cd newModule

이제 다음 명령을 사용하여 계속할 수 있습니다.

ng g component newComponent

이 컴포넌트는 해당 모듈에서 생성됩니다.

모듈을 가리키지 않고 컴포넌트를 이미 작성한 경우 선언에 추가하여 앱 모듈에 직접 추가할 수 있습니다.

@NgModule({
    declarations: [

    FileManagerDetailsComponent <---this is ur page component

ng g c module Folder Name / component Name -- module = parament Name

공유 모듈에 헤더 컴포넌트를 만듭니다.

ng g c shared/header --module=shared

이 조작은 유효합니다.

• ng g c shared/components/info-card --module=/src/app/shared/shared.module.ts

주의:

1. ng g c ng generate component
2. shared/components/info-card ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」src/appdirectory & 의 컴포넌트를 하기 위해 사용하는 ). ( / "InfoCardComponent" 입니다.
3. 새로 된 이 를 특정하려면 , 「」를 참조해 주세요.
   /src/app 라고 합니다.이렇게 하지 않으면 모듈이 존재하지 않는다고 표시됩니다.

언급URL : https://stackoverflow.com/questions/40649799/create-component-add-it-to-a-specific-module-with-angular-cli