Angular 2+:Primeng 风格在 angular-cli 构建/部署的应用程序中不起作用



我已经按照 Angular 2 中的说明进行操作 - PrimeNg 风格的不起作用答案,并在与ng serve一起提供的独立应用程序中工作。

但是,在构建和部署应用程序时,不会捆绑原始样式和主题。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"
}

}

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

样式最终导入到组件的 css 文件中组件封装更改为ViewEncapsulation.Native

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

export const environment = {
production: true
};

让我知道它是否适合您。

最新更新