Початок Проекту
Минуло багато часу з того моменту, як я востаннє працював над побічним проектом, оскільки робота та сім'я забирали весь мій час. Я захотів розпочати знову і вирішив використати Angular 19. Перший крок полягав у створенні робочого простору, що було дуже просто:
npx create-nx-workspace@latest canva
Ця команда швидко створила робочий простір NX з додатком на Angular. Все пройшло гладко, і я був готовий переходити до наступного етапу — вибору бібліотеки компонентів.
Вибір PrimeNG
Коли справа дійшла до вибору бібліотеки компонентів, я швидко погуглив. Більшість рекомендацій вказували на PrimeNG, головним чином тому, що вона має ширший набір компонентів у порівнянні з Angular Material.
Ось деякі думки, з якими я зіткнувся:
- Angular Material: Чудова документація, але обмежена можливість кастомізації.
- PrimeNG: Дуже налаштовувана, але документація трохи недостатня в плані чіткості.
Після того, як я ознайомився з компонентами та темами PrimeNG, мені сподобалось те, що я побачив, і я вирішив вибрати її.
Дотримуючись посібника по початку роботи з PrimeNG, я успішно додав бібліотеку в свій додаток. Це було просто і зрозуміло.
Проблема з Sidenav
Я хотів додати компонент sidenav до свого додатку. Копіювання працюючого прикладу з документації PrimeNG здалося очевидним рішенням. Однак компонент поводився не так, як очікувалось.
Перевіривши компонент у браузері, я зрозумів, що щось не так:
- Деякі класи з прикладу документації не були застосовані.
- Деякі стилі здавались відсутніми.
Я спробував запустити приклад на StackBlitz, наданий в документації, але він постійно завантажував залежності. Після деякого налагодження я зрозумів, що мені потрібно інтегрувати Tailwind CSS в мій додаток — цей момент не був зазначений у документації.
Коли я останній раз інтегрував бібліотеку UI компонентів, все було просто — завантажити залежність і додати стилі, імпортувавши їх в styles.scss або додавши їх до масиву styles у angular.json. Однак Tailwind CSS трохи інший.
Додавання Tailwind CSS
Я слідував документації для додавання Tailwind в мій додаток, але кроки не спрацювали. Розчарований, я завантажив один з шаблонів PrimeNG, щоб зрозуміти, як налаштований Tailwind. Компонент sidenav з шаблону працював бездоганно. Після глибшого вивчення я зрозумів, що проблема була в моїй конфігурації. Документація була для стандартного додатку на Angular, а в мене був проект на NX.
Нарешті, я знайшов правильний процес налаштування в документації NX. Запустивши наступну команду, я вирішив усі проблеми:
npx nx g @nx/angular:setup-tailwind my-project
Ось посилання на посібник NX, яким я користувався: Використання Tailwind CSS з Angular проектами.
Висновки
Ця проблема забрала цілий день. В якийсь момент я подумав про те, щоб відмовитись від PrimeNG і перейти на Angular Material. Але я не здався і зміг все налаштувати. Я не хочу, щоб інші витрачали час на це, як я, тому ділюсь своїм досвідом.
Для тих, хто зацікавлений, ви можете ознайомитись з цим комітом на GitHub, в якому містяться зміни для налаштування PrimeNG і Tailwind.
Більше попереду
Це лише початок мого шляху у створенні побічного проекту. Я буду ділитись іншими помилками та уроками в процесі. Слідкуйте за оновленнями!
Перекладено з: Adding PrimeNG and Tailwind CSS to an Angular 19 NX Project