Шаги по интеграции PrimeNG с JHipster

Ответ 1

Для нас были выполнены следующие шаги.

1 - Добавление зависимостей с yarn

yarn add primeng
yarn add @angular/animations

2 - Создан новый компонент с ng cli, стоящий в той же папке, где вы хотите создать запуск компонента

ng g component new-cmp

Это будет

• Создайте папку new-cmp с .html и .ts, которые вам нужны.
• Импортировать и объявить компонент в ближайшем модуле, например home.module.ts

3 - Добавьте imports основных компонентов, которые вы хотите использовать вместе с BrowserAnimationsModule в модуле, где был объявлен новый компонент, в нашем случае home.module.ts, например:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule, RatingModule, CalendarModule, ButtonModule } from 'primeng/primeng';  

И добавьте их в массив импорта внутри @NgModule

4 - Перейдите к src/main/webapp/content/scss/vendor.scss и импортируйте стили, как говорит Марцин Краевски:

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap/theme.css';

5. Добавьте первичный компонент для тестирования в html созданного компонента, например <button pButton type="button" label="Click"></button>

6 - Запустите yarn run webpack:build, чтобы приложения вносили изменения с vendors.scss

7 - Запустите yarn start и протестируйте его!

UPDATE Версия Jhipster: 4.5.2

Ответ 2

Это решение, которое работало для меня с другим модулем (angular-calendar) и импортирует стили из каталога node_modues

Добавить в файл:

vendor.css:

@import "~angular-calendar/dist/css/angular-calendar.css";

и запустите

yarn run webpack:build:vendor

Ответ 3

Я только что получил PrimeNG, работая с JHipster 4.4.1 (используя Angular4 и SCSS).

Комментарий Жюльена выше, а ответ Марцина о vendor.css, объединить, чтобы дать вам решение. Однако, как новичок в JHipster, даже после прочтения этой темы, мне потребовалось несколько попыток собрать это вместе правильно.

Итак, чтобы уточнить, вот что сработало для меня:

1. Установите PrimeNG и зависимости

Запустите yarn add primeng, чтобы установить PrimeNG в качестве зависимости для вашего приложения.

Запустите yarn add @angular/animations (см. Руководство по установке PrimeNG для объяснения этого).

2. Добавьте стили PrimeNG в ваше приложение

Вместо того, чтобы использовать .angular-cli.json для добавления стилей в сборку, просто @import их в вашем vendor.scss (или vendor.css). Для меня это означало добавление этих двух строк в конец content/scss/vendor.scss:

@import 'node_modules/primeng/resources/primeng.min';
@import 'node_modules/primeng/resources/themes/bootstrap/theme';

Запустите yarn run webpack:build:vendor.

Если, как и я, ваша сборка не работает, потому что она не может найти несколько файлов изображений, я обошел ее, просто скопировав каталог node_modules/primeng/resources/images/ в content/scss/. Возможно, у кого-то есть более "правильный" способ решить эту проблему, но этот обходной путь сделал для меня трюк.

3. Убедитесь, что анимации включены в ваш модуль

Если они еще не были, убедитесь, что вы импортируете анимацию в любой модуль, который будет использовать PrimeNG (я сделал это в моем корневом модуле):

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Не забудьте также добавить это в массив @NgModule imports.

4. Начните использовать PrimeNG!

Теперь все должно быть подключено - просто следуйте за документами PrimeNG, чтобы импортировать и использовать их компоненты в своих.

то есть. import { AccordionModule } from 'primeng/primeng' (также добавьте в @NgModule imports).

Ответ 4

Я не видел эту нить, прежде чем сожалеть. Мне потребовалось пару часов, чтобы интегрировать PrimeNG, поскольку я изучаю Angular4.

Здесь ссылка на мой персональный проект, если вы хотите увидеть интеграцию для PrimeNG: https://github.com/pascalgrimaud/qualitoast

И здесь конкретный PR с разницей: https://github.com/pascalgrimaud/qualitoast/pull/39/files

Надеюсь, что это поможет:)