Yandex Metrica
Angular'da 404 Hata Sayfası Oluşturma - Yasin Sunmaz

Yasin Sunmaz

Kodladıkça değişen bir dünya...

Angular'da 404 Hata Sayfası Oluşturma

13.02.2022 yasinsunmaz 677 0

Angular routing ve navigation işlemlerimizin yanında 404 sayfasına da ihtiyacımız olacaktır. Url yanlış girildi ise ya da sayfada genel bir problem var ise mevcut sayfayı hatalı bir şekilde göstermek yerine 404 hata sayfalarına yönlendirmek en doğrusu olacaktır. Bu sayede kullanıcılara hatalı sayfalar ve bu hataların neler olduğunu görmelerine izin vermeden sizin istediğiniz hata sayfasını görecektir. Böylece kullanıcı açısında da hem de sizin açınızdan kullanışlı ve uygun olacaktır.

Peki 404 hata sayfalarını Angular'da nasıl yapabiliriz? Gelelim Angular 404 hata sayfasının hazırlanışına.

İlk olarak hata sayfası için bir component oluşturmamız gerekiyor. Bu componente "notfound" ya da "404" gibi isimler verebilirsiniz.

ng g c notfound

Componentimiz oluştuktan sonra içerisinde istediğimiz şekilde HTML ve CSS ile güzel bir tasarım hazırlayabiliriz. Bu tamamen size kalmıştır. Basit bir şekilde yaparsak:

notfound.component.html

Sayfa Bulunamadı

Üzgünüz, aradığınız sayfayı bulamadık. Bu sayfanın adresini yanlış girimiş olabilir ya da sayfa bozulmuş olabilir.

Bu HTML sayfamız için biraz CSS ile yazılarımızı biçimlendirebiliriz.

notfound.component.css

h1{
color:red;
font-weight:bold;
}
p{
font-size:22px;
font-weight:bold;
}

404 hata sayfamızın tasarımı şuan için tamamlandı. Son adım olarak bu sayfamızı app-routing.module.ts içerinde çağırarak gerekli tanımlamaları yapmamız gerek. Bu sayfada aşağıdaki tanımlamaları yaptığınızda 404 hata sayfanız artık çalışmaya hazırdır. Burada dikkat edilmesi gereken yer NotfoundComponent'i path tanımlamasını 404 olarak yaptık. Buraya siz isterseniz "Error", "Hata" , "PageNotFound" gibi tanımlamalar yapabilirsiniz. Yani component adı ile aynı olmak zorunda değildir. İkinci satırdaki tanımlamamız ise hatalı sayfa gelirse nereye yönlendireceğimizi belirtmek içindir. Burada da dikkat edilmesi gereken yer NotfoundComponent'e tanımlanan path adresi ile redirectTo alanının tanımlaması aynı olması gerekir. Çünkü hatalı sayfalar olduğunda ya da url yanlış girilmiş sayfalarda belirtmiş olduğunuz sayfaya yönlenecek. Bu durumda da sizin oraya 404 hata sayfasını tanımlamanız gerekiyor.

app-routing.module.ts

{ path: '404', component: NotfoundComponent },

{ path: '**', redirectTo: '/404' }

Angular projenizi çalıştırdığınızda url alanına olmayan bir url girerseniz sizi otomatik olarak 404 sayfasına yönlendirecektir.

ng serve --o

Son olarak havalı 404 sayfalar yapamak istiyorsanız aşağıdaki örneklere göz atabilirsiniz.

https://codepen.io/uiswarup/pen/XWdXGGV

https://codepen.io/uzcho_/pen/eYZLMdg

https://codepen.io/takaneichinose/pen/ZEQvRYQ

https://codepen.io/jh3y/pen/BaNOJWK

https://codepen.io/kdbkapsere/pen/oNXLbqQ

Umarım faydalı olmuştur. İyi çalışmalar dilerim.

 

  • Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.

Diğer Yazılar

Visual Studio Code'da Angular İçin En İyi Eklentiler

05.07.2023 yasinsunmaz 615 0

Angular, modern web uygulamaları geliştirmek için popüler bir JavaScript çatısıdır. Angular projelerinizde daha verimli çalışmak ve geliştirme süreci...

Angular "bundle initial exceeded maximum budget" Hatası Çözümü

29.06.2023 yasinsunmaz 282 0

Angular'da aldığım "Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 745.34 kB with a total of 1.73 MB." hatasının çöz&uu...

Angular "exceeded maximum budget" Hatası Çözümü

27.06.2023 yasinsunmaz 328 0

Angular'da aldığım "exceeded maximum budget. Budget 4.00 kB was not met by 10.22 kB with a total of 14.22 kB." hatasının çözümünü bu yazımd...

Angular 13 Validator Kullanımı

14.03.2022 yasinsunmaz 1179 0

Angular'da form uygulamalarımızda verilerin daha düzgün alınması ve gerekli sınırlamalara göre veri girişinin olması oldukça önemlidir. En temel kont...

MIME type ('text/html') is not a supported stylesheet MIME type Hatası Çözümü

27.02.2022 yasinsunmaz 1592 0

Angular'da projenin tasarımını yaparken genel CSS'ler için style.css dosyamı hazırladım. Fakat projeyi çalıştırdığımda CSS kodları sayfada etkin gör...