<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular 8 ile gelen dynamic imports for lazy routes yenili\u011fi \u00fczerine konu\u015fuyor olaca\u011f\u0131z. Esas\u0131nda Lazy Loading Angular mimarisi i\u00e7in pekte yeni bir \u00f6zellik say\u0131lmaz. \u00d6nceki yaz\u0131lar\u0131mda, k\u00e2h Angular ile ilgili yaz\u0131 dizimizde k\u00e2h di\u011fer makalelerimizde Angular’da Lazy Loading mekanizmas\u0131ndan hi\u00e7 bahsetmemi\u015f oldu\u011fumdan dolay\u0131 ilgili i\u00e7eri\u011fimizde \u00f6ncelikle Angular’\u0131n \u00f6nceki s\u00fcr\u00fcmlerinde Lazy Loading mekanizmas\u0131n\u0131n neye yarad\u0131\u011f\u0131n\u0131 ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 konu\u015faca\u011f\u0131z ve bununla beraber Angular 8’de s\u00f6z konusu mekanizma \u00fczerinde nas\u0131l bir yenilik ger\u00e7ekle\u015ftirildi\u011fi hakk\u0131nda irdelemede bulunaca\u011f\u0131z.<\/p>\n

Lazy Loading Nedir?<\/h3>\n

Hi\u00e7 bilmeyenler i\u00e7in lazy loading’i izah edersek e\u011fer Tembel Y\u00fckleme diyebiliriz. Yani bir uygulamay\u0131 komple bir b\u00fct\u00fcn olarak clienta indirtmektense kulland\u0131k\u00e7a par\u00e7a par\u00e7a indirmesini sa\u011flamakt\u0131r. Bu web uygulamalar\u0131nda yapm\u0131\u015f oldu\u011fumuz Scroll Paging<\/a> yahut sayfada ekrana geldik\u00e7e foto\u011fraflar\u0131n ge\u00e7 y\u00fcklenmesi olay\u0131n\u0131n ta kendisidir…<\/p>\n

Angular uygulamalar\u0131nda Lazy Loading, uygulama aya\u011fa kald\u0131r\u0131l\u0131r kald\u0131r\u0131lmaz t\u00fcm componentlerin derlenip taray\u0131c\u0131ya hepsinin birden kaba tabirle bodoslama y\u00fcklenmesinden ziyade yap\u0131lan isteklere kar\u015f\u0131l\u0131k par\u00e7a par\u00e7a y\u00fcklenmesini sa\u011flayan bir mekanizmad\u0131r. Burada m\u00fchim olan nokta \u015fudur ki, bir component lazy loading ile y\u00fcklendikten sonra ilgili componente yap\u0131lan t\u00fcm isteklerde bir daha y\u00fcklenme i\u015flemi ger\u00e7ekle\u015fmeyecek ve \u00f6nceki y\u00fcklenen component taraf\u0131m\u0131za geri d\u00f6nd\u00fcr\u00fclecektir. Buda ekstradan performans a\u00e7\u0131s\u0131ndan verim demektir…<\/p>\n

\u015eimdi Angular’da lazy loading’i inceleyebilmek i\u00e7in her\u015feyden \u00f6nce makalemizde kullanaca\u011f\u0131m\u0131z componentleri a\u015fa\u011f\u0131daki gibi olu\u015ftural\u0131m;<\/p>\n

