CLI kullanarak Angular 4'te yeni bir bileşen nasıl oluşturulur

Açısal 2'de kullanıyorum

ng g c componentname

Ama Angular 4'te desteklenmiyor, bu yüzden onu manuel olarak oluşturdum, ancak bir modül olmadığında hata gösteriyor.

Bir geliştirme sunucusu aracılığıyla bir Angular proje oluşturma ve sunma -

Önce Proje Dizininize gidin ve aşağıdakini yazın -

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

Burada " D: \ Angular \ uygulamam> " Angular uygulamam Proje Dizini ve " Kullanıcı " bileşenin adıdır.

Commond'lar şöyle görünüyor -

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'te bu aynı şekilde çalışacaktır. Bir hata alırsanız, probleminizin başka bir yerde olduğunu düşünüyorum.

Komut istemi tipinde

ng, YOURCOMPONENTNAME bileşenini oluşturur

Komutlar: Bunun için bile kestirme yol yoktur generateolarak kullanılabilir gve componentolarak c:

ng gc COMPONENTNAME

Kullanabileceğiniz ng --help, ng g --helpyang g c --help Dokümanlar için.

Elbette, YOURCOMPONENTNAME adını kullanmak istediğiniz adla yeniden adlandırın.

Docs: angular-cli, app.module.ts içindeki bileşenlere, yönergelere ve borulara otomatik olarak başvuru ekler.

Güncelleme: Bu, Angular sürüm 8'de hala çalışmaktadır.

1) önce Proje Dizininize gidin

2) ardından terminalde Komutun altında çalıştırın.

ng generate component componentname

VEYA

ng g component componentname

3) bundan sonra böyle bir çıktı göreceksiniz,

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)

Dosyasız yeni bileşen oluşturmak .specistiyorsanız,

ng g c component-name --spec false

Bu seçenekleri kullanarak bulabilirsiniz ng g c --help

ng g component componentname

Bileşeni oluşturur ve bileşeni modül bildirimlerine ekler.

Bileşeni manuel olarak oluştururken, bileşeni modül bildirimine şu şekilde eklemelisiniz:

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

CMD satırında proje dizininizde olduğunuzdan emin olun.

    ng g component componentName

Belirli bir klasör altında bileşen oluşturmak için

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

Bu satır, altında bir "çalışan oluştur" bileşeni oluşturacak şekilde "çalışan" adlı bir klasör oluşturacaktır.

herhangi bir klasör oluşturmadan

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

ng g c componentname

Aşağıdaki 4 dosyayı oluşturacaktır:

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

ng create component_name bileşeni benim durumumda çalışmıyordu çünkü proje klasörü adı olarak 'app' kullanmak yerine onu başka bir şeye yeniden adlandırdım. Yine uygulama olarak değiştirdim. Şimdi iyi çalışıyor

ng g c COMPONENTNAME

bu komut, açısal2'de kullandığım terminali kullanarak bileşen oluşturmak için kullanılır.

g bileşeni için c oluşturmak için

Benim durumumda .angular-cli.json, srcklasörümde başka bir dosyam var . Onu kaldırmak sorunu çözdü. Umarım yardımcı olur

angular 4.1.1 angular-cli 1.0.1

ng g component component name

bu öneriyi yazmadan önce, proje yönergesi yolunuzda olacaksınız

ng gc --dry-run, böylece gerçekten yapmadan önce ne yapmak üzere olduğunuzu görebilirsiniz, bu biraz hayal kırıklığından kurtulacaktır. Gerçekte yapmadan ne yapacağını size gösterir.

src/appKomut satırında açısal-cli projenizin klasöründe olmalısınız . Örneğin:

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

Ancak o zaman bileşeninizi oluşturacaktır.

Angular-cli'yi en son sürüme güncellediniz mi? veya düğüm veya npm veya typcript'i güncellemeyi denediniz mi? bu sorun, angular / typcript / node gibi sürümlerden kaynaklanmaktadır. Cli'i güncelliyorsanız, buradaki bu bağlantıyı kullanın. https://github.com/angular/angular-cli/wiki/stories-1.0-update

açısal proje klasörünüze gidin ve komutu açın ve "ng g bileşen başlığı" yazın, burada başlık oluşturmak istediğiniz yeni bileşendir. Varsayılan olarak başlık bileşeni uygulama bileşeninin içinde oluşturulacaktır. Örneğin yukarıda yaptığımız üstbilgi içinde bir bileşen oluşturmak istiyorsanız "ng g bileşen başlığı / menüsü" yazın. Bu, başlık bileşeninin içinde bir menü bileşeni oluşturacaktır

ng g c COMPONENTNAME çalışmalı, modülünüz istisna bulunmazsa, bunları deneyin-

1. Proje dizininizi kontrol edin.
2. Görsel stüdyo kodu kullanıyorsanız, yeniden yükleyin veya projenizi yeniden açın.

Belirtilen Klasördeki Proje konumuna gidin

C:\Angular6\sample>

Buraya komutu yazabilirsiniz

C:\Angular6\sample>ng g c users

Burada g üret, c bileşen anlamına gelir, kullanıcılar bileşen adıdır

4 dosyayı oluşturacak

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

Aşama 1:

Proje Dizinine girin! (oluşturulan uygulamaya cd).

Adım 2:

Aşağıdaki komutu yazın ve çalıştırın!

ng generate component [componentname]

• Oluşturmak istediğiniz bileşenin adını [bileşen adı] bölümüne ekleyin.

VEYA

ng generate c [componentname]

• Oluşturmak istediğiniz bileşenin adını [bileşen adı] bölümüne ekleyin.

İkisi de çalışacak

Referans için Açısal Dokümantasyonun bu bölümünü kontrol edin!

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

Referans için ayrıca github'daki Angular Cli bağlantısına göz atın!

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

ng generate component componentName.

Bileşeni otomatik olarak module.ts'ye aktaracaktır.

projenize cd yapın ve çalıştırın,

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

VEYA

> ng g c shopping-cart

(Bu, "alışveriş sepeti" adıyla "app" klasörü altında yeni klasör oluşturur ve .html, .ts, .css. Specs dosyaları oluşturur.)

.Spec dosyası oluşturmak istemiyorsanız

> ng g c shopping-cart --skipTests true

"Uygulama" altındaki belirli bir klasörde bileşen oluşturmak istiyorsanız

> ng g c ecommerce/shopping-cart

("uygulama / e-ticaret / alışveriş sepeti" klasör yapısını alacaksınız)

CMD'de proje dizininize gidin ve aşağıdaki komutları çalıştırın. Görsel stüdyo kod terminalini de kullanabilirsiniz.

ng generate component "component_name"

VEYA

ng g c "component_name"

ile yeni bir klasör "component_name"oluşturulacak

bileşen_adı / bileşen_adı.component.html bileşen_adı / bileşen_adı.component.spec.ts bileşen_adı / bileşen_adı.component.ts bileşen_adı / bileşen_adı.component.css

yeni bileşen Otomatik olarak eklenen modül olacaktır.

aşağıdaki komutu kullanarak özellik dosyası oluşturmaktan kaçınabilirsiniz

ng g c "component_name" --nospec

Angular'da yeni bileşen oluşturmanın başlıca iki yolu vardır, kullanarak ng g c <component_name>, başka bir yol kullanmaktır ng generate component <component_name>. bu komutlardan birini kullanarak yeni bileşen oluşturulabilir.