Question

我已经按照Angular 2 - PrimeNg style not working答案中的说明进行了操作，并使其在与ng serve一起提供的独立应用程序中工作。

但是在构建和部署应用程序时，primng样式和主题不会捆绑在一起。 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

在部署了角度应用程序的目标Web应用程序中的index.html中导入样式无法按预期方式进行，并且不想在目标项目中维护样式版本...

最后将样式导入组件的css文件中，并且组件封装更改为ViewEncapsulation.Native。

Answer 2

您是否尝试过将previous文件中的production分配给true，然后用environment.prod.ts进行构建：

--prod

让我知道它是否对您有用。

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

2 个答案: