Cách tạo một thành phần mới trong Angular 4 bằng CLI

Trong góc 2 tôi sử dụng

ng g c componentname

Nhưng Nó không được hỗ trợ trong Angular 4, vì vậy tôi đã tạo nó theo cách thủ công, nhưng nó hiển thị lỗi rằng nó không phải là một mô-đun.

Tạo và phục vụ một dự án Angular thông qua một máy chủ phát triển -

Đầu tiên, hãy vào Thư mục dự án của bạn và nhập vào bên dưới:

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

Ở đây “ D: \ Angular \ my-app> ” là Thư mục dự án ứng dụng Angular của tôi và “ Người dùng ” là tên của thành phần.

Các hạt hạnh nhân trông giống như -

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)

Trong Angular4, điều này sẽ hoạt động tương tự. Nếu bạn gặp lỗi, tôi nghĩ vấn đề của bạn nằm ở chỗ khác.

Trong loại dấu nhắc lệnh

ng tạo thành phần YOURCOMPONENTNAME

Thậm chí có những cách viết tắt cho điều này: các lệnh generatecó thể được sử dụng như gvà componentnhư csau:

ng gc YOURCOMPONENTNAME

bạn có thể sử dụng ng --help, ng g --helphoặc ng g c --helpcho các tài liệu.

Tất nhiên, hãy đổi tên YOURCOMPONENTNAME thành tên bạn muốn sử dụng.

Docs: angle-cli sẽ tự động thêm tham chiếu đến các thành phần, chỉ thị và đường ống trong app.module.ts.

Cập nhật: Tính năng này vẫn hoạt động trong phiên bản Angular 8.

1) trước tiên hãy truy cập Thư mục dự án của bạn

2) sau đó Chạy bên dưới Lệnh trong thiết bị đầu cuối.

ng generate component componentname

HOẶC LÀ

ng g component componentname

3) sau đó bạn sẽ thấy đầu ra như thế này,

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)

Nếu bạn muốn tạo thành phần mới mà không có .spectệp, bạn có thể sử dụng

ng g c component-name --spec false

Bạn có thể tìm thấy các tùy chọn này bằng cách sử dụng ng g c --help

ng g component componentname

Nó tạo thành phần và thêm thành phần vào khai báo mô-đun.

khi tạo thành phần theo cách thủ công, bạn nên thêm thành phần vào khai báo của mô-đun như sau:

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

Đảm bảo rằng bạn đang ở trong thư mục dự án của mình trong dòng CMD

    ng g component componentName

Để tạo thành phần trong thư mục nhất định

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

Dòng này sẽ tạo tên thư mục 'nhân viên', bên dưới là tên thư mục tạo thành phần 'nhân viên tạo'.

mà không cần tạo bất kỳ thư mục nào

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

ng g c componentname

Nó sẽ tạo 4 tệp sau:

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

ng tạo thành phần component_name không hoạt động trong trường hợp của tôi vì thay vì sử dụng 'ứng dụng' làm tên thư mục dự án, tôi đã đổi tên nó thành một thứ khác. Tôi lại thay đổi nó thành ứng dụng. Bây giờ nó đang làm việc tốt

ng g c COMPONENTNAME

lệnh này sử dụng để tạo thành phần bằng cách sử dụng thiết bị đầu cuối mà tôi sử dụng trong angle2.

g để tạo c cho thành phần

Trong trường hợp của tôi, tôi tình cờ có một .angular-cli.jsontệp khác trong srcthư mục của mình . Xóa nó đã giải quyết được vấn đề. Hy vọng nó giúp

angular 4.1.1 angular-cli 1.0.1

ng g component component name

trước khi bạn gõ kiểm tra khen ngợi này, bạn sẽ ở trong đường dẫn chỉ thị dự án của bạn

ng gc --dry-run để bạn có thể thấy những gì bạn sắp làm trước khi thực sự thực hiện nó sẽ giúp bạn đỡ thất vọng. Chỉ cho bạn thấy nó sẽ làm gì mà không thực sự làm nó.

