Tạo thành phần cho mô-đun cụ thể với Angular-CLI

Tôi bắt đầu sử dụng angular-cli và tôi đã đọc rất nhiều để tìm câu trả lời về những gì tôi muốn làm ... không thành công, vì vậy tôi đã đến đây.

Có cách nào để tạo một thành phần cho một mô-đun mới không?

ví dụ: ng g module newModule

ng g component newComponent (làm thế nào để thêm thành phần này vào newModule ??)

bởi vì hành vi mặc định angular-cli là đặt tất cả các thành phần mới bên trong app.module. Tôi muốn chọn nơi mà thành phần của tôi sẽ ở đó, để tôi có thể tạo các mô-đun riêng biệt và sẽ không có tất cả các thành phần của tôi bên trong app.module. Có thể làm điều đó bằng cách sử dụng angular-cli hoặc tôi phải làm điều này bằng tay?

Để tạo một thành phần như là một phần của mô-đun, bạn nên

1. ng g module newModule để tạo ra một mô-đun,
2. cd newModuleđể thay đổi thư newModulemục vào thư mục
3. ng g component newComponent để tạo ra một thành phần như là một phần tử con của mô-đun.

CẬP NHẬT: Góc 9

Bây giờ nó không quan trọng bạn đang ở thư mục nào khi tạo thành phần.

1. ng g module NewMoudle để tạo ra một mô-đun.
2. ng g component new-module/new-component để tạo NewComponent.

Lưu ý: Khi Angular CLI thấy mô-đun mới / thành phần mới, nó hiểu và dịch trường hợp để khớp với mô-đun mới -> NewModule và thành phần mới -> NewComponent. Nó có thể gây nhầm lẫn ngay từ đầu, vì vậy cách dễ dàng là ghép các tên trong # 2 với tên thư mục cho mô-đun và thành phần.

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

Không chắc câu trả lời của Alexander Ciesielski có đúng không tại thời điểm viết bài, nhưng tôi có thể xác minh rằng điều này không còn hoạt động nữa. Không quan trọng thư mục nào trong dự án bạn chạy Angular CLI. Nếu bạn gõ

ng g component newComponent

nó sẽ tạo ra một thành phần và nhập nó vào tệp app.module.ts

Cách duy nhất bạn có thể sử dụng CLI để tự động nhập nó vào mô-đun khác là chỉ định

ng g component moduleName/newComponent

trong đó moduleName là mô-đun bạn đã xác định trong dự án của mình. Nếu moduleName không tồn tại, nó sẽ đặt thành phần vào thư mục moduleName / newComponent nhưng vẫn nhập nó vào app.module

Tôi đã không tìm thấy câu trả lời cho thấy cách sử dụng cli để tạo một thành phần bên trong thư mục mô-đun cấp cao nhất và cũng có thành phần tự động thêm bộ sưu tập khai báo của mô-đun.

Để tạo mô-đun chạy này:

ng g module foo

Để tạo thành phần bên trong thư mục mô-đun foo và thêm nó vào bộ sưu tập khai báo của foo.module.ts chạy này:

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

Và cli sẽ tạo ra mô-đun và thành phần như thế này:

--EDIT phiên bản mới của cli góc hoạt động khác nhau. 1.5.5 không muốn tên tệp mô-đun, vì vậy lệnh với v1.5.5 phải là

ng g component foo/fooList --module=foo

Bạn có thể thử lệnh bên dưới, mô tả,

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

Sau đó, lệnh của bạn sẽ như sau:

ng g c user/userComponent -m user.module

Đối với Angular v4 trở lên, chỉ cần sử dụng:

ng g c componentName -m ModuleName

Đây là những gì làm việc cho tôi :

1 -->  ng g module new-module

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

Nếu bạn muốn tạo một thành phần mà không có thư mục của nó, hãy sử dụng --flat cờ.

1. Đầu tiên, bạn tạo một mô-đun bằng cách thực hiện.

ng g m modules/media

điều này sẽ tạo ra một mô-đun gọi là mediabên trong modulesthư mục.

2. Thứ hai, bạn tạo một thành phần được thêm vào mô-đun này

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

phần đầu tiên của lệnh ng g c modules/media/picPicksẽ tạo ra một thư mục thành phần được gọi picPickbên trong modules/mediathư mục phù thủy chứa mediamô-đun mới của chúng tôi .

phần thứ hai sẽ làm cho picPickthành phần mới của chúng ta được khai báo trong mediamô-đun bằng cách nhập nó vào tệp mô-đun và nối nó vào declarationsmảng của mô-đun này.

Chuyển đến cấp độ mô-đun / chúng ta cũng có thể ở cấp độ gốc và gõ các lệnh bên dưới

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

Thí dụ :

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

Mô-đun tạo đầu tiên:

