{"id":32623,"date":"2025-10-24T01:41:02","date_gmt":"2025-10-23T22:41:02","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32623"},"modified":"2025-10-24T01:41:02","modified_gmt":"2025-10-23T22:41:02","slug":"angular-cli-ile-angulara-hizli-bir-baslangic-yapmak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/","title":{"rendered":"Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak"},"content":{"rendered":"

<\/p>\n

Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak<\/h2>\n

Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir JavaScript framework’\u00fcd\u00fcr. Tek sayfal\u0131k uygulamalardan (SPA) karma\u015f\u0131k kurumsal \u00e7\u00f6z\u00fcmlere kadar geni\u015f bir yelpazede projeleri destekler. Ancak, Angular’\u0131n sundu\u011fu zengin \u00f6zellik seti ve yap\u0131sal yakla\u015f\u0131m, yeni ba\u015flayanlar i\u00e7in bazen g\u00f6z korkutucu olabilir. \u0130\u015fte tam bu noktada Angular CLI (Command Line Interface) devreye girer. Angular CLI, geli\u015ftiricilerin Angular uygulamalar\u0131n\u0131 olu\u015fturmas\u0131n\u0131, geli\u015ftirmesini, test etmesini ve da\u011f\u0131tmas\u0131n\u0131 kolayla\u015ft\u0131ran bir komut sat\u0131r\u0131 arac\u0131d\u0131r. Bu makale, Angular CLI’\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve onu kullanarak Angular geli\u015ftirme yolculu\u011funuza nas\u0131l ba\u015flayaca\u011f\u0131n\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alacakt\u0131r.<\/p>\n

Giri\u015f: Angular CLI Neden Bu Kadar \u00d6nemli?<\/h3>\n

Angular CLI, Angular ekibi taraf\u0131ndan geli\u015ftirilen ve bak\u0131m\u0131 yap\u0131lan resmi bir ara\u00e7t\u0131r. Amac\u0131, geli\u015ftirme s\u00fcrecindeki tekrarlayan ve zaman al\u0131c\u0131 g\u00f6revleri otomatikle\u015ftirmek, b\u00f6ylece geli\u015ftiricilerin i\u015f mant\u0131\u011f\u0131na ve kullan\u0131c\u0131 deneyimine odaklanmas\u0131n\u0131 sa\u011flamakt\u0131r. CLI olmadan, bir Angular projesini s\u0131f\u0131rdan kurmak, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemek, yap\u0131land\u0131rma dosyalar\u0131n\u0131 ayarlamak ve geli\u015ftirme sunucusunu kurmak gibi ad\u0131mlar olduk\u00e7a zahmetli olabilir. CLI, t\u00fcm bu s\u00fcre\u00e7leri birka\u00e7 basit komutla hallederek, geli\u015ftiricilere inan\u0131lmaz bir verimlilik art\u0131\u015f\u0131 sunar.<\/p>\n

Angular CLI’\u0131n sundu\u011fu ba\u015fl\u0131ca avantajlar \u015funlard\u0131r:<\/p>\n

* H\u0131zl\u0131 Proje Olu\u015fturma:<\/strong> Tek bir komutla tam yap\u0131land\u0131r\u0131lm\u0131\u015f bir Angular projesi ba\u015flat\u0131r.
\n* Kod \u00dcretimi:<\/strong> Bile\u015fenler (components), servisler (services), mod\u00fcller (modules) gibi Angular yap\u0131 ta\u015flar\u0131n\u0131 otomatik olarak olu\u015fturur, b\u00f6ylece dosya yap\u0131s\u0131 ve boilerplate kod yazma y\u00fck\u00fcn\u00fc azalt\u0131r.
\n* Geli\u015ftirme Sunucusu:<\/strong> Canl\u0131 yeniden y\u00fckleme (live-reload) \u00f6zelli\u011fine sahip yerle\u015fik bir geli\u015ftirme sunucusu sa\u011flar, kod de\u011fi\u015fikliklerini an\u0131nda taray\u0131c\u0131da g\u00f6rmenizi sa\u011flar.
\n* Test Ara\u00e7lar\u0131:<\/strong> Birim (unit) ve u\u00e7tan uca (end-to-end) testleri \u00e7al\u0131\u015ft\u0131rmak i\u00e7in entegre destek sunar.
\n* Derleme ve Optimizasyon:<\/strong> \u00dcretim ortam\u0131 i\u00e7in optimize edilmi\u015f, k\u00fc\u00e7\u00fck boyutlu ve h\u0131zl\u0131 bir derleme \u00e7\u0131kt\u0131s\u0131 olu\u015fturur.
\n* G\u00fcncelleme Kolayl\u0131\u011f\u0131:<\/strong> Angular framework’\u00fcn\u00fc ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kolayca g\u00fcncellemenizi sa\u011flar.
\n* Standartla\u015fma:<\/strong> T\u00fcm Angular projelerinde tutarl\u0131 bir yap\u0131 ve i\u015f ak\u0131\u015f\u0131 sa\u011flar.<\/p>\n

Bu makalenin amac\u0131, Angular CLI’\u0131 kullanarak Angular d\u00fcnyas\u0131na ad\u0131m atman\u0131z i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r. Kurulumdan temel komutlara, geli\u015fmi\u015f kullan\u0131m senaryolar\u0131ndan s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan sorunlara kadar her \u015feyi ele alaca\u011f\u0131z.<\/p>\n

\u00d6n Ko\u015fullar: Ba\u015flamadan \u00d6nce \u0130htiya\u00e7 Duyduklar\u0131n\u0131z<\/h3>\n

Angular CLI’\u0131 kullanmaya ba\u015flamadan \u00f6nce sisteminizde baz\u0131 temel ara\u00e7lar\u0131n y\u00fckl\u00fc olmas\u0131 gerekmektedir.<\/p>\n

Node.js ve npm Kurulumu<\/h4>\n

Angular CLI ve Angular uygulamalar\u0131 Node.js \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131 \u00fczerinde \u00e7al\u0131\u015f\u0131r. Node.js, ayn\u0131 zamanda paket y\u00f6neticisi npm (Node Package Manager) ile birlikte gelir. npm, Angular projelerinizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

* Node.js \u0130ndirme:<\/strong> Node.js’in resmi web sitesi olan [nodejs.org](https:\/\/nodejs.org\/) adresine gidin. LTS (Long Term Support) s\u00fcr\u00fcm\u00fcn\u00fc indirmeniz tavsiye edilir, \u00e7\u00fcnk\u00fc bu s\u00fcr\u00fcm daha kararl\u0131 ve uzun s\u00fcreli desteklidir.
\n* Kurulum Kontrol\u00fc:<\/strong> Kurulum tamamland\u0131ktan sonra, bir terminal veya komut istemcisi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak Node.js ve npm’in do\u011fru bir \u015fekilde kurulup kurulmad\u0131\u011f\u0131n\u0131 kontrol edin:<\/p>\n

node -v\n    npm -v<\/code><\/pre>\n
    Bu komutlar, y\u00fckl\u00fc Node.js ve npm s\u00fcr\u00fcmlerini g\u00f6stermelidir.<\/p>\n
Kod D\u00fczenleyici<\/h4>\n
Angular geli\u015ftirme i\u00e7in modern bir kod d\u00fczenleyiciye ihtiyac\u0131n\u0131z olacak. Piyasada bir\u00e7ok se\u00e7enek bulunsa da, Visual Studio Code (VS Code)<\/strong>, Angular ile entegrasyonu, zengin eklenti ekosistemi (TypeScript deste\u011fi, Angular Language Service gibi) ve genel kullan\u0131m kolayl\u0131\u011f\u0131 nedeniyle en pop\u00fcler ve \u00f6nerilen se\u00e7enektir.<\/p>\n
*   VS Code \u0130ndirme:<\/strong> [code.visualstudio.com](https:\/\/code.visualstudio.com\/) adresinden VS Code’u indirebilirsiniz.<\/p>\n
Temel JavaScript\/TypeScript Bilgisi<\/h4>\n
Angular, TypeScript ile yaz\u0131lm\u0131\u015ft\u0131r. TypeScript, JavaScript’in s\u00fcper k\u00fcmesidir ve iste\u011fe ba\u011fl\u0131 statik tipleme, s\u0131n\u0131flar, aray\u00fczler gibi \u00f6zellikler sunarak daha \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay kod yazman\u0131za olanak tan\u0131r. Angular CLI’\u0131 kullanmak i\u00e7in derinlemesine TypeScript uzmanl\u0131\u011f\u0131na ihtiyac\u0131n\u0131z olmasa da, temel JavaScript (ES6+) ve TypeScript kavramlar\u0131na a\u015fina olmak, geli\u015ftirme s\u00fcrecinizi \u00e7ok daha verimli hale getirecektir.<\/p>\n
Angular CLI Kurulumu<\/h3>\n
\u00d6n ko\u015fullar\u0131 sa\u011flad\u0131ktan sonra, Angular CLI’\u0131 global olarak sisteminize kurabilirsiniz. Bu, CLI komutlar\u0131n\u0131 herhangi bir dizinden \u00e7al\u0131\u015ft\u0131rabilmenizi sa\u011flar.<\/p>\n
1.  Terminali A\u00e7\u0131n:<\/strong> Komut istemcisini (Windows’ta Command Prompt veya PowerShell, macOS\/Linux’ta Terminal) a\u00e7\u0131n.
\n2.  Kurulum Komutu:<\/strong> A\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
npm install -g @angular\/cli<\/code><\/pre>\n
    *   npm install<\/code>: npm paket y\u00fckleme komutu.
\n    *   -g<\/code>: Paketi global olarak kurar, bu da CLI’\u0131 sisteminizdeki herhangi bir yerden eri\u015filebilir hale getirir.
\n    *   @angular\/cli<\/code>: Y\u00fcklenecek Angular CLI paketinin ad\u0131d\u0131r.<\/p>\n
3.  Kurulum Kontrol\u00fc:<\/strong> Kurulum tamamland\u0131ktan sonra, CLI’\u0131n do\u011fru bir \u015fekilde y\u00fcklendi\u011fini do\u011frulamak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
ng version<\/code><\/pre>\n
    Bu komut, y\u00fckl\u00fc Angular CLI s\u00fcr\u00fcm\u00fcn\u00fc, Node.js s\u00fcr\u00fcm\u00fcn\u00fc ve di\u011fer ilgili paketlerin s\u00fcr\u00fcmlerini g\u00f6sterecektir. Bu \u00e7\u0131kt\u0131y\u0131 g\u00f6rd\u00fc\u011f\u00fcn\u00fczde, Angular CLI’\u0131 kullanmaya haz\u0131rs\u0131n\u0131z demektir.<\/p>\n
Yeni Bir Angular Projesi Olu\u015fturma<\/h3>\n
Art\u0131k Angular CLI y\u00fckl\u00fc oldu\u011funa g\u00f6re, ilk Angular projenizi olu\u015fturmaya haz\u0131rs\u0131n\u0131z. Bu i\u015flem, ng new<\/code> komutu ile yap\u0131l\u0131r.<\/p>\n
1.  Proje Olu\u015fturma Komutu:<\/strong> Yeni bir proje olu\u015fturmak istedi\u011finiz dizine gidin (\u00f6rne\u011fin, C:\\Projects<\/code> veya ~\/Documents\/Projects<\/code>) ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
ng new my-first-angular-app<\/code><\/pre>\n
    *   ng new<\/code>: Yeni bir Angular \u00e7al\u0131\u015fma alan\u0131 (workspace) ve uygulama olu\u015fturmak i\u00e7in kullan\u0131lan komut.
\n    *   my-first-angular-app<\/code>: Olu\u015fturulacak projenin ad\u0131d\u0131r. Bu ayn\u0131 zamanda projenizin k\u00f6k dizininin ad\u0131 olacakt\u0131r.<\/p>\n
2.  CLI Sorular\u0131:<\/strong> Komutu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra CLI size birka\u00e7 soru soracakt\u0131r:
\n    *   Would you like to add Angular routing? (y\/N)<\/code>: Angular y\u00f6nlendirme (routing) mod\u00fcl\u00fcn\u00fc projenize ekleyip eklemeyece\u011finizi sorar. \u00c7o\u011fu modern web uygulamas\u0131 i\u00e7in y\u00f6nlendirme gereklidir, bu y\u00fczden y<\/code> (yes) se\u00e7ene\u011fini se\u00e7meniz \u00f6nerilir.
\n    *   Which stylesheet format would you like to use? (Use arrow keys)<\/code>: Projenizde kullanmak istedi\u011finiz stil sayfas\u0131 format\u0131n\u0131 se\u00e7menizi ister (CSS, SCSS, Sass, Less, Stylus). Tercihinize g\u00f6re birini se\u00e7ebilirsiniz. SCSS (Sass), daha geli\u015fmi\u015f \u00f6zellikler sundu\u011fu i\u00e7in pop\u00fcler bir se\u00e7enektir.<\/p>\n
Bu sorular\u0131 yan\u0131tlad\u0131ktan sonra, Angular CLI projenizi olu\u015fturmaya ba\u015flayacakt\u0131r. Bu i\u015flem biraz zaman alabilir \u00e7\u00fcnk\u00fc gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 (paketleri) npm arac\u0131l\u0131\u011f\u0131yla indirir ve y\u00fckler. \u0130\u015flem tamamland\u0131\u011f\u0131nda, “Project ‘my-first-angular-app’ created successfully.” gibi bir mesaj g\u00f6rmelisiniz.<\/p>\n
Proje Yap\u0131s\u0131na Genel Bak\u0131\u015f<\/h4>\n
Olu\u015fturulan my-first-angular-app<\/code> dizinine girdi\u011finizde ( cd my-first-angular-app<\/code> ), a\u015fa\u011f\u0131daki gibi bir dosya ve dizin yap\u0131s\u0131 g\u00f6receksiniz:<\/p>\n
*   e2e\/<\/code><\/strong>: U\u00e7tan uca testler i\u00e7in dosyalar.
\n*   node_modules\/<\/code><\/strong>: Projenizin t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n y\u00fcklendi\u011fi dizin. Bu dizini do\u011frudan d\u00fczenlememelisiniz.
\n*   src\/<\/code><\/strong>: Uygulaman\u0131z\u0131n kaynak kodlar\u0131n\u0131n bulundu\u011fu ana dizin.
\n    *   app\/<\/code><\/strong>: Uygulaman\u0131z\u0131n ana bile\u015fenlerini ve mod\u00fcllerini i\u00e7eren dizin.
\n        *   app.component.ts<\/code>, app.component.html<\/code>, app.component.css<\/code>, app.component.spec.ts<\/code>: Ana bile\u015fen dosyalar\u0131.
\n        *   app.module.ts<\/code>: Uygulaman\u0131z\u0131n ana Angular mod\u00fcl\u00fc.
\n        *   app-routing.module.ts<\/code>: Y\u00f6nlendirmeyi se\u00e7tiyseniz, y\u00f6nlendirme yap\u0131land\u0131rmalar\u0131n\u0131 i\u00e7erir.
\n    *   assets\/<\/code><\/strong>: Resimler, ikonlar, yaz\u0131 tipleri gibi statik varl\u0131klar\u0131n bulundu\u011fu dizin.
\n    *   environments\/<\/code><\/strong>: Geli\u015ftirme ve \u00fcretim gibi farkl\u0131 ortamlar i\u00e7in yap\u0131land\u0131rma dosyalar\u0131 (environment.ts<\/code>, environment.prod.ts<\/code>).
\n    *   favicon.ico<\/code><\/strong>: Uygulaman\u0131z\u0131n taray\u0131c\u0131 sekmesindeki ikonu.
\n    *   index.html<\/code><\/strong>: Uygulaman\u0131z\u0131n tek HTML sayfas\u0131. Angular uygulamalar\u0131 tek sayfal\u0131k uygulamalar oldu\u011fu i\u00e7in t\u00fcm i\u00e7erik bu dosyaya enjekte edilir.
\n    *   main.ts<\/code><\/strong>: Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 noktas\u0131. Angular mod\u00fcl\u00fcn\u00fc bootstrap eder.
\n    *   polyfills.ts<\/code><\/strong>: Taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in polyfill’leri i\u00e7erir.
\n    *   styles.css<\/code><\/strong>: Global stil dosyas\u0131.
\n*   .angular.json<\/code><\/strong>: Angular \u00e7al\u0131\u015fma alan\u0131n\u0131z\u0131n yap\u0131land\u0131rma dosyas\u0131. CLI’\u0131n projenizi nas\u0131l derleyece\u011fini, test edece\u011fini ve \u00e7al\u0131\u015ft\u0131raca\u011f\u0131n\u0131 tan\u0131mlar.
\n*   package.json<\/code><\/strong>: Projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve \u00f6zel scriptlerini tan\u0131mlayan dosya.
\n*   tsconfig.json<\/code><\/strong>: TypeScript derleyicisinin yap\u0131land\u0131rma dosyas\u0131.
\n*   README.md<\/code><\/strong>: Projeniz hakk\u0131nda k\u0131sa bir a\u00e7\u0131klama ve talimatlar i\u00e7eren markdown dosyas\u0131.<\/p>\n
Bu yap\u0131, Angular CLI taraf\u0131ndan en iyi uygulamalar g\u00f6z \u00f6n\u00fcnde bulundurularak olu\u015fturulmu\u015ftur ve geli\u015ftiricilere d\u00fczenli ve s\u00fcrd\u00fcr\u00fclebilir bir ba\u015flang\u0131\u00e7 noktas\u0131 sunar.<\/p>\n
Angular Uygulamas\u0131n\u0131 \u00c7al\u0131\u015ft\u0131rma<\/h3>\n
Projenizi olu\u015fturduktan sonra, onu geli\u015ftirme sunucusunda \u00e7al\u0131\u015ft\u0131rmak ve taray\u0131c\u0131da g\u00f6rmek isteyeceksiniz.<\/p>\n
1.  Proje Dizinine Girin:<\/strong> Olu\u015fturdu\u011funuz projenin k\u00f6k dizinine gidin:<\/p>\n
cd my-first-angular-app<\/code><\/pre>\n
2.  Uygulamay\u0131 \u00c7al\u0131\u015ft\u0131rma Komutu:<\/strong> Geli\u015ftirme sunucusunu ba\u015flatmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullan\u0131n:<\/p>\n
ng serve<\/code><\/pre>\n
    Bu komut, uygulaman\u0131z\u0131 derler ve yerel bir geli\u015ftirme sunucusu ba\u015flat\u0131r. Varsay\u0131lan olarak, sunucu http:\/\/localhost:4200<\/code> adresinde \u00e7al\u0131\u015f\u0131r.<\/p>\n
3.  Taray\u0131c\u0131da G\u00f6r\u00fcnt\u00fcleme:<\/strong> Sunucu ba\u015flad\u0131ktan sonra, web taray\u0131c\u0131n\u0131z\u0131 a\u00e7\u0131n ve http:\/\/localhost:4200<\/code> adresine gidin. Angular’\u0131n varsay\u0131lan ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n
    *   --open<\/code> veya -o<\/code> Flag’i:<\/strong> ng serve<\/code> komutuna --open<\/code> veya -o<\/code> bayra\u011f\u0131n\u0131 ekleyerek, uygulaman\u0131z derlendikten sonra taray\u0131c\u0131n\u0131n otomatik olarak a\u00e7\u0131lmas\u0131n\u0131 sa\u011flayabilirsiniz:<\/p>\n
ng serve --open<\/code><\/pre>\n
Angular geli\u015ftirme sunucusu, live-reload<\/strong> (canl\u0131 yeniden y\u00fckleme) \u00f6zelli\u011fine sahiptir. Bu, kaynak kodunuzda herhangi bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, sunucunun uygulamay\u0131 otomatik olarak yeniden derleyece\u011fi ve taray\u0131c\u0131n\u0131n sayfay\u0131 yenileyece\u011fi anlam\u0131na gelir. Bu \u00f6zellik, geli\u015ftirme s\u00fcrecini son derece h\u0131zland\u0131r\u0131r.<\/p>\n
Temel Angular CLI Komutlar\u0131 ve Kullan\u0131mlar\u0131<\/h3>\n
Angular CLI, ng new<\/code> ve ng serve<\/code> d\u0131\u015f\u0131nda da bir\u00e7ok g\u00fc\u00e7l\u00fc komuta sahiptir. Bu komutlar, Angular uygulaman\u0131z\u0131n farkl\u0131 y\u00f6nlerini y\u00f6netmenize yard\u0131mc\u0131 olur.<\/p>\n
ng generate (ng g): Kod \u00dcretimi<\/h4>\n
ng generate<\/code> komutu (k\u0131saca ng g<\/code>), Angular uygulamalar\u0131nda s\u0131k\u00e7a kullan\u0131lan yap\u0131 ta\u015flar\u0131n\u0131 (bile\u015fenler, servisler, mod\u00fcller vb.) otomatik olarak olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Bu, boilerplate kodu yazma y\u00fck\u00fcn\u00fc azalt\u0131r ve tutarl\u0131 bir dosya yap\u0131s\u0131 sa\u011flar.<\/p>\n
*   Bile\u015fen Olu\u015fturma (ng g component<\/code> veya ng g c<\/code>):<\/strong>
\n    Bile\u015fenler, Angular uygulamalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131d\u0131r. Bir bile\u015fen, bir HTML \u015fablonu, bir TypeScript s\u0131n\u0131f\u0131 (bile\u015fen mant\u0131\u011f\u0131) ve bir stil dosyas\u0131ndan olu\u015fur.<\/p>\n
ng generate component my-new-component\n    # veya k\u0131saca\n    ng g c my-new-component<\/code><\/pre>\n
    Bu komut, src\/app\/my-new-component\/<\/code> dizini alt\u0131nda my-new-component.component.ts<\/code>, .html<\/code>, .css<\/code> ve .spec.ts<\/code> dosyalar\u0131n\u0131 olu\u015fturur. Ayr\u0131ca, app.module.ts<\/code> dosyas\u0131n\u0131 otomatik olarak g\u00fcncelleyerek yeni bile\u015feni declarations<\/code> dizisine ekler.<\/p>\n
    *   Faydal\u0131 Bayraklar:<\/strong>
\n        *   --skip-tests<\/code>: Test dosyas\u0131n\u0131n (.spec.ts<\/code>) olu\u015fturulmas\u0131n\u0131 engeller.
\n        *   --inline-template<\/code>: HTML \u015fablonunu ayr\u0131 bir dosya yerine bile\u015fen TypeScript dosyas\u0131na g\u00f6mer.
\n        *   --inline-style<\/code>: Stil dosyas\u0131n\u0131 ayr\u0131 bir dosya yerine bile\u015fen TypeScript dosyas\u0131na g\u00f6mer.
\n        *   --flat<\/code>: Bile\u015fen i\u00e7in ayr\u0131 bir dizin olu\u015fturmak yerine, dosyalar\u0131 mevcut dizine yerle\u015ftirir.
\n        *   --module=app<\/code>: Bile\u015fenin hangi mod\u00fcle eklenece\u011fini belirtir. (Varsay\u0131lan olarak en yak\u0131n mod\u00fcle ekler.)<\/p>\n
*   Servis Olu\u015fturma (ng g service<\/code> veya ng g s<\/code>):<\/strong>
\n    Servisler, bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131, API istekleri veya i\u015f mant\u0131\u011f\u0131 gibi yeniden kullan\u0131labilir i\u015flevleri kapsamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
ng generate service data-service\n    # veya k\u0131saca\n    ng g s data-service<\/code><\/pre>\n
    Bu komut, src\/app\/data-service.service.ts<\/code> ve src\/app\/data-service.service.spec.ts<\/code> dosyalar\u0131n\u0131 olu\u015fturur. Servisler, varsay\u0131lan olarak providedIn: 'root'<\/code> ile k\u00f6k enjekt\u00f6re kaydedilir, bu da uygulaman\u0131n her yerinde eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
*   Mod\u00fcl Olu\u015fturma (ng g module<\/code> veya ng g m<\/code>):<\/strong>
\n    Mod\u00fcller, ilgili bile\u015fenleri, servisleri ve di\u011fer mod\u00fclleri bir araya getirerek uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini d\u00fczenlemeye yard\u0131mc\u0131 olur.<\/p>\n
ng generate module feature-module\n    # veya k\u0131saca\n    ng g m feature-module<\/code><\/pre>\n
    Bu komut, src\/app\/feature-module\/feature-module.module.ts<\/code> dosyas\u0131n\u0131 olu\u015fturur.<\/p>\n
*   Y\u00f6nerge Olu\u015fturma (ng g directive<\/code> veya ng g d<\/code>):<\/strong>
\n    Y\u00f6nergeler, DOM \u00f6\u011felerinin davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
ng generate directive highlight\n    # veya k\u0131saca\n    ng g d highlight<\/code><\/pre>\n
*   Pipe Olu\u015fturma (ng g pipe<\/code> veya ng g p<\/code>):<\/strong>
\n    Pipe’lar, verileri HTML \u015fablonlar\u0131nda g\u00f6r\u00fcnt\u00fclemeden \u00f6nce d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
ng generate pipe currency-format\n    # veya k\u0131saca\n    ng g p currency-format<\/code><\/pre>\n
*   Guard Olu\u015fturma (ng g guard<\/code> veya ng g g<\/code>):<\/strong>
\n    Guard’lar, kullan\u0131c\u0131lar\u0131n belirli rotalara eri\u015fimini kontrol etmek i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, kimlik do\u011frulama kontrol\u00fc).<\/p>\n
ng generate guard auth-guard\n    # veya k\u0131saca\n    ng g g auth-guard<\/code><\/pre>\n
    Bu komut, size hangi guard aray\u00fczlerini uygulamak istedi\u011finizi soracakt\u0131r (CanActivate, CanDeactivate, CanLoad, CanMatch, CanActivateChild).<\/p>\n
