Angular2 добавить компонент PrimeNG

Вот шаги, которые я сделал для установки PrimeNG:

  • npm install primeng --save npm install primeui --save

  • Update Index.html: (мне пришлось скопировать каталоги primeng и primeui из node_modules в папку с ресурсами, чтобы избавиться от ошибки 404, не найденной)

    <link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css'; return false;" rel="stylesheet">
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'; return false;" rel="stylesheet">
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/primeui/themes/omega/theme.css">
<link rel="stylesheet" href="assets/primeui/primeui-ng-all.min.css">`

  • Обновить test.component.ts:

    import {Calendar} from '../../assets/primeng/primeng';
....
export class TestComponent {
     dateValue:string;
}

  • Обновить test.component.html:

    <p-calendar formControlName="date"></p-calendar>

Результат: ничего не отображается на странице.

Я что-то пропустил?

Edit1:

  • Теперь я думаю, что важно сказать, что я установил проект, используя angular -cli
  • Если я добавлю <p-calendar [(ngModel)]="dateValue"></p-calendar> в test.component.html, я получу

    Ошибка: нечистить (в обещании): не может назначить ссылку или переменную!

Edit2:

Я просто попробовал его в другом проекте, который не использует angular -cli:

    <link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" />
    ....
    import {Calendar} from 'primeng/primeng';
    ....
    <p-calendar formControlName="date"></p-calendar>

, как только я добавлю directives:[Calendar], я получаю сообщение об ошибке:

http://localhost:3000/primeng/primeng 404 (не найдено)
Ошибка: ошибка: ошибка XHR (404 не найдено) loading http://localhost:3000/primeng/primeng (...)

введите описание изображения здесь

Ответы

Ответ 1

Обновите свое сопоставление в SystemJS примерно так:

var map = {
 'app':                        'app', // 'dist',
 '@angular':                   'node_modules/@angular',
 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
 'rxjs':                       'node_modules/rxjs',
 'primeng':                    'node_modules/primeng'//<-- add this
};

И обновите свои пакеты в SystemJS примерно так:

var packages = {
 'app':                        { main: 'boot.js',  defaultExtension: 'js' },
 'rxjs':                       { defaultExtension: 'js' },
 'angular2-in-memory-web-api': { defaultExtension: 'js' },
 'primeng':                    { defaultExtension: 'js' } //<-- add this
};

Для импорта вы можете использовать это:

import {Calendar} from 'primeng/components/calendar/calendar';

или если вам просто все равно, что он загружает все компоненты, которые вы можете использовать:

import {Calendar} from 'primeng/primeng';

Для получения дополнительной информации я предлагаю вам ознакомиться с настройкой PrimeNG

Ответ 2

Смотрите внизу страницы документации

Зависимости jQuery UI Datepicker и DateTimePicker

так что вы должны встраивать эти строки в ваш index.html, который вы не встраивали, я думаю, поэтому попробуйте использовать это

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

также не забудьте перечислить календарь в списке директив под @component

Обновить

  • Переместите все ваши CSS файлы primeng из файла index.html в файл angular-cli.json. как это

    "styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeui/primeui-ng-all.min.css"
     ....
  ],

Переместите все ваши основные файлы JS, а также в файл angular-cli.json.

  • на данный момент все компоненты primeng конвертированы в модуль, поэтому мы должны импортировать все компоненты в основной файл модуля. (файл app.module.ts в моем случае).

Ответ 4

Попробуйте добавить в index.html параметр primeui-ng-all.min.js

<!-- JS for PrimeUI -->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

Посмотрите, поможет ли это.

Ответ 5

Вам нужно добавить его в файл module.ts, иначе Angular игнорирует его.

Ответ 6

Добавить import CalendarModule в свой app.module.ts

@NgModule({  imports: [
CommonModule,
CalendarModule],  declarations: [CarruselComponent],  exports: [    CarruselComponent ]})