\r\nng g c components\/personels\/ekle --spec false\r\nng g c components\/personels\/listele --spec false\r\nng g c components\/personels\/detay --spec false   \r\nng g c components\/musteris\/ekle --spec false\r\nng g c components\/musteris\/listele --spec false\r\nng g c components\/musteris\/detay --spec false\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “musteri” ve “personel” operasyonlar\u0131 i\u00e7in “ekle”, “listele” ve “detay” olmak \u00fczere \u00fc\u00e7er tane component olu\u015fturmu\u015f bulunmaktay\u0131z. \u015eimdi gelin ilk olarak bu componentleri lazy loading kullanmaks\u0131z\u0131n uygulamam\u0131z\u0131 in\u015fa edelim.<\/p>\nLazy Loading Kullan\u0131lmad\u0131\u011f\u0131 Durum<\/h3>\nUygulamada kullan\u0131lan t\u00fcm componentleri direkt olarak kullanabilmek i\u00e7in ana dizinde olu\u015fturulmu\u015f ve route yap\u0131lanmas\u0131ndan sorumlu “AppRoutingModule” \u00fczerinden url rotalar\u0131n\u0131 ayarl\u0131yoruz. <\/p>\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\nimport { EkleComponent } from '.\/components\/personels\/ekle\/ekle.component';\r\nimport { ListeleComponent } from '.\/components\/personels\/listele\/listele.component';\r\nimport { DetayComponent } from '.\/components\/personels\/detay\/detay.component';\r\n\r\nimport { EkleComponent as MusteriEkle} from '.\/components\/musteris\/ekle\/ekle.component';\r\nimport { ListeleComponent as MusteriListele } from '.\/components\/musteris\/listele\/listele.component';\r\nimport { DetayComponent as MusteriDetay } from '.\/components\/musteris\/detay\/detay.component';\r\n\r\nconst routes: Routes = [\r\n  { path: "personel\/ekle", component: EkleComponent },\r\n  { path: "personel\/listele", component: ListeleComponent },\r\n  { path: "personel\/detay\/:id", component: DetayComponent },\r\n  { path: "musteri\/ekle", component: MusteriEkle },\r\n  { path: "musteri\/listele", component: MusteriListele },\r\n  { path: "personmusteriel\/detay\/:id", component: MusteriDetay },\r\n];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/pre>\nBu i\u015flem neticesinde art\u0131k bu componentleri direkt kullanabiliriz. “app.component.html” dosyas\u0131na gelip a\u015fa\u011f\u0131daki gibi bir tasar\u0131msal \u00e7al\u0131\u015fmada bulunuyoruz.<\/p>\n\r\n<nav class="navbar navbar-expand-lg navbar-light bg-light">\r\n  <a class="navbar-brand" href="#">Navbar<\/a>\r\n  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">\r\n    <span class="navbar-toggler-icon"><\/span>\r\n  <\/button>\r\n  <div class="collapse navbar-collapse" id="navbarNavDropdown">\r\n    <ul class="navbar-nav">\r\n      <li class="nav-item active">\r\n        <a class="nav-link" routerLink="personel\/ekle">Personel Ekle <span class="sr-only">(current)<\/span><\/a>\r\n      <\/li>\r\n      <li class="nav-item active">\r\n        <a class="nav-link" routerLink="personel\/listele">Personelleri Listele <span class="sr-only">(current)<\/span><\/a>\r\n      <\/li>\r\n      <li class="nav-item active">\r\n        <a class="nav-link" routerLink="musteri\/ekle">M\u00fc\u015fteri Ekle <span class="sr-only">(current)<\/span><\/a>\r\n      <\/li>\r\n      <li class="nav-item active">\r\n        <a class="nav-link" routerLink="musteri\/listele">M\u00fc\u015fterileri Listele <span class="sr-only">(current)<\/span><\/a>\r\n      <\/li>\r\n      \r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>\r\n\r\n<router-outlet><\/router-outlet>\r\n<\/pre>\nUygulamay\u0131 derleyip yay\u0131na ald\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi t\u00fcm componentler tek seferde y\u00fcklenmi\u015f bulunmaktad\u0131r.
\n<\/a><\/p>\n
Angular 8’den \u00d6nceki Lazy Loading Kullan\u0131m\u0131<\/h3>\nAngular uygulamalar\u0131nda Lazy Loading uygulayabilmek i\u00e7in yap\u0131lmas\u0131 gereken temel esas \u015fudur ki, her bir component ya da component k\u00fcmesi i\u00e7in ayr\u0131 bir module olu\u015fturmal\u0131 ve bu mod\u00fclleri uygulamaya loadChildren olarak refere etmeliyiz. Bu i\u015flem Angular 8 s\u00fcr\u00fcm\u00fc i\u00e7inde ge\u00e7erlidir. \u015eimdi Angular 8’den \u00f6nceki s\u00fcr\u00fcmlerde lazy loading’in nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 konu\u015fal\u0131m. Ard\u0131ndan esas konumuz olan Angular 8 ile lazy loading yap\u0131land\u0131rmas\u0131na gelen yenili\u011fi ele alaca\u011f\u0131z.<\/p>\n
\u015eimdi ilk olarak senaryodaki m\u00fc\u015fteri ve personel componentlerini kar\u015f\u0131layacak olan birer mod\u00fcl olu\u015ftural\u0131m.
\n– MusterisModule<\/p>\n\r\nng g m components\/musteris\r\nng g m components\/personels\r\n<\/pre>\nArd\u0131ndan s\u0131ras\u0131yla bu mod\u00fcller i\u00e7erisinde ilgili componentlerin route yap\u0131lanmas\u0131n\u0131 tasarlayal\u0131m.<\/p>\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { CommonModule } from '@angular\/common';\r\nimport { RouterModule } from '@angular\/router';\r\nimport { EkleComponent } from '.\/ekle\/ekle.component';\r\nimport { ListeleComponent } from '.\/listele\/listele.component';\r\nimport { DetayComponent } from '.\/detay\/detay.component';\r\n\r\n@NgModule({\r\n  declarations: [EkleComponent, ListeleComponent, DetayComponent],\r\n  imports: [\r\n    CommonModule,\r\n    RouterModule.forChild([\r\n      { path: "ekle", component: EkleComponent },\r\n      { path: "listele", component: ListeleComponent },\r\n      { path: "detay\/:id", component: DetayComponent },\r\n    ])\r\n  ]\r\n})\r\nexport class MusterisModule { }\r\n<\/pre>\n– PersonelsModule <\/p>\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { CommonModule } from '@angular\/common';\r\nimport { RouterModule } from '@angular\/router';\r\nimport { EkleComponent } from '.\/ekle\/ekle.component';\r\nimport { ListeleComponent } from '.\/listele\/listele.component';\r\nimport { DetayComponent } from '.\/detay\/detay.component';\r\n\r\n@NgModule({\r\n  declarations: [EkleComponent, ListeleComponent, DetayComponent],\r\n  imports: [\r\n    CommonModule,\r\n    RouterModule.forChild([\r\n      { path: "ekle", component: EkleComponent },\r\n      { path: "listele", component: ListeleComponent },\r\n      { path: "detay\/:id", component: DetayComponent },\r\n    ])\r\n  ]\r\n})\r\nexport class PersonelsModule { }\r\n<\/pre>\nBurada her ne kadar sizin g\u00f6z\u00fcn\u00fczden ka\u00e7mayaca\u011f\u0131na emin olsamda yinede ben tekrardan hat\u0131rlatmak istiyorum ki, mod\u00fcllerde eklenen componentleri “declarations” \u00f6zelli\u011fine eklemeyi unutmay\u0131n\u0131z…<\/p>\n
Bu ad\u0131mdan sonra yap\u0131lmas\u0131 gereken, olu\u015fturulan bu mod\u00fclleri uygulaman\u0131n ana routing mekanizmas\u0131 olan “AppRoutingModule” dosyas\u0131nda a\u015fa\u011f\u0131daki gibi import ederek, mod\u00fcler entegrasyon \u00fczerinden uygulamay\u0131 kurgulamay\u0131 ve b\u00f6ylece lazy loading mekanizmas\u0131ndan da faydalanmay\u0131 sa\u011flamam\u0131z gerekmektedir.<\/p>\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\n\r\nconst routes: Routes = [\r\n  { path: "musteri", loadChildren: ".\/components\/musteris\/musteris.module#MusterisModule" },\r\n  { path: "personel", loadChildren: ".\/components\/personels\/personels.module#PersonelsModule" },\r\n];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/pre>\nYukar\u0131daki routes tan\u0131mlamas\u0131n\u0131 incelerseniz e\u011fer, olu\u015fturulan path’in kar\u015f\u0131l\u0131\u011f\u0131n\u0131 “loadChildren” \u00f6zelli\u011fi ile elimizdeki mod\u00fclerin dizinlerini g\u00f6stererek belirtmekteyiz. Angular 8’den \u00f6nceki s\u00fcr\u00fcmlerde \u00f6zellikle bu tan\u0131mlamada ilgili mod\u00fcl\u00fcn class name de\u011ferini “#”(diyez) karakteri ile ilgili dizin de\u011ferinin sonuna belirtmemiz gerekiyor.<\/p>\n
Ve son olarak ana mod\u00fcl\u00fcm\u00fcz olan “AppModule” s\u0131n\u0131f\u0131n\u0131da a\u015fa\u011f\u0131daki gibi ele alal\u0131m.<\/p>\n\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nDikkat ederseniz e\u011fer “AppModule” s\u0131n\u0131f\u0131nda olu\u015fturdu\u011fumuz mod\u00fcllerimizden herhangi birini import etmemekteyiz. \u00c7\u00fcnk\u00fc gerekli import i\u015flemi “AppRoutingModule” s\u0131n\u0131f\u0131nda ger\u00e7ekle\u015ftirilmi\u015ftir.<\/p>\n\u015eimdi uygulamay\u0131 derleyip aya\u011fa kald\u0131ral\u0131m ve mod\u00fcler yap\u0131lanma ile elde edilen uygulama \u00fczerinden yap\u0131lan istekler e\u015fli\u011finde her bir componentin istek neticesinde y\u00fcklendi\u011fini g\u00f6zlemleyelim.
\n<\/a>
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere uygulamada componentleri local mod\u00fcller \u00fczerinden “loadChildren” ile referans etti\u011fimiz taktirde lazy loading mekanizmas\u0131 devreye girmekte ve componentlerimiz istekler neticesinde ihtiyaca istinaden y\u00fcklenmektedir. <\/p>\n
\u0130\u015fte Angular 8 \u00f6ncesi lazy loading kullan\u0131m\u0131 bu \u015fekilde ger\u00e7ekle\u015ftirilmektedir. Peki hocam, Angular 8’de ki yenilik ne ola ki?<\/strong><\/em> sorunuzu duyar gibiyim… Hadi fazla sabr\u0131n\u0131z\u0131 s\u0131namadan esas konumuza gelelim.<\/p>\n
Angular 8 Lazy Loading Kullan\u0131m\u0131<\/h3>\nAngular mimarisinde lazy loading rotalar\u0131n\u0131n metinsel olarak belirtilmesinden ve b\u00f6ylece yap\u0131lan dizin yahut isim hatas\u0131ndan dolay\u0131 olas\u0131 hatalar\u0131n meydana gelme riskinin artmas\u0131ndan dolay\u0131 dinamik i\u00e7e aktarma s\u00f6zdizimi kullan\u0131lmak \u00fczere Angular 8 s\u00fcr\u00fcm\u00fcnde yeni bir \u00f6zellik gelmektedir. Dolay\u0131s\u0131yla, yolu yanl\u0131\u015f girilen ya da ismi hatal\u0131 belirtilen mod\u00fcl\u00fcn daha rahat ay\u0131rt edilebilmesi beklenmekte ve al\u0131nacak hatalar\u0131n kayna\u011f\u0131 do\u011frudan alg\u0131lanabilece\u011fi d\u00fc\u015f\u00fcn\u00fclmektedir. Velhas\u0131l en nihayetinde Dynamic Imports For Lazy Loading<\/em> yenili\u011fini kullanabilmek i\u00e7in “AppRoutingModule” s\u0131n\u0131f\u0131nda tasarlanan rotalar\u0131 a\u015fa\u011f\u0131daki gibi import etmemiz yeterlidir.<\/p>\n
\r\nimport { NgModule } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\n\r\nconst routes: Routes = [\r\n  { path: "musteri", loadChildren: () => import(".\/components\/musteris\/musteris.module").then(x => x.MusterisModule) },\r\n  { path: "personel", loadChildren: () => import(".\/components\/personels\/personels.module").then(x => x.PersonelsModule) },\r\n];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/pre>\nEvet… B\u00f6ylece Angular 8’de gelen Lazy Loading s\u00f6zdizimindeki yenili\u011fi, \u00f6nceki s\u00fcr\u00fcmlerle mukayese niteli\u011finde incelemi\u015f ve de\u011ferlendirmi\u015f olduk. <\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular 8 ile gelen dynamic imports for lazy routes yenili\u011fi \u00fczerine konu\u015fuyor olaca\u011f\u0131z. Esas\u0131nda Lazy Loading Angular mimarisi i\u00e7in pekte yeni bir \u00f6zellik say\u0131lmaz. \u00d6nceki yaz\u0131lar\u0131mda, k\u00e2h Angular ile ilgili yaz\u0131...<\/p>\n","protected":false},"author":1,"featured_media":12154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3018],"tags":[3019,3020,3021,1046],"class_list":["post-12115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-8","tag-angular-8","tag-angular-8-lazy-loading","tag-angular-8-yenilikleri","tag-lazy-loading"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/12115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=12115"}],"version-history":[{"count":37,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/12115\/revisions"}],"predecessor-version":[{"id":12155,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/12115\/revisions\/12155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/12154"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=12115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=12115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=12115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}