webpack usage

[loic.salou]

hi,

seems that my previous post wasn't correctly published, probably my mistake.
So I'm trying to use Prime-NG in my apps, but I'm using a starter Angular2-typescript-webpack and I can't seem to be able to build my app including primg-NG I still get nasty errors like "WARNING in ./~/primeng/primeng.js
Cannot find source file 'primeng.ts': Error: Cannot resolve 'file' or 'directory' ./primeng.ts in D:\cellarproject\angular2-webpack-starter-cellar\node_modules\primeng" at build time and "./~/primeng/components/inputswitch/inputswitch.js
Cannot find source file 'inputswitch.ts': Error: Cannot resolve 'file' or 'directory' ./inputswitch.ts in D:\cellarproject\angular2-webpack-starter-cellar\node_modules\primeng\components\inputswitch" in the js console.

Any idea on how I should configure webpack and use Prime-NG ?

Thanks in advance

[cagatay.civici]

We don't publish ts files in the npm distribution, could that be the reason? It seems webpack is looking for ts files.

I don't see a problem in including ts and map files in the distribution, I've checked a couple of angular2 libs and they all include them.

[cagatay.civici]

PrimeNG now also includes ts files in npm distro;

https://github.com/primefaces/primeng/issues/125

[loic.salou]

thanks a lot, will be checking this soon !

[cagatay.civici]

My colleague is working on a webpack quickstart for PrimeNG these days, we'll put it up soon.

[TekSiDoT]

great news, looking forward to it.

[DarthMaul]

Have a look at this one it may solve your problem.

https://github.com/Mrtcndkn/primeng-quickstart

primeng quickstart using webpack.

[loic.salou]

Hi again,

this starter primeNG / webpack works fine for basic components, thanks ! It helped me.
Problem is now that I intend to use Datatable, and this one component is not that basic. I can instantiate the table and display my content, but I can't seem to inherit from prime-NG CSS, and I get errors as soon as I intend to use the col reorder feature (which I need in my apps). The messages I get are:

• -

  Code: Select all

  primeui-ng-all.min.js?8e52:7 Uncaught TypeError: Cannot read property 'mouse' of undefined

  -

  Code: Select all

  and VM9811:76 TypeError: jQuery(...).puicolreorder is not a function
      at DataTable.initColumnReordering (eval at <anonymous> (http://localhost:8080/js/common.js:2357:2), <anonymous>:499:51)

I changed my webpack config in order to include jQuery correctly (I had undefined jQuery at the beginning), and also primeui-ng-all.min.js + css, but I may have missed something, it's still crashing with same error messages. I'm afraid webpack is not that simple too, not sure I did it well... I added "resolve" for primgui just as I did for jQuery, for delta/theme too, + Webpack.ProvidePlugin for "primeui" and "ui" variables just as I did for "$" and "jQuery" variables, + I import and require the following in vendor.js:

Code: Select all

// Prime-NG
import 'primeng/primeng';
import 'primeui/primeui-ng-all.min';

require('jquery');
require('pngthemecss');
// require('pngfontawesomecss');
require('puingallcss');
require('puingalljs');

can you see somthing I may have missed ? or, much better can you provde full showcase built on webpack ?

Thanks in dvance !

[DarthMaul]

I'm working on it as soon as i figured it out i'll inform you about the issue.

[DarthMaul]

Here take a look at this => https://github.com/Mrtcndkn/primeng-quickstart i changed it a bit.Look at the commands for terminal it has a small change.