วิธีสร้างส่วนประกอบใหม่ใน Angular 4 โดยใช้ CLI

ในเชิงมุม 2 ฉันใช้

ng g c componentname

แต่มันไม่ได้รับการสนับสนุนใน Angular 4 ดังนั้นฉันจึงสร้างมันขึ้นมาเอง แต่มันแสดงข้อผิดพลาดว่าไม่ใช่โมดูล

การสร้างและให้บริการโครงการ Angular ผ่านเซิร์ฟเวอร์การพัฒนา -

ก่อนอื่นไปที่ Project Directory ของคุณและพิมพ์ด้านล่าง -

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

ที่นี่“ D: \ Angular \ my-app> ” คือแอปพลิเคชัน Angular Project Directory ของฉันและ“ ผู้ใช้ ” คือชื่อของส่วนประกอบ

คอมมอนส์ดูเหมือน -

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 สิ่งนี้จะทำงานเหมือนกัน หากคุณได้รับข้อผิดพลาดฉันคิดว่าปัญหาของคุณอยู่ที่อื่น

ในประเภทพรอมต์คำสั่ง

ng สร้างคอมโพเนนต์ YOURCOMPONENTNAME

คำสั่งที่มี shorthands แม้สำหรับนี้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) ไปที่ Project Directory ก่อน

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

บรรทัดนี้จะสร้างชื่อโฟลเดอร์ "พนักงาน" ด้านล่างสร้างคอมโพเนนต์ "สร้างพนักงาน"

โดยไม่ต้องสร้างโฟลเดอร์ใด ๆ

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 component_name ไม่ทำงานในกรณีของฉันเพราะแทนที่จะใช้ 'app' เป็นชื่อโฟลเดอร์โครงการฉันเปลี่ยนชื่อเป็นอย่างอื่น ฉันเปลี่ยนเป็นแอปอีกครั้ง ตอนนี้มันทำงานได้ดี

ng g c COMPONENTNAME

คำสั่งนี้ใช้สำหรับการสร้างส่วนประกอบโดยใช้เทอร์มินัลที่ฉันใช้ใน angular2

g สำหรับสร้าง c สำหรับส่วนประกอบ

ในกรณีของฉันฉันมี.angular-cli.jsonไฟล์อื่นอยู่ในsrcโฟลเดอร์ของฉัน การลบออกช่วยแก้ปัญหาได้ หวังว่าจะช่วยได้

angular 4.1.1 angular-cli 1.0.1

ng g component component name

ก่อนที่คุณจะพิมพ์คำชมเชยนี้คุณจะอยู่ในเส้นทางคำสั่งโครงการ

ng gc - ดรายรันเพื่อให้คุณสามารถเห็นสิ่งที่คุณกำลังจะทำก่อนที่จะทำจริงจะช่วยประหยัดความยุ่งยากได้ เพียงแค่แสดงให้คุณเห็นว่ากำลังจะทำอะไรโดยไม่ต้องทำจริง

คุณควรอยู่ในsrc/appโฟลเดอร์ของโครงการเชิงมุมของคุณในบรรทัดคำสั่ง ตัวอย่างเช่น:

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" โดยที่ส่วนหัวเป็นส่วนประกอบใหม่ที่คุณต้องการสร้างตามค่าเริ่มต้นส่วนประกอบส่วนหัวจะถูกสร้างขึ้นภายในส่วนประกอบของแอปคุณสามารถสร้างส่วนประกอบภายใน a ส่วนประกอบตัวอย่างเช่นหากคุณต้องการสร้างส่วนประกอบภายในส่วนหัวที่เราทำไว้ด้านบนให้พิมพ์ "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:

เข้าสู่ Project Directory! (cd ลงในแอพที่สร้างขึ้น)

ขั้นตอนที่ 2:

พิมพ์คำสั่งต่อไปนี้แล้วรัน!

ng generate component [componentname]

• เพิ่มชื่อส่วนประกอบที่คุณต้องการสร้างในส่วน [ชื่อคอมโพเนนต์]

หรือ

ng generate c [componentname]

• เพิ่มชื่อส่วนประกอบที่คุณต้องการสร้างในส่วน [ชื่อคอมโพเนนต์]

ทั้งสองอย่างจะได้ผล

สำหรับการอ้างอิงเช็คเอาต์ส่วนนี้ของ Angular Documentation!

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

สำหรับการอ้างอิงโปรดตรวจสอบลิงก์ไปยัง Angular Cli บน github!

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

ng generate component componentName.

มันจะนำเข้าส่วนประกอบใน module.ts โดยอัตโนมัติ

cd ไปยังโครงการของคุณและเรียกใช้

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

หรือ

> ng g c shopping-cart

(สิ่งนี้จะสร้างโฟลเดอร์ใหม่ในโฟลเดอร์ "app" ที่มีชื่อ "shopping-cart" และสร้างไฟล์. html, .ts, .css.)

หากคุณไม่ต้องการสร้างไฟล์. spec

> ng g c shopping-cart --skipTests true

หากคุณต้องการสร้างส่วนประกอบในโฟลเดอร์ใด ๆ ใน "แอป"

> 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

ส่วนใหญ่มีสองวิธีในการสร้างองค์ประกอบใหม่ในเชิงมุมโดยใช้วิธีอื่นที่ใช้ng g c <component_name> ng generate component <component_name>โดยใช้คำสั่งเหล่านี้สามารถสร้างส่วนประกอบใหม่ได้