Angular 2+：Primeng 样式在 angular-cli builded/deployed 应用程序中不起作用

Question

我已按照答案中的说明进行操作，并在 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"
  }

}

Answer 1

在部署了 angular 应用程序的目标 Web 应用程序 index.html 中导入样式没有按预期工作，并且不想在目标项目中维护样式版本...

组件的css文件中最终导入了样式并且组件封装改为ViewEncapsulation.Native。

Answer 2

您是否尝试过在 environment.prod.ts 文件中将 production 分配给 true，然后使用 --prod:

构建

export const environment = {
  production: true
};

让我知道它是否适合你。

Angular 2+：Primeng 样式在 angular-cli builded/deployed 应用程序中不起作用

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

primeng

angular

primeng-turbotable