PrimeNG with Angular2-webpack-starter

Question

I'm trying to configure PrimeNG in my Angular2 project based on angular2-webpack-starter (https://github.com/AngularClass/angular2-webpack-starter).

I installed PrimeNG and PrimeUI using npm install, then added necessary typings as ambient dependencies:

"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#470954c4f427e0805a2d633636a7c6aa7170def8",
"jqueryui": "github:DefinitelyTyped/DefinitelyTyped/jqueryui/jqueryui.d.ts#a3a5cd5554dc2c0ff8955d1db0673879af3095bc",
"primeui": "github:primefaces/primeui/primeui.d.ts#7640bc59a3634e501634655217fdd413bed6d003",

Firstly I had a problem with jquery typing. It was giving me the following error:

Subsequent variable declarations must have the same type.  Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.

I solved it by commenting out the following lines in typings/browser/ambient/jquery/index.d.ts:

declare module "jquery" {
    export = $;
}
declare var $: JQueryStatic;

Now I am trying to import primeui-ng-all.min.js within vendor.ts file using import "primeui/primeui-ng-all.min.js"; command. However I am getting the following error:

Module not found: Error: Cannot resolve module 'jquery-ui' in .../angular2-webpack-starter/node_modules/primeui @ ./~/primeui/primeui-ng-all.min.js 8:23135-23167

Is it the correct way of including PrimeNG in angular2-webpack-starter? How should I solve this problem? And maybe how should I import other files required by PrimeNG, as i.e. stylesheets?

There is a PrimeNG+WebPack sample here. https://github.com/primefaces/primeng-quickstart-webpack — Cagatay Civici, Apr 21 '16 at 14:16
Here is a fork of angular2-webpack-starter that adds PrimeNG for the UI. https://github.com/cagataycivici/angular2-webpack-starter — Cagatay Civici, Apr 21 '16 at 21:04

score 1 · Answer 1 · answered Apr 12 '16 at 11:03

This is a short and fast way to get started(non-npm), firstly you need to download the components folders from here https://github.com/primefaces/primeng then add this to your index.html add head

 <link rel="stylesheet" type="text/css" href="prime/resources/primeui/themes/delta/theme.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/icons/css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/prism.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/fullcalendar.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/quill.snow.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/primeui/primeui-ng-all.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/site.css"/>
<script src="prime/resources/primeui/primeui-ng-all.min.js"></script>
<script src="prime/resources/js/prism.js"></script>
<script src="prime/resources/js/charts.min.js"></script>
<script src="prime/resources/js/moment.js"></script>
<script src="prime/resources/js/fullcalendar.js"></script>
<script src="prime/resources/js/site.js"></script>
<script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'app': {defaultExtension: 'ts'},
                'components': {defaultExtension: 'ts'}, //Your downloaded components folder here.
                'prime/resources/js' : {defaultExtension: 'js'}
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>

Check the paths before configuring the app.

To be honest, I prefer typical webpack/npm solution, especially in such a case, where most of the packages use CommonJS and starter provides both development and production builts. — Marcin, Apr 12 '16 at 12:29

score 0 · Answer 2 · answered Apr 26 '16 at 11:47

0

Manually installing JQuery UI through NPM and importing it in the vendor.ts (before Prime) fixed it for me.

import 'jquery-ui/jquery-ui.js';

answered Apr 26 '16 at 11:47

EnlitenedZA

149
4
15

PrimeNG with Angular2-webpack-starter

2 Answers2