web-dev-qa-db-ja.com

Angular2はPrimeNGコンポーネントを追加します

PrimeNGのインストール手順は次のとおりです。

  1. _npm install primeng --save npm install primeui --save_

  2. 更新Index.html：（ディレクトリprimengおよびprimeuiをコピーする必要がありましたnode_modulesからassetsフォルダーに移動して、404file not foundエラーを取り除きます

    _<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" 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">`
_

  3. 更新test.component.ts：

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

  4. 更新test.component.html：

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

結果：ページに何も表示されません。

何かが足りませんか？

Edit1：

  1. 私は今、angular-cliを使用してプロジェクトをインストールしたと言うことが重要だと思います
  2. <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見つかりません）読み込み中 http：// localhost：3000/primeng/primeng （…）

enter image description here

angulartypescriptprimeng
12
Cristian Muscalu

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のセットアップ を参照することをお勧めします

16
PierreDuc

ドキュメント ページの下部を参照してください

依存関係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の下のディレクティブのリストにカレンダーをリストすることを忘れないでください

更新

  • Primengの​​すべてのcssファイルをindex.htmlからangular-cli.jsonファイルにシフトします。このような

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

primeng jsファイルもすべて、angular-cli.jsonファイルに移動します。

  • 現在、primengの​​すべてのコンポーネントはモジュールで変換されるため、メインモジュールファイルのすべてのコンポーネントをインポートする必要があります。 （私の場合、app.module.tsファイル）。
5
Pardeep Jain

ちょっとこれが最も更新されたプライムangular cliクイックスタートプロジェクトを見てください。

https://github.com/primefaces/primeng-quickstart-cli

4
Mertcan Diken

Index.htmlにprimeui-ng-all.min.jsを追加してみてください

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

これが役立つかどうかを確認してください。

1
Sanket

Module.tsファイルにインポートを追加する必要があります。そうしないと、Angularは無視します。

0
Eduardo Dennis

App.module.tsにインポートCalendarModuleを追加します

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