สร้างส่วนประกอบไปยังโมดูลเฉพาะด้วย Angular-CLI

ฉันเริ่มใช้ angi-cli แล้วและฉันได้อ่านคำตอบมากมายเกี่ยวกับสิ่งที่ฉันต้องการจะทำ ... ไม่ประสบความสำเร็จดังนั้นฉันจึงมาที่นี่

มีวิธีในการสร้างองค์ประกอบให้กับโมดูลใหม่หรือไม่?

เช่น: ng g module newModule

ng g component newComponent (วิธีเพิ่มส่วนประกอบนี้ใน newModule ??)

เพราะการทำงานเริ่มต้นเชิงมุม-CLI app.moduleคือการวางองค์ประกอบใหม่ทั้งหมดภายใน app.moduleผมอยากจะเลือกที่องค์ประกอบของฉันจะเป็นเพื่อที่ฉันสามารถสร้างโมดูลแยกออกจากกันและจะไม่ได้มีส่วนประกอบของฉันทั้งหมดภายใน เป็นไปได้ที่จะทำเช่นนั้นโดยใช้ angular-cli หรือฉันต้องทำด้วยตนเอง?

เพื่อสร้างองค์ประกอบเป็นส่วนหนึ่งของโมดูลที่คุณควร

1. ng g module newModule เพื่อสร้างโมดูล
2. cd newModuleเพื่อเปลี่ยนไดเรกทอรีลงในnewModuleโฟลเดอร์
3. ng g component newComponent เพื่อสร้างองค์ประกอบเป็นลูกของโมดูล

ปรับปรุง: เชิงมุม 9

ตอนนี้ไม่ว่าคุณจะอยู่ในโฟลเดอร์ใดเมื่อสร้างส่วนประกอบ

1. ng g module NewMoudle เพื่อสร้างโมดูล
2. ng g component new-module/new-component เพื่อสร้าง NewComponent

หมายเหตุ: เมื่อ Angular CLI เห็นโมดูลใหม่ / ส่วนประกอบใหม่มันจะเข้าใจและแปลเคสเพื่อให้ตรงกับโมดูลใหม่ -> NewModule และส่วนประกอบใหม่ -> NewComponent มันอาจทำให้สับสนในการเริ่มต้นดังนั้นวิธีง่ายๆคือการจับคู่ชื่อใน # 2 กับชื่อโฟลเดอร์สำหรับโมดูลและส่วนประกอบ

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

ไม่แน่ใจว่าคำตอบของอเล็กซานเด Ciesielski อาจจะถูกต้องในขณะที่เขียน แต่ฉันสามารถตรวจสอบได้ว่านี่ไม่ได้ผล ไม่สำคัญว่าไดเรกทอรีใดในโครงการที่คุณเรียกใช้ Angular CLI ถ้าคุณพิมพ์

ng g component newComponent

มันจะสร้างองค์ประกอบและนำเข้าสู่ไฟล์ app.module.ts

วิธีเดียวที่คุณสามารถใช้ CLI เพื่อนำเข้าสู่โมดูลอื่นโดยอัตโนมัติคือการระบุ

ng g component moduleName/newComponent

โดยที่ moduleName เป็นโมดูลที่คุณได้กำหนดไว้แล้วในโครงการของคุณ หาก moduleName ไม่มีอยู่ก็จะใส่ส่วนประกอบในไดเรกทอรี moduleName / newComponent แต่ยังคงนำเข้าลงใน app.module

ฉันไม่พบคำตอบที่แสดงวิธีใช้ cli เพื่อสร้างส่วนประกอบภายในโฟลเดอร์โมดูลระดับบนสุดและให้ส่วนประกอบเพิ่มคอลเลกชันประกาศของโมดูลโดยอัตโนมัติ

ในการสร้างโมดูลให้รันสิ่งนี้:

ng g module foo

ในการสร้างส่วนประกอบภายในโฟลเดอร์โมดูล foo และเพิ่มไปยังคอลเลกชันการประกาศของ foo.module.ts ให้รันสิ่งนี้:

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

และ cli จะนั่งร้านโมดูลและส่วนประกอบดังนี้:

- แก้ไขรุ่นใหม่ของ 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ภายในmodules

2. ประการที่สองคุณสร้างส่วนประกอบที่เพิ่มในโมดูลนี้

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

ส่วนแรกของคำสั่งng g c modules/media/picPickจะสร้างโฟลเดอร์ส่วนประกอบที่เรียกว่าpicPickภายในmodules/mediaโฟลเดอร์แม่มดมีmediaโมดูลใหม่ของเรา

ส่วนที่สองจะทำให้picPickส่วนประกอบใหม่ของเราประกาศในmediaโมดูลโดยการนำเข้ามันในไฟล์โมดูลและผนวกเข้ากับdeclarationsอาร์เรย์ของโมดูลนี้

ไปที่ระดับโมดูล / เราสามารถอยู่ในระดับรากและพิมพ์คำสั่งด้านล่าง

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

สร้างโมดูลแรก:

ng g m moduleName --routing

