web-dev-qa-db-fra.com

Angular2 add PrimeNG composant

Voici les étapes que j'ai effectuées pour installer PrimeNG: 

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

  2. Mise à jour (Index.html} _: (J'ai dû copier les répertoires primeng et primeui de node_modules dans le dossier assets pour se débarrasser de 404 fichier introuvable erreur) 

    <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. Mettre à jour test.component.ts:

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

  4. Mettre à jour test.component.html:

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

Résultat: rien ne s'affiche sur la page.

Est-ce que je manque quelque chose?

Edit1:

  1. Je pense maintenant qu'il est important de dire que j'ai installé le projet en utilisant angular-cli 
  2. Si j'ajoute <p-calendar [(ngModel)]="dateValue"></p-calendar> à test.component.html, je reçois

    Erreur: Non capturé (promis): Impossible d'affecter une référence ou une variable!

Edit2: 

Je viens de l'essayer dans un autre projet qui n'utilise pas 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>

dès que j'ajoute directives:[Calendar] je reçois une erreur:

http: // localhost: 3000/primeng/primeng 404 (introuvable)
Erreur: Erreur: erreur XHR (404 introuvable) chargement http: // localhost: 3000/primeng/primeng (…)

 enter image description here

angulartypescriptprimeng
11
Cristian Muscalu

Mettez à jour votre correspondance dans SystemJS à quelque chose comme ceci:

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
};

Et mettez à jour vos paquets dans SystemJSà quelque chose comme ceci:

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

Pour importer, vous pouvez utiliser ceci:

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

ou si vous ne vous souciez pas du fait qu'il charge tous les composants, vous pouvez simplement utiliser:

import {Calendar} from 'primeng/primeng';

Pour plus de référence, je vous suggère de regarder la configuration de PrimeNG

16
PierreDuc

Voir au bas de documentation page

Dépendances jQuery UI Datepicker et DateTimePicker

vous devez donc intégrer ces lignes dans votre index.html que vous n'avez pas intégré, je pense, alors essayez d'utiliser ceci.

<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>

de plus, n'oubliez pas de lister le calendrier dans la liste des directives sous @component

Mettre à jour

  • Déplacez tous vos fichiers css de primeng de index.html vers le fichier angular-cli.json. comme ça

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

déplacez tous vos fichiers primeng js également dans le fichier angular-cli.json.

  • à partir de maintenant, tous les composants de primeng sont convertis en module. Nous devons donc importer tous les composants du fichier de module principal. (fichier app.module.ts dans mon cas).
5
Pardeep Jain

Hé, c’est le projet de démarrage rapide primeng angular cli le plus mis à jour.

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

4
Mertcan Diken

Essayez d'ajouter primeui-ng-all.min.js dans index.html

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

Voir si cela aide.

1
Sanket

Vous devez l'ajouter à vos importations dans le fichier module.ts, sinon Angular l'ignorera.

0
Eduardo Dennis

Ajouter import CalendarModule dans votre app.module.ts

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