Angular-CLI ile belirli modüle bileşen oluşturma

Açısal klibi kullanmaya başladım ve ne yapmak istediğime dair bir cevap bulmak için çok şey okudum ... başarı yok, bu yüzden buraya geldim.

Yeni bir modüle bileşen oluşturmanın bir yolu var mı?

Örneğin: ng g module newModule

ng g component newComponent (bu bileşen newModule'a nasıl eklenir ??)

çünkü açısal cli varsayılan davranışı tüm yeni bileşenleri içine koymaktır app.module. Ayrılmış modüller oluşturabilmem ve tüm bileşenlerimin içinde olmamasını sağlamak için bileşenimin nerede olacağını seçmek istiyorum app.module. Açısal klibi kullanarak bunu yapmak mümkün mü yoksa bunu manuel olarak yapmak zorunda mıyım?

Bir modülün parçası olarak bir bileşen oluşturmak için

1. ng g module newModule bir modül üretmek,
2. cd newModuledizini newModuleklasöre değiştirmek için
3. ng g component newComponent modülün alt öğesi olarak bir bileşen oluşturmak için.

GÜNCELLEME: Açısal 9

Bileşeni oluştururken hangi klasörde olduğunuz önemli değil.

1. ng g module NewMoudle bir modül oluşturmak.
2. ng g component new-module/new-component NewComponent oluşturmak için.

Not: Açısal CLI yeni modül / yeni bileşen gördüğünde, durumu yeni modül -> NewModule ve yeni bileşen -> NewComponent ile eşleşecek şekilde anlar ve çevirir. Başlangıçta kafa karıştırıcı olabilir, bu yüzden kolay yol # 2'deki adları modül ve bileşen için klasör adlarıyla eşleştirmektir.

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

Alexander Ciesielski'nin cevabının yazma sırasında doğru olup olmadığından emin değilim, ancak bunun artık işe yaramadığını doğrulayabilirim. Açısal CLI'yı projede hangi dizinde çalıştırdığınız önemli değildir. Yazarsanız

ng g component newComponent

bir bileşen oluşturur ve bunu app.module.ts dosyasına alır

CLI'yi otomatik olarak başka bir modüle almak için kullanabileceğiniz tek yol,

ng g component moduleName/newComponent

Burada moduleName, projenizde önceden tanımladığınız bir modüldür. ModuleName yoksa, bileşeni moduleName / newComponent dizinine koyar, ancak yine de app.module dosyasına alır.

Ben üst düzey modül klasörü içinde bir bileşen oluşturmak için cli nasıl kullanılacağını gösteren bir yanıt bulamadık ve ayrıca bileşen otomatik olarak modülün bildirim koleksiyonu ekledi var.

Modülü oluşturmak için şunu çalıştırın:

ng g module foo

Bileşeni foo module klasörünün içinde oluşturmak ve foo.module.ts'in bildirim koleksiyonuna eklemek için şunu çalıştırın:

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

Ve klips, modülü ve bileşeni şu şekilde dışarı çıkaracak:

- Köşeli klibin yeni versiyonu farklı davranır. 1.5.5 bir modül dosyası adı istemiyor, bu nedenle v1.5.5 ile komut

ng g component foo/fooList --module=foo

Aşağıdaki komutu,

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

Sonra komutunuz şöyle olacaktır:

ng g c user/userComponent -m user.module

Açısal v4 ve Üstü için şunları kullanın:

ng g c componentName -m ModuleName

benim için işe yarayan buydu:

1 -->  ng g module new-module

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

Dizini olmadan bir bileşen oluşturmak istiyorsanız --flat flag kullanın .

1. İlk olarak, çalıştırarak bir modül oluşturursunuz.

ng g m modules/media

bu klasör mediaiçinde bir modül oluşturur modules.

2. İkinci olarak, bu modüle eklenen bir bileşen oluşturursunuz

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

komutunun ilk bölümü ng g c modules/media/picPickadında bir bileşen klasörü oluşturacaktır picPickiçine modules/mediayeni içerirler cadı klasöre mediamodülü.

ikinci bölüm ise modülde picPickbildirilen yeni bileşenimizi mediamodül dosyasına alarak declarationsve bu modülün dizisine ekleyerek yapar .

Modül seviyesine gidin / kök seviyesinde olabiliriz ve aşağıdaki komutları yazabiliriz

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

Misal :

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

İlk oluşturma modülü:

ng g m moduleName --routing

Bu, bir moduleName klasörü oluşturur ve ardından modül klasörüne git

cd moduleName

Ve bundan sonra bileşen üretin:

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

Modül klasörü içinde alt klasör oluşturmamak için --flat komutunu kullanın

Uygulamada çoklu modüller ile benzer sorunları yaşıyorum. Bir bileşen herhangi bir modüle oluşturulabilir, bu nedenle bir bileşen oluşturmadan önce belirli modülün adını belirtmeliyiz.

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

Bu basit komutu kullanın:

ng g c users/userlist

users: Modül adınız.

userlist: Bileşen adınız.

Açısal belgelere göre, belirli bir modül için bileşen oluşturmanın yolu,

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

"dizin adı" = CLI'nin özellik modülünü oluşturduğu yer

Misal :-

ng generate component customer-dashboard/CustomerDashboard

Bu, müşteri gösterge tablosu klasöründe yeni bileşen için bir klasör oluşturur ve özellik modülünü CustomerDashboardComponent ile günceller

İlk çalıştırma ng g module newModule . O zaman koşng g component newModule/newModule --flat

Belirli Kök Klasöre sahip bileşen tabanlı alt modül oluşturdum

Aşağıdaki cli komutunu belirttim, lütfen kontrol et

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

Onarım alt modülümüzün Kök Klasörüdür

-m --modül

hesaplamak için c

oluşturmak için g

Bugün bir Angular 9 uygulaması iskelesi yaparken bu sorunla karşılaştım. .module.tsVeya .modulemodül adını her eklediğimde "modül yok hatası" var . Klibi sadece uzantısı olmayan modülün adına ihtiyaç duyar. Bir modül adım olduğunu varsayarsak: brands.module.tskullandığım komut

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

--dry-rundosya yapısının doğru olduğunu onayladıktan sonra kaldırın .

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

misal:

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

Ortak bir desen, rota, tembel yüklü bir modül ve bir bileşen ile bir özellik oluşturmaktır.

Rota: myapp.com/feature

app-routing.module.ts

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

Dosya yapısı:

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üm bunlar klipten şu şekilde yapılabilir:

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

Veya daha kısa

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

Ya da adı terk ederseniz, klip sizden bunu isteyecektir. Birkaç özellik oluşturmanız gerektiğinde çok kullanışlıdır

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

Açısal CLI kullanarak Açısal 4 uygulamasına bir bileşen ekleme

Uygulamaya yeni bir Açısal 4 bileşeni eklemek için command komutunu kullanın ng g component componentName. Bu komutun yürütülmesinden sonra, Angular CLI component-namealtına bir klasör ekler src\app. Ayrıca, aynı referanslar src\app\app.module.tsotomatik olarak dosyaya eklenir.

Bir bileşenin bir @Componentdekoratör işlevi ve ardından düzenlenmesi gereken bir işlevi classolmalıdır export. @ComponentDekoratör fonksiyonu meta veri kabul eder.

Açısal CLI kullanarak Açısal 4 uygulamasının belirli bir klasörüne bileşen ekleme

Belirli bir klasöre yeni bir bileşen eklemek için şu komutu kullanın: ng g component folderName/componentName

.Angular-cli.json içinde bildirilmiş birden fazla uygulamanız varsa (örneğin, özellik modülünde çalışma durumunda)

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

Yapabilirsin :

ng g c my-comp -a app-name

-a --app (isim) anlamına gelir

Bir modül içinde bileşenler oluşturmak için bu özel komutu kullanın.

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

Bu komut, modül için yerel bileşen oluşturur. veya Önce dizini yazarak değiştirebilirsiniz.

cd <module-directory-name>

ve sonra bileşen oluşturun.

ng g c <component-name>

Not: <> içindeki kod kullanıcıya özel adları temsil eder.

1. - Özellik modülünüzü her zamanki gibi oluşturun.

ng generate module dirlevel1/module-name

2. - Projenizin KÖK YOLUNU --modül içinde belirtebilirsiniz (sadece --modül, (/) PROJE KÖK'ünüzün kök noktalarındadır ve SİSTEM KÖKÜ DEĞİLDİR !!! )

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

Gerçek Örnek:

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 

Çıktı:

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!

Açısal CLI ile test edilmiştir: 9.1.4

Belirli bir modülde modül, servis ve bileşen oluşturma

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)