*   Di\u011fer Olu\u015fturma Komutlar\u0131:<\/strong>
\n    *   ng g class my-class<\/code>
\n    *   ng g interface my-interface<\/code>
\n    *   ng g enum my-enum<\/code>
\n    *   ng g interceptor my-interceptor<\/code> (HTTP isteklerini yakalamak ve de\u011fi\u015ftirmek i\u00e7in)<\/p>\n
ng generate<\/code> komutu, Angular geli\u015ftirme s\u00fcrecini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde h\u0131zland\u0131ran ve projenin tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flayan temel bir ara\u00e7t\u0131r.<\/p>\n
ng build: Uygulamay\u0131 \u00dcretim \u0130\u00e7in Derleme<\/h4>\n
ng build<\/code> komutu, Angular uygulaman\u0131z\u0131 \u00fcretim ortam\u0131na da\u011f\u0131tmak i\u00e7in statik dosyalar halinde derler. Bu i\u015flem, uygulaman\u0131n boyutunu k\u00fc\u00e7\u00fcltmek, performans\u0131n\u0131 art\u0131rmak ve taray\u0131c\u0131 uyumlulu\u011funu sa\u011flamak i\u00e7in \u00e7e\u015fitli optimizasyonlar i\u00e7erir.<\/p>\n
ng build<\/code><\/pre>\n
Varsay\u0131lan olarak, bu komut geli\u015ftirme modu i\u00e7in bir derleme yapar. \u00c7\u0131kt\u0131, projenizin k\u00f6k dizinindeki dist\/my-first-angular-app\/<\/code> klas\u00f6r\u00fcne yerle\u015ftirilir.<\/p>\n
*   \u00dcretim Derlemesi (--configuration=production<\/code> veya --prod<\/code>):<\/strong>
\n    \u00dcretim ortam\u0131 i\u00e7in derleme yaparken, daha fazla optimizasyon ve performans iyile\u015ftirmesi sa\u011flayan --configuration=production<\/code> (k\u0131saca --prod<\/code>) bayra\u011f\u0131n\u0131 kullanman\u0131z \u00e7ok \u00f6nemlidir.<\/p>\n
ng build --configuration=production\n    # veya k\u0131saca\n    ng build --prod<\/code><\/pre>\n
    Bu komut, \u015funlar\u0131 yapar:
