Обробка Неіснуючих Маршрутів в Angular
Іноді користувачі можуть вручну ввести неправильну URL-адресу або натиснути на застаріле посилання. У таких випадках важливо показати чітке повідомлення "Сторінку не знайдено" замість порожнього екрану або технічної помилки. У цьому модулі буде створено компонент 404 сторінки, налаштовано маршрути для його відображення для всіх невідомих шляхів і додано сучасне стилізування.
Створення NotFoundComponent
Буде створено новий компонент Angular з назвою NotFoundComponent, який слугуватиме нашою 404 сторінкою. Він відображатиме заголовок, коротке повідомлення про помилку та кнопку для повернення користувача на головну сторінку.
Виконайте наступну команду для генерації компонента:
Ця команда автоматично створить папку not-found з чотирма файлами. Ви вже знайомі з цими файлами, і можете видалити тестовий файл, якщо він не використовується.
Створення компонента
Додаємо HTML для відображення заголовка "404", простого повідомлення та кнопки "Перейти на головну":
not-found-conponent.html
not-found-conponent.css
Це простий макет із однією особливістю — методом goToHome(). Після натискання кнопки користувач буде перенаправлений на головну сторінку.
Ми також додали деякі CSS-стилі, щоб зробити сторінку 404 візуально привабливою — вирівняний по центру текст, помітний заголовок і чисту, яскраву кнопку.
Додавання логіки навігації
Тепер реалізуємо метод для повернення користувача на головну сторінку.
not-found-conponent.ts
Тут використовується інʼєкція Router Angular для ручної навігації між маршрутами. У методі goToHome() застосовується navigate(['/']), щоб перенаправити користувача на кореневий маршрут.
Обробка всіх невідомих маршрутів
Тепер оновлюється конфігурація маршрутизації додатка, щоб відображати компонент NotFoundComponent для будь-яких невизначених шляхів.
У файлі app.routes.ts додайте наступний маршрут у самому кінці:
routes.ts
Шлях ** є універсальним шаблоном, який відповідає будь-якому маршруту, що не співпадає з попередніми. Наприклад, перехід за адресою /wrong-url відобразить сторінку 404.
Чому універсальний маршрут завжди має бути останнім?
В Angular конфігурація маршрутів обробляється послідовно — зверху вниз. Це означає, що маршрутизатор перевіряє кожен маршрут по черзі, і як тільки знаходить відповідність, припиняє пошук.
Універсальний маршрут ({ path: '**' }) є маршрутом для всіх випадків. Він відповідає будь-якому шляху, який не був знайдений серед попередніх маршрутів. Якщо розмістити його перед більш специфічними маршрутами, він перехопить усі запити, і решта маршрутів ніколи не буде досягнута — навіть якщо вони є дійсними.
Тепер ваш застосунок коректно обробляє помилки навігації: замість аварійного завершення роботи або порожнього екрану користувачі бачать зрозуміле повідомлення 404 з чітким шляхом повернення на головну сторінку.
Ваш застосунок тепер повністю функціональний і зручний для користувачів! 🎉 Щоб завантажити повну версію цього проєкту, просто натисніть кнопку нижче.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
How do I add the HTML for the NotFoundComponent?
Can you explain how to implement the goToHome() method?
Where exactly should I place the wildcard route in my routing configuration?
Awesome!
Completion rate improved to 3.13Обробка Неіснуючих Маршрутів в Angular
Свайпніть щоб показати меню
Іноді користувачі можуть вручну ввести неправильну URL-адресу або натиснути на застаріле посилання. У таких випадках важливо показати чітке повідомлення "Сторінку не знайдено" замість порожнього екрану або технічної помилки. У цьому модулі буде створено компонент 404 сторінки, налаштовано маршрути для його відображення для всіх невідомих шляхів і додано сучасне стилізування.
Створення NotFoundComponent
Буде створено новий компонент Angular з назвою NotFoundComponent, який слугуватиме нашою 404 сторінкою. Він відображатиме заголовок, коротке повідомлення про помилку та кнопку для повернення користувача на головну сторінку.
Виконайте наступну команду для генерації компонента:
Ця команда автоматично створить папку not-found з чотирма файлами. Ви вже знайомі з цими файлами, і можете видалити тестовий файл, якщо він не використовується.
Створення компонента
Додаємо HTML для відображення заголовка "404", простого повідомлення та кнопки "Перейти на головну":
not-found-conponent.html
not-found-conponent.css
Це простий макет із однією особливістю — методом goToHome(). Після натискання кнопки користувач буде перенаправлений на головну сторінку.
Ми також додали деякі CSS-стилі, щоб зробити сторінку 404 візуально привабливою — вирівняний по центру текст, помітний заголовок і чисту, яскраву кнопку.
Додавання логіки навігації
Тепер реалізуємо метод для повернення користувача на головну сторінку.
not-found-conponent.ts
Тут використовується інʼєкція Router Angular для ручної навігації між маршрутами. У методі goToHome() застосовується navigate(['/']), щоб перенаправити користувача на кореневий маршрут.
Обробка всіх невідомих маршрутів
Тепер оновлюється конфігурація маршрутизації додатка, щоб відображати компонент NotFoundComponent для будь-яких невизначених шляхів.
У файлі app.routes.ts додайте наступний маршрут у самому кінці:
routes.ts
Шлях ** є універсальним шаблоном, який відповідає будь-якому маршруту, що не співпадає з попередніми. Наприклад, перехід за адресою /wrong-url відобразить сторінку 404.
Чому універсальний маршрут завжди має бути останнім?
В Angular конфігурація маршрутів обробляється послідовно — зверху вниз. Це означає, що маршрутизатор перевіряє кожен маршрут по черзі, і як тільки знаходить відповідність, припиняє пошук.
Універсальний маршрут ({ path: '**' }) є маршрутом для всіх випадків. Він відповідає будь-якому шляху, який не був знайдений серед попередніх маршрутів. Якщо розмістити його перед більш специфічними маршрутами, він перехопить усі запити, і решта маршрутів ніколи не буде досягнута — навіть якщо вони є дійсними.
Тепер ваш застосунок коректно обробляє помилки навігації: замість аварійного завершення роботи або порожнього екрану користувачі бачать зрозуміле повідомлення 404 з чітким шляхом повернення на головну сторінку.
Ваш застосунок тепер повністю функціональний і зручний для користувачів! 🎉 Щоб завантажити повну версію цього проєкту, просто натисніть кнопку нижче.
Дякуємо за ваш відгук!