สิ่งนี้จะสร้างโฟลเดอร์ moduleName จากนั้นไปที่โฟลเดอร์โมดูล

cd moduleName

และหลังจากนั้นสร้างองค์ประกอบ:

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

ใช้ - เลื่อนเพื่อไม่สร้างโฟลเดอร์ลูกในโฟลเดอร์โมดูล

ฉันมีปัญหาที่คล้ายกันกับหลายโมดูลในแอปพลิเคชัน ส่วนประกอบสามารถสร้างไปยังโมดูลใด ๆ ได้ดังนั้นก่อนที่จะสร้างส่วนประกอบเราจะต้องระบุชื่อของโมดูลนั้น ๆ

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

ใช้คำสั่งง่าย ๆ นี้:

ng g c users/userlist

users: ชื่อโมดูลของคุณ

userlist: ชื่อส่วนประกอบของคุณ

ตามเอกสาร Angular วิธีการสร้างองค์ประกอบสำหรับโมดูลเฉพาะคือ

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

"directory name" = โดยที่ CLI สร้างโมดูลคุณลักษณะ

ตัวอย่าง: -

ng generate component customer-dashboard/CustomerDashboard

สิ่งนี้จะสร้างโฟลเดอร์สำหรับส่วนประกอบใหม่ภายในโฟลเดอร์แดชบอร์ดลูกค้าและอัปเดตโมดูลคุณลักษณะด้วย CustomerDashboardComponent

ng g module newModule การทำงานครั้งแรก จากนั้นเรียกใช้ng g component newModule/newModule --flat

ฉันสร้างโมดูลลูกที่ใช้ส่วนประกอบที่มีรูทโฟลเดอร์เฉพาะ

คำสั่ง cli ด้านล่างที่ฉันระบุไว้โปรดตรวจสอบ

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

การซ่อมแซมคือโฟลเดอร์รูทของโมดูลลูกของเรา

-m คือ - โมดูล

c สำหรับการคำนวณ

g สำหรับสร้าง

ฉันพบปัญหานี้ในวันนี้ขณะนั่งร้านแอปพลิเคชัน Angular 9 ฉันได้รับ "โมดูลไม่มีข้อผิดพลาด" เมื่อใดก็ตามที่ฉันเพิ่ม.module.tsหรือ.moduleชื่อโมดูล cli ต้องการชื่อโมดูลเท่านั้นโดยไม่มีส่วนขยาย สมมติว่าฉันมีชื่อโมดูล: brands.module.tsคำสั่งที่ฉันใช้คือ

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

ลบ--dry-runทันทีที่คุณยืนยันว่าโครงสร้างไฟล์นั้นถูกต้อง

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

แอปพลิเค routing.module.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

เพิ่มส่วนประกอบลงในแอป Angular 4 โดยใช้ Angular CLI

หากต้องการเพิ่มใหม่เชิงมุม 4 องค์ประกอบเพื่อ app ng g component componentNameคำสั่งการใช้งาน หลังจากการดำเนินการของคำสั่งนี้เชิงมุม CLI เพิ่มโฟลเดอร์ภายใต้component-name src\appนอกจากนี้การอ้างอิงของแบบเดียวกันจะถูกเพิ่มลงในsrc\app\app.module.tsไฟล์โดยอัตโนมัติ

องค์ประกอบจะต้องมี@Componentฟังก์ชั่นมัณฑนากรตามด้วยclassซึ่งจะต้องมีการexportแก้ไข @Componentฟังก์ชั่นมัณฑนากรยอมรับข้อมูล meta

เพิ่มส่วนประกอบลงในโฟลเดอร์เฉพาะของแอป Angular 4 โดยใช้ Angular CLI

ในการเพิ่มองค์ประกอบใหม่ให้กับโฟลเดอร์เฉพาะให้ใช้คำสั่ง ng g component folderName/componentName

หากคุณมีหลายแอปที่ประกาศใน. triangle-cli.json (เช่นในกรณีที่ทำงานกับโมดูลคุณสมบัติ)

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

คุณสามารถ :

ng g c my-comp -a app-name

-a หมายถึง --app (ชื่อ)

ฉันใช้คำสั่งนี้เพื่อสร้างส่วนประกอบภายในโมดูล

ng g c <module-directory-name>/<component-name>

คำสั่งนี้จะสร้างส่วนประกอบในเครื่องไปยังโมดูล หรือคุณสามารถเปลี่ยนไดเรกทอรีก่อนโดยพิมพ์

cd <module-directory-name>

จากนั้นสร้างองค์ประกอบ

ng g c <component-name>

หมายเหตุ: รหัสที่อยู่ใน <> แสดงถึงชื่อเฉพาะของผู้ใช้

1.- สร้างโมดูลคุณลักษณะของคุณตามปกติ

ng generate module dirlevel1/module-name

2.- คุณสามารถระบุROOT PATHของโครงการของคุณใน--module (เฉพาะใน --module, (/)คะแนนรากของROOT โครงการของคุณและ ไม่ใช่ ROOT ระบบ !!! )

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

ทำโมดูลบริการและส่วนประกอบในโมดูลเฉพาะ

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)