Bạn sẽ ở trong src/appthư mục của dự án angle-cli trên dòng lệnh. Ví dụ:

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

Chỉ sau đó nó sẽ tạo ra thành phần của bạn.

Bạn đã cập nhật angle-cli lên phiên bản mới nhất chưa? hoặc bạn đã thử cập nhật nút hoặc npm hoặc bảng chữ chưa? vấn đề này xảy ra do các phiên bản như angle / typecript / node. Nếu bạn đang cập nhật cli, hãy sử dụng liên kết này ở đây. https://github.com/angular/angular-cli/wiki/stories-1.0-update

chuyển đến thư mục dự án góc cạnh của bạn và mở lệnh promt một loại "ng g component header" trong đó header là thành phần mới mà bạn muốn tạo. Theo mặc định, thành phần tiêu đề sẽ được tạo bên trong thành phần ứng dụng. Bạn có thể tạo các thành phần bên trong một component. Ví dụ: nếu bạn muốn tạo một component bên trong tiêu đề he mà chúng ta đã thực hiện ở trên thì hãy nhập "ng g component header / menu". Điều này sẽ tạo một thành phần menu bên trong thành phần tiêu đề

ng g c COMPONENTNAME sẽ hoạt động, nếu mô-đun của bạn nhận được không tìm thấy ngoại lệ thì hãy thử những điều này-

1. Kiểm tra thư mục dự án của bạn.
2. Nếu bạn đang sử dụng mã studio trực quan thì hãy tải lại hoặc mở lại dự án của bạn trong đó.

Đi tới Vị trí dự án trong Thư mục Chỉ định

C:\Angular6\sample>

Tại đây bạn có thể gõ lệnh

C:\Angular6\sample>ng g c users

Ở đây g có nghĩa là tạo, c có nghĩa là thành phần, người dùng là tên thành phần

nó sẽ tạo ra 4 tệp

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

Bước 1:

Truy cập vào Thư mục dự án! (cd vào ứng dụng đã tạo).

Bước 2:

Nhập lệnh sau và chạy!

ng generate component [componentname]

• Thêm tên của thành phần bạn muốn tạo trong phần [tên thành phần].

HOẶC LÀ

ng generate c [componentname]

• Thêm tên của thành phần bạn muốn tạo trong phần [tên thành phần].

Cả hai sẽ hoạt động

Để tham khảo, hãy xem phần này của Tài liệu Angular!

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

Để tham khảo, hãy xem liên kết tới Angular Cli trên github!

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

ng generate component componentName.

Nó sẽ tự động nhập thành phần trong module.ts

cd vào dự án của bạn và chạy,

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

HOẶC LÀ

> ng g c shopping-cart

(Thao tác này sẽ tạo thư mục mới trong thư mục "ứng dụng" với tên "giỏ hàng" và tạo tệp .html, .ts, .css. Specs.)

Nếu bạn không muốn tạo tệp .spec

> ng g c shopping-cart --skipTests true

Nếu bạn muốn tạo thành phần trong bất kỳ thư mục cụ thể nào trong "ứng dụng"

> ng g c ecommerce/shopping-cart

(bạn sẽ nhận được cấu trúc thư mục "app / ecommerce / shopping-cart")

vào thư mục dự án của bạn trong CMD và chạy các lệnh sau. Bạn cũng có thể sử dụng thiết bị đầu cuối mã studio trực quan.

ng generate component "component_name"

HOẶC LÀ

ng g c "component_name"

một thư mục mới với "component_name"sẽ được tạo

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

thành phần mới sẽ được tự động thêm vào mô-đun.

bạn có thể tránh tạo tệp đặc tả bằng lệnh sau

ng g c "component_name" --nospec

Chủ yếu có hai cách để tạo thành phần mới trong Angular, sử dụng ng g c <component_name>, một cách khác là sử dụng ng generate component <component_name>. sử dụng một trong các lệnh này thành phần mới có thể được tạo.