ng g m moduleName --routing

Điều này sẽ tạo một thư mục moduleName sau đó Điều hướng đến thư mục mô-đun

cd moduleName

Và sau đó tạo thành phần:

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

Sử dụng --flat để không tạo thư mục con trong thư mục mô-đun

Tôi đang gặp vấn đề tương tự với nhiều mô-đun trong ứng dụng. Một thành phần có thể được tạo cho bất kỳ mô-đun nào vì vậy trước khi tạo một thành phần, chúng ta phải chỉ định tên của mô-đun cụ thể.

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

Sử dụng lệnh đơn giản này:

ng g c users/userlist

users: Tên mô-đun của bạn.

userlist: Tên thành phần của bạn.

Theo tài liệu Angular cách tạo ra một thành phần cho mô-đun cụ thể là,

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

"Tên thư mục" = nơi CLI tạo mô-đun tính năng

Thí dụ :-

ng generate component customer-dashboard/CustomerDashboard

Điều này tạo ra một thư mục cho thành phần mới trong thư mục bảng điều khiển khách hàng và cập nhật mô-đun tính năng với CustomerDashboardComponent

Lần chạy đầu tiên ng g module newModule . Sau đó chạyng g component newModule/newModule --flat

Tôi đã tạo mô đun con dựa trên thành phần với Thư mục gốc cụ thể

Lệnh cli dưới đây tôi đã chỉ định, vui lòng kiểm tra

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

Sửa chữa là thư mục gốc của mô-đun con của chúng tôi

-m là - mô hình

c để tính

g để tạo

Tôi đã gặp vấn đề này ngày hôm nay trong khi dàn dựng một ứng dụng Angular 9. Tôi nhận được "mô-đun không tồn tại lỗi" bất cứ khi nào tôi thêm .module.tshoặc .modulevào tên mô-đun. Các cli chỉ cần tên của mô-đun không có phần mở rộng. Giả sử tôi có một tên mô-đun : brands.module.ts, lệnh tôi đã sử dụng là

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

loại bỏ --dry-runmột khi bạn đã xác nhận cấu trúc tập tin là chính xác.

Một mô hình phổ biến là tạo ra một tính năng với một tuyến đường, một mô-đun được tải lười biếng và một thành phần.

Tuyến đường: myapp.com/feature

ứng dụng định tuyến.module.ts

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

Cấu trúc tệp:

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

Tất cả điều này có thể được thực hiện trong cli với:

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

Hoặc ngắn hơn

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

Hoặc nếu bạn để lại tên, cli sẽ nhắc bạn cho nó. Rất hữu ích khi bạn cần tạo một số tính năng

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

Thêm một thành phần vào ứng dụng Angular 4 bằng Angular CLI

Để thêm thành phần Angular 4 mới vào ứng dụng, hãy sử dụng lệnh ng g component componentName. Sau khi thực hiện lệnh này, Angular CLI thêm một thư mục component-namebên dưới src\app. Ngoài ra, các tham chiếu của cùng được thêm vào src\app\app.module.tstập tin tự động.

Một thành phần sẽ có @Componentchức năng trang trí theo sau là classcần phải được chỉnh sửa export. Hàm @Componenttrang trí chấp nhận dữ liệu meta.

Thêm một thành phần vào thư mục cụ thể của ứng dụng Angular 4 bằng Angular CLI

Để thêm một thành phần mới vào một thư mục cụ thể, hãy sử dụng lệnh ng g component folderName/componentName

Nếu bạn có nhiều ứng dụng được khai báo bằng .angular-cli.json (ví dụ: trong trường hợp làm việc trên mô-đun tính năng)

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

Bạn có thể :

ng g c my-comp -a app-name

-a là viết tắt của --app (tên)

Tôi sử dụng lệnh đặc biệt này để tạo các thành phần bên trong một mô-đun.

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

Lệnh này sẽ tạo thành phần cục bộ cho mô-đun. hoặc Bạn có thể thay đổi thư mục đầu tiên bằng cách gõ.

cd <module-directory-name>

và sau đó tạo thành phần.

ng g c <component-name>

Lưu ý: mã được đính kèm trong <> thể hiện tên người dùng cụ thể.

1.- Tạo mô-đun tính năng của bạn như bình thường.

ng generate module dirlevel1/module-name

2.- Bạn có thể chỉ định ROOT PATH của dự án trong --module (chỉ trong --module, (/) điểm gốc cho ROOT DỰ ÁN của bạn và KHÔNG PHẢI LÀ ROOT HỆ THỐNG !!! )

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

Ví dụ thực tế:

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 

Đầu ra:

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!

Đã thử nghiệm với CLI góc: 9.1.4

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

thí dụ:

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

Tạo một mô-đun, dịch vụ và thành phần cụ thể

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)