\n    *   AOT (Ahead-of-Time) Derleme:<\/strong> Uygulama, taray\u0131c\u0131ya g\u00f6nderilmeden \u00f6nce derlenir, bu da daha h\u0131zl\u0131 ba\u015flang\u0131\u00e7 s\u00fcreleri ve daha k\u00fc\u00e7\u00fck paket boyutlar\u0131 sa\u011flar.
\n    *   Tree-shaking:<\/strong> Kullan\u0131lmayan kodlar\u0131 kald\u0131r\u0131r.
\n    *   Minification ve Uglification:<\/strong> Kodun boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve okunabilirli\u011fini azalt\u0131r.
\n    *   Ortam De\u011fi\u015fkenleri:<\/strong> environment.prod.ts<\/code> dosyas\u0131ndaki yap\u0131land\u0131rmalar\u0131 kullan\u0131r.<\/p>\n
\u00dcretim derlemesi sonucunda olu\u015fan dosyalar\u0131 (HTML, CSS, JavaScript) herhangi bir statik dosya sunucusuna (Nginx, Apache, Netlify, Vercel, Firebase Hosting vb.) y\u00fckleyerek uygulaman\u0131z\u0131 canl\u0131ya alabilirsiniz.<\/p>\n
ng test: Birim Testlerini \u00c7al\u0131\u015ft\u0131rma<\/h4>\n
Angular CLI, birim testleri i\u00e7in Karma test \u00e7al\u0131\u015ft\u0131r\u0131c\u0131s\u0131n\u0131 ve Jasmine test framework’\u00fcn\u00fc entegre olarak sunar. ng test<\/code> komutu, uygulaman\u0131zdaki birim testlerini \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n
ng test<\/code><\/pre>\n
Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, bir Chrome (veya yap\u0131land\u0131r\u0131lm\u0131\u015f ba\u015fka bir taray\u0131c\u0131) penceresi a\u00e7\u0131l\u0131r ve testler \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Test sonu\u00e7lar\u0131 hem taray\u0131c\u0131da hem de terminalde g\u00f6r\u00fcnt\u00fclenir.<\/p>\n
*   --watch=false<\/code>:<\/strong> Testleri bir kez \u00e7al\u0131\u015ft\u0131r\u0131p \u00e7\u0131kmak i\u00e7in kullan\u0131l\u0131r. Varsay\u0131lan olarak, testler dosya de\u011fi\u015fikliklerini izler ve de\u011fi\u015fiklik oldu\u011funda yeniden \u00e7al\u0131\u015f\u0131r.<\/p>\n
ng e2e: U\u00e7tan Uca Testleri \u00c7al\u0131\u015ft\u0131rma<\/h4>\n
U\u00e7tan uca (End-to-End) testler, uygulaman\u0131z\u0131n ger\u00e7ek bir kullan\u0131c\u0131 gibi \u00e7al\u0131\u015f\u0131p \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 do\u011frular. Geleneksel olarak Angular CLI, Protractor’\u0131 varsay\u0131lan e2e test framework’\u00fc olarak kullanm\u0131\u015ft\u0131r. Ancak, Protractor’\u0131n aktif geli\u015fimi durdu\u011fu i\u00e7in, g\u00fcncel Angular projelerinde Cypress veya Playwright gibi daha modern e2e test ara\u00e7lar\u0131 tercih edilmektedir.<\/p>\n
E\u011fer projenizde hala Protractor kuruluysa:<\/p>\n
ng e2e<\/code><\/pre>\n
Yeni projelerde ng e2e<\/code> komutu art\u0131k varsay\u0131lan olarak gelmeyebilir. Bir e2e test framework’\u00fc eklemek i\u00e7in ng add<\/code> komutunu kullanman\u0131z gerekebilir, \u00f6rne\u011fin:<\/p>\n
ng add @cypress\/schematic\n
veya<\/h2>\nng add @playwright\/schematic<\/code><\/pre>\n
Bu komutlar, se\u00e7ti\u011finiz e2e test framework’\u00fcn\u00fc projenize entegre eder ve gerekli yap\u0131land\u0131rmalar\u0131 yapar.<\/p>\n
ng lint: Kod Kalitesi Kontrol\u00fc<\/h4>\n
ng lint<\/code> komutu, projenizdeki kodun stil ve kalitesini kontrol etmek i\u00e7in kullan\u0131l\u0131r. ESLint gibi ara\u00e7larla entegre olarak \u00e7al\u0131\u015f\u0131r ve kodunuzdaki potansiyel hatalar\u0131, stil ihlallerini ve en iyi uygulama uyumsuzluklar\u0131n\u0131 bulman\u0131za yard\u0131mc\u0131 olur.<\/p>\n
ng lint<\/code><\/pre>\n
Bu komut, yap\u0131land\u0131rman\u0131za g\u00f6re kodunuzu analiz eder ve sorunlar\u0131 raporlar. Kod kalitesini korumak ve ekip i\u00e7inde tutarl\u0131 bir kod stili sa\u011flamak i\u00e7in d\u00fczenli olarak ng lint<\/code> \u00e7al\u0131\u015ft\u0131rmak \u00f6nemlidir.<\/p>\n
ng update: Angular ve Ba\u011f\u0131ml\u0131l\u0131klar\u0131 G\u00fcncelleme<\/h4>\n
Angular ekibi, framework’\u00fc d\u00fczenli olarak g\u00fcnceller ve yeni \u00f6zellikler, performans iyile\u015ftirmeleri ve g\u00fcvenlik yamalar\u0131 sunar. ng update<\/code> komutu, Angular ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kolayca g\u00fcncellemenizi sa\u011flar.<\/p>\n
ng update<\/code><\/pre>\n
Bu komut, projenizdeki t\u00fcm @angular<\/code> paketlerini kontrol eder ve en son kararl\u0131 s\u00fcr\u00fcmlerine y\u00fckseltme \u00f6nerileri sunar.<\/p>\n
*   Belirli Paketleri G\u00fcncelleme:<\/strong> Belirli paketleri g\u00fcncellemek i\u00e7in paket adlar\u0131n\u0131 belirtebilirsiniz:<\/p>\n
ng update @angular\/core @angular\/cli<\/code><\/pre>\n
*   Otomatik Migrasyonlar:<\/strong> Angular CLI’\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, g\u00fcncellemeler s\u0131ras\u0131nda otomatik migrasyon (ge\u00e7i\u015f) \u015femalar\u0131 \u00e7al\u0131\u015ft\u0131rmas\u0131d\u0131r. Bu \u015femalar, eski s\u00fcr\u00fcmlerden yeni s\u00fcr\u00fcmlere ge\u00e7erken kodunuzda yap\u0131lmas\u0131 gereken de\u011fi\u015fiklikleri otomatik olarak yapar, b\u00f6ylece manuel d\u00fczeltme ihtiyac\u0131n\u0131 azalt\u0131r.<\/p>\n
ng add: Harici K\u00fct\u00fcphaneleri Entegre Etme<\/h4>\n
ng add<\/code> komutu, Angular projenize \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneleri (Angular Material, PWA, Firebase gibi) eklemek i\u00e7in kullan\u0131l\u0131r. Bu komut, sadece paketi y\u00fcklemekle kalmaz, ayn\u0131 zamanda k\u00fct\u00fcphaneyi projenize entegre etmek i\u00e7in gerekli yap\u0131land\u0131rma de\u011fi\u015fikliklerini de otomatik olarak yapar.<\/p>\n
ng add @angular\/material<\/code><\/pre>\n
Bu komut, Angular Material k\u00fct\u00fcphanesini y\u00fckler, angular.json<\/code> dosyas\u0131n\u0131 g\u00fcnceller, gerekli stilleri ekler ve hatta size ba\u015flang\u0131\u00e7 \u015fablonlar\u0131 sunabilir. Bu, manuel yap\u0131land\u0131rma hatalar\u0131n\u0131 \u00f6nler ve kurulum s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/p>\n
ng deploy: Uygulamay\u0131 Da\u011f\u0131tma<\/h4>\n
Angular CLI, ng deploy<\/code> komutu ile uygulaman\u0131z\u0131 do\u011frudan \u00e7e\u015fitli bar\u0131nd\u0131rma sa\u011flay\u0131c\u0131lar\u0131na da\u011f\u0131tma yetene\u011fi sunar. Bu \u00f6zellik, ng add<\/code> komutuyla eklenen da\u011f\u0131t\u0131m schematics’leri sayesinde \u00e7al\u0131\u015f\u0131r.<\/p>\n
\u00d6rne\u011fin, Firebase’e da\u011f\u0131tmak i\u00e7in:<\/p>\n
ng add @angular\/fire\nng deploy<\/code><\/pre>\n
Bu komutlar, Firebase’i projenize entegre eder ve ard\u0131ndan uygulaman\u0131z\u0131 Firebase Hosting’e da\u011f\u0131tman\u0131z\u0131 sa\u011flar. Bu \u00f6zellik, da\u011f\u0131t\u0131m s\u00fcrecini basitle\u015ftirir ve geli\u015ftiricilerin daha h\u0131zl\u0131 bir \u015fekilde canl\u0131ya \u00e7\u0131kmas\u0131n\u0131 sa\u011flar.<\/p>\n
Angular CLI ile Geli\u015fmi\u015f Kullan\u0131m \u0130pu\u00e7lar\u0131<\/h3>\n
Angular CLI’\u0131n temel komutlar\u0131n\u0131n \u00f6tesinde, geli\u015ftirme s\u00fcrecinizi daha da optimize edebilecek baz\u0131 geli\u015fmi\u015f \u00f6zellikler de bulunmaktad\u0131r.<\/p>\n
Ortam De\u011fi\u015fkenleri (Environment Variables)<\/h4>\n
Angular CLI, uygulaman\u0131z\u0131n farkl\u0131 ortamlar (geli\u015ftirme, \u00fcretim, test) i\u00e7in farkl\u0131 yap\u0131land\u0131rmalara sahip olmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Bu, src\/environments\/<\/code> dizinindeki dosyalar arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r:<\/p>\n
*   environment.ts<\/code>: Geli\u015ftirme ortam\u0131 i\u00e7in yap\u0131land\u0131rma.
\n*   environment.prod.ts<\/code>: \u00dcretim ortam\u0131 i\u00e7in yap\u0131land\u0131rma.<\/p>\n
Bu dosyalar\u0131 kullanarak, \u00f6rne\u011fin farkl\u0131 API URL’leri veya \u00f6zellik bayraklar\u0131 tan\u0131mlayabilirsiniz:<\/p>\n
\/\/ environment.ts\nexport const environment = {\n  production: false,\n  apiUrl: 'http:\/\/localhost:3000\/api'\n};\n\n\/\/ environment.prod.ts\nexport const environment = {\n  production: true,\n  apiUrl: 'https:\/\/api.yourdomain.com\/api'\n};<\/code><\/pre>\n
Derleme yaparken --configuration=production<\/code> bayra\u011f\u0131n\u0131 kulland\u0131\u011f\u0131n\u0131zda, CLI otomatik olarak environment.prod.ts<\/code> dosyas\u0131n\u0131 kullan\u0131r. Kendi \u00f6zel ortamlar\u0131n\u0131z\u0131 da angular.json<\/code> dosyas\u0131nda tan\u0131mlayabilirsiniz.<\/p>\n
Proxy Yap\u0131land\u0131rmas\u0131 (Proxy Configuration)<\/h4>\n
Geli\u015ftirme s\u0131ras\u0131nda, Angular uygulaman\u0131z\u0131n (genellikle localhost:4200<\/code> \u00fczerinde \u00e7al\u0131\u015f\u0131r) bir backend API’sine (\u00f6rne\u011fin localhost:3000<\/code> \u00fczerinde \u00e7al\u0131\u015f\u0131r) istek g\u00f6ndermesi gerekebilir. Taray\u0131c\u0131lar\u0131n ayn\u0131 kaynak politikas\u0131 (CORS) nedeniyle do\u011frudan istekler engellenebilir. Angular CLI, bu sorunu \u00e7\u00f6zmek i\u00e7in bir proxy yap\u0131land\u0131rmas\u0131 sunar.<\/p>\n
Bir proxy.conf.json<\/code> dosyas\u0131 olu\u015fturarak API isteklerini geli\u015ftirme sunucusundan y\u00f6nlendirebilirsiniz:<\/p>\n
\/\/ proxy.conf.json\n{\n  \"\/api\": {\n    \"target\": \"http:\/\/localhost:3000\",\n    \"secure\": false,\n    \"changeOrigin\": true\n  }\n}<\/code><\/pre>\n
Bu yap\u0131land\u0131rma, http:\/\/localhost:4200\/api\/users<\/code> adresine yap\u0131lan bir iste\u011fi http:\/\/localhost:3000\/api\/users<\/code> adresine y\u00f6nlendirir. Ard\u0131ndan, ng serve<\/code> komutunu bu proxy yap\u0131land\u0131rmas\u0131yla \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
ng serve --proxy-config proxy.conf.json<\/code><\/pre>\n
Bu, geli\u015ftirme s\u00fcrecinde CORS sorunlar\u0131n\u0131 a\u015fmak i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\u00c7oklu Uygulama ve K\u00fct\u00fcphane Y\u00f6netimi (Monorepo ile Multiple Apps\/Libraries)<\/h4>\n
Angular CLI, bir \u00e7al\u0131\u015fma alan\u0131 (workspace) i\u00e7inde birden fazla Angular uygulamas\u0131 ve k\u00fct\u00fcphanesi y\u00f6netmenize olanak tan\u0131yan monorepo yap\u0131s\u0131n\u0131 destekler. Bu, b\u00fcy\u00fck \u00f6l\u00e7ekli projeler veya payla\u015f\u0131lan bile\u015fen k\u00fct\u00fcphaneleri geli\u015ftiren ekipler i\u00e7in \u00e7ok faydal\u0131d\u0131r.<\/p>\n
*   Yeni Bir Uygulama Olu\u015fturma:<\/strong> Mevcut bir \u00e7al\u0131\u015fma alan\u0131 i\u00e7inde yeni bir uygulama olu\u015fturmak i\u00e7in:<\/p>\n
ng generate application my-second-app<\/code><\/pre>\n
    Bu komut, \u00e7al\u0131\u015fma alan\u0131n\u0131z\u0131n projects\/<\/code> dizini alt\u0131na yeni bir uygulama olu\u015fturur.<\/p>\n
*   K\u00fct\u00fcphane Olu\u015fturma:<\/strong> Yeniden kullan\u0131labilir bile\u015fenler, servisler veya mod\u00fcller i\u00e7eren bir k\u00fct\u00fcphane olu\u015fturmak i\u00e7in:<\/p>\n
ng generate library my-shared-library<\/code><\/pre>\n
    Bu komut, projects\/my-shared-library\/<\/code> dizini alt\u0131nda bir k\u00fct\u00fcphane projesi olu\u015fturur. Bu k\u00fct\u00fcphane, \u00e7al\u0131\u015fma alan\u0131n\u0131zdaki di\u011fer uygulamalar taraf\u0131ndan kolayca kullan\u0131labilir.<\/p>\n
Bu yakla\u015f\u0131m, kod tekrar\u0131n\u0131 azalt\u0131r, ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimini merkezile\u015ftirir ve b\u00fcy\u00fck projelerde mod\u00fclerli\u011fi art\u0131r\u0131r.<\/p>\n
\u00d6zel Schematics Olu\u015fturma<\/h4>\n
ng generate<\/code> ve ng add<\/code> komutlar\u0131n\u0131n arkas\u0131ndaki mekanizma Schematics’tir. Schematics, dosya olu\u015fturma, kod d\u00f6n\u00fc\u015ft\u00fcrme ve proje yap\u0131land\u0131rma gibi g\u00f6revleri otomatikle\u015ftiren bir ara\u00e7 setidir. Kendi \u00f6zel schematics’lerinizi olu\u015fturarak, projenize \u00f6zel boilerplate kodlar\u0131n\u0131 veya belirli bir deseni otomatik olarak uygulayabilirsiniz. Bu, \u00f6zellikle b\u00fcy\u00fck ekiplerde veya belirli bir kod stilini zorunlu k\u0131lmak istedi\u011finizde \u00e7ok g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n
S\u0131k\u00e7a Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n
Angular CLI ile \u00e7al\u0131\u015f\u0131rken baz\u0131 yayg\u0131n sorunlarla kar\u015f\u0131la\u015fabilirsiniz. \u0130\u015fte bunlardan baz\u0131lar\u0131 ve \u00e7\u00f6z\u00fcmleri:<\/p>\n
*   Node.js Versiyon Uyumsuzluklar\u0131:<\/strong> Angular’\u0131n belirli s\u00fcr\u00fcmleri, Node.js’in belirli s\u00fcr\u00fcmleriyle en iyi \u015fekilde \u00e7al\u0131\u015f\u0131r. ng version<\/code> \u00e7\u0131kt\u0131s\u0131n\u0131 kontrol ederek Node.js s\u00fcr\u00fcm\u00fcn\u00fcz\u00fcn uyumlu oldu\u011fundan emin olun. Gerekirse Node.js’i g\u00fcncelleyin veya NVM (Node Version Manager) gibi bir ara\u00e7 kullanarak farkl\u0131 Node.js s\u00fcr\u00fcmleri aras\u0131nda ge\u00e7i\u015f yap\u0131n.<\/p>\n
*   Port \u00c7ak\u0131\u015fmalar\u0131:<\/strong> ng serve<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda Port 4200 is already in use.<\/code> gibi bir hata alabilirsiniz. Bu, 4200 numaral\u0131 portun ba\u015fka bir uygulama taraf\u0131ndan kullan\u0131ld\u0131\u011f\u0131 anlam\u0131na gelir.
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> ng serve --port 4201<\/code> gibi farkl\u0131 bir port belirterek uygulamay\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n.<\/p>\n
*   ng<\/code> Komutu Bulunam\u0131yor:<\/strong> ng<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda command not found<\/code> hatas\u0131 al\u0131yorsan\u0131z, Angular CLI’\u0131n global olarak do\u011fru bir \u015fekilde y\u00fcklenmedi\u011fi veya PATH de\u011fi\u015fkeninizde olmad\u0131\u011f\u0131 anlam\u0131na gelir.
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> npm install -g @angular\/cli<\/code> komutunu tekrar \u00e7al\u0131\u015ft\u0131r\u0131n. Y\u00f6netici (Administrator) veya root yetkileriyle \u00e7al\u0131\u015ft\u0131rman\u0131z gerekebilir.<\/p>\n
*   ng build<\/code> Hatalar\u0131:<\/strong> Derleme s\u0131ras\u0131nda TypeScript hatalar\u0131 veya ba\u011f\u0131ml\u0131l\u0131k sorunlar\u0131 ya\u015fanabilir.
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> Hata mesajlar\u0131n\u0131 dikkatlice okuyun. Genellikle, eksik ba\u011f\u0131ml\u0131l\u0131klar i\u00e7in npm install<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmak veya TypeScript hatalar\u0131n\u0131 d\u00fczeltmek sorunu \u00e7\u00f6zer. node_modules<\/code> klas\u00f6r\u00fcn\u00fc silip npm install<\/code> komutunu yeniden \u00e7al\u0131\u015ft\u0131rmak da bazen i\u015fe yarar.<\/p>\n
*   Cache Sorunlar\u0131:<\/strong> Nadiren, npm veya Angular CLI’\u0131n \u00f6nbelle\u011fi bozulabilir ve beklenmedik sorunlara yol a\u00e7abilir.
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> npm cache clean --force<\/code> komutuyla npm \u00f6nbelle\u011fini temizlemeyi deneyin.<\/p>\n
*   G\u00fcncelleme Sonras\u0131 Sorunlar:<\/strong> ng update<\/code> sonras\u0131 uygulaman\u0131zda beklenmedik davran\u0131\u015flar olu\u015fabilir.
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> Angular dok\u00fcmantasyonundaki g\u00fcncelleme k\u0131lavuzlar\u0131n\u0131 inceleyin. Bazen manuel olarak yap\u0131lmas\u0131 gereken k\u00fc\u00e7\u00fck de\u011fi\u015fiklikler olabilir. ng update<\/code> komutunu --force<\/code> veya --allow-dirty<\/code> bayraklar\u0131yla \u00e7al\u0131\u015ft\u0131rmak da yard\u0131mc\u0131 olabilir, ancak dikkatli kullan\u0131lmal\u0131d\u0131r.<\/p>\n
Sonu\u00e7<\/h3>\n
Angular CLI, modern Angular geli\u015ftirme s\u00fcrecinin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Proje olu\u015fturmaktan kod \u00fcretmeye, test etmekten \u00fcretim i\u00e7in derlemeye kadar her ad\u0131mda geli\u015ftiricilere yard\u0131mc\u0131 olan g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir ara\u00e7t\u0131r. Bu makalede ele ald\u0131\u011f\u0131m\u0131z komutlar ve ipu\u00e7lar\u0131, Angular d\u00fcnyas\u0131na sa\u011flam bir ba\u015flang\u0131\u00e7 yapman\u0131z ve geli\u015ftirme verimlili\u011finizi art\u0131rman\u0131z i\u00e7in size temel bir yol haritas\u0131 sunmaktad\u0131r.<\/p>\n
Angular CLI’\u0131n sundu\u011fu otomasyon ve standartla\u015fma sayesinde, geli\u015ftiriciler tekrarlayan g\u00f6revlerle bo\u011fu\u015fmak yerine, uygulaman\u0131n \u00e7ekirdek mant\u0131\u011f\u0131na ve kullan\u0131c\u0131 deneyimine odaklanabilirler. Bu da daha h\u0131zl\u0131 geli\u015ftirme d\u00f6ng\u00fcleri, daha kaliteli kod ve sonu\u00e7 olarak daha ba\u015far\u0131l\u0131 Angular uygulamalar\u0131 anlam\u0131na gelir.<\/p>\n
Unutmay\u0131n ki Angular ekosistemi s\u00fcrekli geli\u015fmektedir. Angular CLI’\u0131n en son \u00f6zelliklerinden ve en iyi uygulamalar\u0131ndan haberdar olmak i\u00e7in resmi Angular dok\u00fcmantasyonunu d\u00fczenli olarak takip etmeniz \u00f6nemlidir. \u015eimdi, Angular CLI ile donanm\u0131\u015f olarak, kendi harika web uygulamalar\u0131n\u0131z\u0131 olu\u015fturmaya haz\u0131rs\u0131n\u0131z!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak\nAngular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-32623","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak\" \/>\n<meta property=\"og:description\" content=\"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-23T22:41:02+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak\",\"datePublished\":\"2025-10-23T22:41:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\"},\"wordCount\":3840,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\",\"name\":\"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-23T22:41:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak","og_description":"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-23T22:41:02+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"22 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak","datePublished":"2025-10-23T22:41:02+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/"},"wordCount":3840,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/","name":"Angular CLI ile Angular'a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-23T22:41:02+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-cli-ile-angulara-hizli-bir-baslangic-yapmak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular CLI ile Angular’a H\u0131zl\u0131 Bir Ba\u015flang\u0131\u00e7 Yapmak"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32623"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32623\/revisions"}],"predecessor-version":[{"id":32624,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32623\/revisions\/32624"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}