Angular 2+: Primeng style not working in angular-cli builded/deployed application

Question

I've followed instructions in Angular 2 - PrimeNg style not working answers and got it work in standalone application served with ng serve.

But when application is build and deployed, primeng styles and theme are not bundled. Primeng control is displayed without styles and looks strange.

Build is done with node --max-old-space-size=4096 "./node_modules/@angular/cli/bin/ng" "build" "--prod" "--aot" "--env=test" "--sourcemap"

package.json content:

{
   "name": "my-primeng-app",
   "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "lintStart": "ng lint && ng serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/router-store": "^5.0.0",
    "@ngrx/store": "^5.0.0",
    "angular-l10n": "4.0.0",
    "angular2-highcharts": "^0.5.5",
    "angular2-ie9-shims": "0.0.2",
    "angular2-navigate-with-data": "^1.1.11",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "es6-shim": "^0.35.3",
    "file-saver": "^1.3.8",
    "font-awesome": "^4.7.0",
    "highcharts": "^6.1.0",
    "intl": "^1.2.5",
    "lodash": "4.17.4",
    "primeng": "5.2.7",
    "reflect-metadata": "^0.1.12",
    "rxjs": "5.5.2",
    "serializer.ts": "0.0.12",
    "ts-helpers": "^1.1.1",
    "xml2js": "^0.4.17",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular-devkit/core": "0.4.6",
    "@angular/cli": "^1.7.4",
    "@angular/compiler-cli": "5.0.0",
    "@ngrx/store-devtools": "5.0.0",
    "@types/file-saver": "0.0.1",
    "@types/highcharts": "^5.0.22",
    "@types/jasmine": "2.5.53",
    "@types/lodash": "^4.14.109",
    "@types/node": "^6.0.42",
    "@types/xml2js": "0.0.33",
    "ajv": "^6.5.0",
    "codelyzer": "4.0.0",
    "cross-env": "^5.1.6",
    "css-loader": "^1.0.0",
    "es6-promise": "^4.2.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "increase-memory-limit": "^1.0.3",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "5.8.0",
    "typescript": "2.4.2",
    "webpack": "^3.11.0"
  }

}

Answer 1

Importing styles in index.html in target web application where angular application is deployed wasn't work as expected and didn't want to maintain style version in target project...

Styles are in the end imported in component's css file and component encapsulation is changed to ViewEncapsulation.Native.

Answer 2

Have you tried, to assign production to true in your environment.prod.ts file, and after that build with --prod:

export const environment = {
  production: true
};

Let me know if it works for you.