Angular 2+: стиль Primeng не работает в созданном / развернутом приложении angular-cli

Я выполнил инструкции в ответах Angular 2 - стиль PrimeNg не работает и получил он работает в автономном приложении, обслуживаемом ng serve.

Но когда приложение создается и развертывается, стили и тема Primeng не объединяются. Элемент управления Primeng отображается без стилей и выглядит странно.

Сборка выполняется с помощью node --max-old-space-size=4096 "./node_modules/@angular/cli/bin/ng" "build" "--prod" "--aot" "--env=test" "--sourcemap"

package.json содержимое:

{
   "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"
  }

}


person Tihomir    schedule 20.09.2018    source источник


Ответы (2)


Импорт стилей в index.html в целевом веб-приложении, где развернуто приложение angular, не работал должным образом и не хотел поддерживать версию стиля в целевом проекте ...

В конце концов стили импортируются в файл css компонента , а инкапсуляция компонента изменена на ViewEncapsulation.Native.

person Tihomir    schedule 26.09.2018
comment
Каково решение ? - person Felipe Pereira; 09.08.2020
comment
Этот ответ по-прежнему является последним статусом. :) (1) Стили (файлы css) импортируются в стиль компонента и (2) инкапсуляция компонента изменена на ViewEncapsulation.Native. - person Tihomir; 10.08.2020

Вы пробовали назначить production на true в вашем environment.prod.ts файле, а после этого построить с --prod:

export const environment = {
  production: true
};

Дайте мне знать, если это сработает для вас.

person Felipe Pereira    schedule 10.08.2020