Применг с джипстером - PullRequest
Новая
       8

Применг с джипстером

1 голос
/ 04 февраля 2020

У меня версия jhipster 6.6.0, и я хочу использовать primeng в своем приложении, созданном с помощью jhipster. После выполнения команды: 

 yo jhipster-primeng

все в порядке, но затем я запускаю: 

npm install

и получаю эту ошибку: 

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular/cdk@^8.2.14.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'jhipster-ui-libs'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\48696\AppData\Roaming\npm-cache\_logs\2020-02-04T16_19_42_448Z-debug.log

Что мне делать чтобы избежать этой ошибки?

1 Ответ

3 голосов
/ 06 февраля 2020

Установка primeng, кажется, всегда немного сложнее, независимо от версии. Инструкции в этом ответе были протестированы с JHipster 6.6.0.

1. Установка PrimeNG

Вы должны установить версию PrimeNG, совместимую с любой версией angular, которую использует JHipster. В этом случае JHipster 6.6.0 использует angular 8, поэтому я установил версию PrimeNG 8.1.1 (последняя доступная версия 8).

Вы можете использовать следующую команду, если используете npm: 

npm i primeng@8.1.1 primeicons @angular/animations

Или следующая команда, если вы используете пряжу: 

yarn add primeng@8.1.1 primeicons @angular/animations

Помните, что в будущем вам может потребоваться указать совместимую версию @angular/animations тоже.

2. Импортируйте необходимые модули PrimeNG

Теперь вы должны импортировать необходимые модули, в моем случае просто для проверки того, что я хотел добавить кнопку PrimeNG, поэтому я импортировал ButtonModule.

Откройте файл [your-entity].module.ts (или home.module.ts) и добавьте следующие строки: 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button'; 
...
@NgModule({
  imports: [..., BrowserAnimationsModule, ButtonModule],
  ...
})

На этом втором шаге очень важно никогда не импортировать модули из primeng/primeng. Вы должны использовать указанную подпапку модуля c, как я from 'primeng/button'.

3. Импортируйте необходимые css файлы

Откройте файл vendor.scss (или поставщика. css, если вы не используете S CSS) и добавьте следующее: 

...
// Import PrimeNG source files
@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeicons/primeicons.css';
...

На этом этапе вы сможете добавить p-button в файл *.component.html, и он должен быть обработан без ошибок. Откройте две консоли и запустите, как обычно, .\mvnw и npm start.

4. Добавьте любую нужную вам дополнительную зависимость (необязательно)

Очень распространенный пример: вам нужно использовать ChartJS, вам нужно будет добавить соответствующую зависимость, например: npm i chart.js. Затем добавьте импорт в ваш *.module.ts файл: 

import { ChartModule } from 'primeng/chart';
...
@NgModule({
  imports: [..., ChartModule],
  ...
})

И, наконец, добавьте пакет к вашему vendor.ts следующим образом: 

import 'chart.js/dist/Chart.bundle';

И теперь вы сможете добавить диаграмма, как объяснено в официальной документации primeng .

Я опубликовал репозиторий в моем github с минимальной конфигурацией, необходимой для начала использования PrimeNG в вашем JHipster 6.6.0 установка. Вы можете найти его здесь .

Изменения, исправления и предложения приветствуются. Я сделал это немного ru sh, мои извинения.

...