I retried this using Angular 6 and the latest primeng.<\/p>\n
Step 2\/ below was not needed, and I did not install\/reinstall gulp per step 3\/ (not used this time \u2013 need to check\/confirm re this)<\/p>\n
The wiki steps referred to below, here<\/a>, referred to using sass to build the css, but this command did not work for me even when I installed the node.js sass per here<\/a> - the \u2013update command came back with an error.<\/p>\n I then gave up using sass to compile the sass files.<\/p>\n Because of this issue I still had to fix the theming, so tried to copy the css files as below rather than compile the sass. This time the themes folder was under src\\assets\\components.<\/p>\n I therefore created another skeleton app, installed primeng using \u201cnpm install primeng\u201d, and then copied the themes folder from under node_modules\\primeng\\resources to src\\assets\\components, overwriting the themes already there.<\/p>\n This added the css files that were missing.<\/p>\n I could then run the showcase with theming fully working, either using \u201cnpm start\u201d or \u201cng serve\u201d \u2013 either worked.<\/p>\n I did notice that the theming borders on the treetable component did not appear to work, but apart from that all the theming including theme switching worked fine.<\/p>\n It is useful to have this running locally in order to can try out occasional code hacks on the example code to try out ideas or check how things work if the docs are not clear on a point, knowing that you have started from a working example.<\/p>\n The steps for this basically follow the wiki steps here<\/a>. Note the following additions\/amendments to the steps:-<\/p>\n 1\/ I cloned the repository from here<\/a>. Having cloned I then listed and disconnected from the remote repositories, as the clones were just for local use:-<\/p>\n git remote \u2013v<\/p>\n git remote rm origin<\/p>\n git remote \u2013v<\/p>\n<\/blockquote>\n 2\/ Dependencies as follows were added to package.json as per instructions:-<\/p>\n Following this npm install<\/em> was run to download all the dependencies<\/p>\n 3\/ In order to build using gulp as instructed (gulp build<\/em>), I installed gulp first as per the instructions here<\/a>:-<\/p>\n 4\/ I then ran npm start<\/em> to run the showcase, which defaults to http:\/\/localhost:8080\/<\/a><\/p>\n The showcase ran ok locally but there were some issues with the theming \u2013 the theme had a transluscent background on the menus and dropdowns for example which did not correctly occlude the text underneath. The live showcase on the PrimeNG site did not have this problem. <\/p>\n On investigation it appears that the theme files are under the main resources\/themes directory, but are not being sass compiled from scss during the build so there are no .css files there. The gulp file for the project, gulpfile.js<\/em>, does not have any entries that do sass compilation so this may be an omission\/bug in the version I had downloaded.<\/p>\n The showcase does not use the primeng<\/em> under node_modules \u2013 it defines its own primeng<\/em> package such that if you try to enter npm install primeng <\/em>to install the themes in the normal way as part of the npm installed package, you get an error from npm about the duplicate primeng<\/em>.<\/p>\n My workaround was straightforward \u2013 I just copied the theme folder and all subfolders from under the node_modules\\primeng\\resources<\/em> directory in another application folder to the projects top level resources directory (in fact I used the primeng-quickstart-webpack<\/em> which I had already set up) \u2013 any other project where you have installed primeng<\/em> will do. This solved the problem by providing all the css files for the themes, and the themes and theme switching then worked.<\/p>\n As I have no requirement to do a full working build for the showcase this is no problem. <\/p>\n I checked for other posts about theming issues and found a couple of StackOverflow posts about theme issues with Webpack <\/strong><\/em>here<\/strong><\/em><\/a> and <\/strong><\/em>here<\/strong><\/em><\/a>. These may prove relevant for future development.<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Update 23\/5\/2018 I retried this using Angular 6 and the latest primeng. Step 2\/ below was not needed, and I did not install\/reinstall gulp per step 3\/ (not used this time \u2013 need to check\/confirm re this) The wiki steps referred to below, here, referred to using sass to build the css, but this command […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,209],"tags":[13,40,16,15],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2051"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2051"}],"version-history":[{"count":11,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2051\/revisions"}],"predecessor-version":[{"id":2207,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2051\/revisions\/2207"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Original Post<\/h2>\n
\n
\n
"dependencies": {\r\n "@angular\/common": "4.0.0",\r\n "@angular\/compiler": "4.0.0",\r\n "@angular\/core": "4.0.0",\r\n "@angular\/forms": "4.0.0",\r\n "@angular\/http": "4.0.0",\r\n "@angular\/platform-browser": "4.0.0",\r\n "@angular\/platform-browser-dynamic": "4.0.0",\r\n "@angular\/router": "4.0.0",\r\n "@angular\/animations": "4.0.0",\r\n "core-js": "^2.4.1",\r\n "rxjs": "^5.2.0",\r\n "zone.js": "^0.8.4"\r\n },<\/pre>\n<\/blockquote>\n\n
npm install --global gulp-cli<\/pre>\n
npm install --save-dev gulp<\/pre>\n<\/blockquote>\n