Обробка Неіснуючих Маршрутів в 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 з чітким шляхом повернення на головну сторінку.
Ваш застосунок тепер повністю функціональний і зручний для користувачів! 🎉 Якщо бажаєте завантажити повну версію цього проєкту, просто натисніть кнопку нижче.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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 з чітким шляхом повернення на головну сторінку.
Ваш застосунок тепер повністю функціональний і зручний для користувачів! 🎉 Якщо бажаєте завантажити повну версію цього проєкту, просто натисніть кнопку нижче.
Дякуємо за ваш відгук!
