PrimeNG: how to 'pack' or 'build' the project after making changes?

Question

I use primeng in my angular application. I wanted to add some functionality to one of the components so I followed the instructions (https://github.com/primefaces/primeng/wiki/Building-From-Source) and got all of my changes to work. Now I want to package it up so I can install this modified branch in my application. How do I go about doing that?

I've done this before with ng2-bootstrap by running 'npm pack' and then installing the generated tar package in my application. I tried doing the same with primeng but my project errored because the primeng.js file wasn't there. I'm assuming I need to do it a different way but I don't know how and I don't have much webpack/gulp experience.

Answer 1

1. Fork to your GitHub account
2. Clone package
3. Make a new branch
4. Make changes to new branch

Then run the following commands in order;

npm install - Downloads the dependencies

gulp build - Creates resource bundle for css

npm run build-prod - Which runs the build scripts.

You can then push this package to your own GitHub account and with a different branch name and run the following in your project you require the custom build:

npm install git://github.com/<user>/<project>.git#<branch>

Then whenever priming makes changes on the master you can merge them with your custom branch.

Answer 2

primeng >= 9 The build process has changed to use ng-packagr in primeng 9. This method was confirmed in primeng 10.

To build run once to install ng-packager:

npm install ng-packager --save-dev

Run to build each time

npm run build-lib

I haven't built version 9 using ng-packagr. Should be the same according to this link.

Answer 3

primeNG > 7

Optionally add a dist script in package.json to build the distribution files

{
  "name": "primeng",
  "version": "7.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dist": "ngc -p tsconfig-release.json && gulp build-assets && gulp build-exports"
  },

and then just do a

npm run dist

note that with version 7.0.0 it threw me random errors when running this command

[08:38:19] Starting 'themes'... events.js:174 throw er; // Unhandled 'error' event ^ Error: ENOENT: no such file or directory, stat 'primeng/resources/components/accordion/accordion.css'

another

[08:35:44] 'images' errored after 134 ms [08:35:44] Error: EEXIST: file already exists, mkdir 'primeng/resources/images'

I suppose it was due to a racing condition or something. If it happens just try the command again until it builds correctly.

you may also run the commands without adding the script

npm install
./node_modules/.bin/ngc -p tsconfig-release.json
./node_modules/.bin/gulp build-assets
./node_modules/.bin/gulp build-exports

then you can generate a tar.gz file which you may use in your project

npm pack

and install in your project with

npm install ~/primeng/primeng-7.0.0.tar.gz

npm install docs state that you may use also a folder, so, you also may install as

npm install ~/primeng/

I tried it, but it threw the following exception in my project so I had to use the tar.gz

StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts!

You may also publish your own version on npm

npm login
npm publish

and use it instead of the primeng official distribution

npm install @youruser/primeng

credits to @Anulal for pointing us in the right direction

Answer 4

In the forked PrimeNG v5, package.json need to be updated with following lines to build and redistribute.

additions to package.json

  "scripts": {
    "build-components": "ngc -p tsconfig-release.json",
    "build-assets": "gulp build-assets",
    "build-styles": "node-sass src/assets/components -o src/assets/components",
    "build-redistribute": "npm run build-components && npm run build-assets && npm run build-styles"
  }
  "devDependencies": {
    "node-sass": "^4.5.3",
  }

install node-sass and run the following command to build

npm run build-redistribute

Ref : https://forum.primefaces.org/viewtopic.php?p=159783#p159783