与Angular2 Webpack一起升级PrimeNG的问题
[英]Issue in Upgrading PrimeNG along with Angular2 webpack
问题描述
We are using Angular2 alpha, PrimeNG 1.0.0-beta.3 and angular2-webpack-starter 5.0.4. 
我们正在使用Angular2 alpha，PrimeNG 1.0.0-beta.3和angular2-webpack-starter 5.0.4。
Now we would like to upgrade all these things to latest versions. 现在，我们想将所有这些东西升级到最新版本。
We tried to update it however the PrimeNG components we were using are not displayed as expected now after upgrading it. 我们尝试更新它，但是升级后，我们正在使用的PrimeNG组件现在未按预期显示。 We don't have any compilation or browser console errors. 我们没有任何编译或浏览器控制台错误。
I guess we may be missing something. 我想我们可能会缺少一些东西。
Has anybody tried to update like this and know what changes we need to do that? 是否有人尝试过这样的更新并知道我们需要做哪些更改？
We already changed the import statements & few other things to remove any compilation error. 我们已经更改了导入语句和其他一些东西，以消除任何编译错误。
Our current working package.json 我们当前的工作package.json
{
"name": "angular2-webpack-starter",
"version": "5.0.4",
"description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
"author": "Patrick Stapleton <patrick@angularclass.com>",
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
"license": "MIT",
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"protractor": "protractor",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:dev",
"watch:dev": "npm run build:dev -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint 'src/**/*.ts'",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "npm run protractor",
"e2e:live": "npm run e2e -- --elementExplorer",
"pretest": "npm run lint",
"test": "node --max-old-space-size=4096 node_modules/karma/bin/karma start",
"ci": "npm run e2e && npm run test",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "npm run typings -- install",
"preversion": "npm test",
"version": "npm run build",
"postversion": "git push && git push --tags"
},
"dependencies": {
"@angular2-material/button": "2.0.0-alpha.3",
"@angular2-material/card": "2.0.0-alpha.3",
"@angular2-material/checkbox": "2.0.0-alpha.3",
"@angular2-material/core": "2.0.0-alpha.3",
"@angular2-material/input": "2.0.0-alpha.3",
"@angular2-material/list": "2.0.0-alpha.3",
"@angular2-material/progress-circle": "2.0.0-alpha.3",
"@angular2-material/radio": "2.0.0-alpha.3",
"@angular2-material/sidenav": "2.0.0-alpha.3",
"@angular2-material/toolbar": "2.0.0-alpha.3",
"angular2": "2.0.0-beta.15",
"angular2-jwt": "^0.1.13",
"core-js": "^2.2.2",
"normalize.css": "^4.1.1",
"primeng": "1.0.0-beta.3",
"primeui": "4.1.8",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.25",
"zone.js": "~0.6.11",
"ag-grid": "4.1.x",
"ag-grid-ng2": "4.1.x"
},
"devDependencies": {
"angular2-hmr": "~0.5.5",
"awesome-typescript-loader": "~0.17.0",
"codelyzer": "0.0.15",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.15.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^0.5.5",
"karma-jasmine": "^0.3.8",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"parse5": "^2.1.5",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.2.2",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.3",
"rimraf": "^2.5.2",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.1",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.3.12",
"typescript": "~1.8.9",
"typings": "^0.8.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.12.0",
"script-loader": "^0.6.1",
"ts-loader": "^0.8.1"
},
"repository": {
"type": "git",
"url": "https://github.com/angularclass/angular2-webpack-starter.git"
},
"bugs": {
"url": "https://github.com/angularclass/angular2-webpack-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
Here is our new faulty package.json 这是我们新的有问题的package.json
{
"name": "angular2-webpack-starter",
"version": "5.0.5",
"description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
"keywords": [
"angular2",
"webpack",
"typescript"
],
"author": "Patrick Stapleton <patrick@angularclass.com>",
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
"license": "MIT",
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"protractor": "protractor",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:dev",
"watch:dev": "npm run build:dev -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint src/**/*.ts",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "npm run protractor",
"e2e:live": "npm run e2e -- --elementExplorer",
"pretest": "npm run lint",
"test": "karma start",
"ci": "npm test && npm run e2e",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "npm run typings -- install",
"preversion": "npm test",
"version": "npm run build",
"postversion": "git push && git push --tags"
},
"dependencies": {
"@angular/http": "2.0.0-rc.1",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/platform-server": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular2-material/button": "2.0.0-alpha.5-2",
"@angular2-material/card": "2.0.0-alpha.5-2",
"@angular2-material/checkbox": "2.0.0-alpha.5-2",
"@angular2-material/core": "2.0.0-alpha.5-2",
"@angular2-material/input": "2.0.0-alpha.5-2",
"@angular2-material/list": "2.0.0-alpha.5-2",
"@angular2-material/progress-circle": "2.0.0-alpha.5-2",
"@angular2-material/radio": "2.0.0-alpha.5-2",
"@angular2-material/sidenav": "2.0.0-alpha.5-2",
"@angular2-material/toolbar": "2.0.0-alpha.5-2",
"systemjs": "0.19.27",
"reflect-metadata": "0.1.3",
"angular2-jwt": "^0.1.13",
"core-js": "^2.4.0",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.6",
"zone.js": "~0.6.12",
"ag-grid": "4.2.x",
"ag-grid-ng2": "4.2.x",
"primeng": "1.0.0-beta.7",
"primeui": "4.1.12"
},
"devDependencies": {
"@angularclass/angular2-beta-to-rc-alias": "~0.0.3",
"angular2-hmr": "~0.7.0",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"protractor": "^3.2.2",
"parse5": "^1.5.1",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"remap-istanbul": "^0.6.3",
"rimraf": "^2.5.2",
"codelyzer": "~0.0.19",
"tslint": "^3.7.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.3",
"typedoc": "^0.3.12",
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.8.1",
"awesome-typescript-loader": "~0.17.0",
"tslint-loader": "^2.1.3",
"url-loader": "^0.5.7",
"style-loader": "^0.13.1",
"raw-loader": "0.5.1",
"source-map-loader": "^0.1.5",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"json-loader": "^0.5.4",
"es6-promise-loader": "^1.0.1",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"http-server": "^0.9.0",
"html-webpack-plugin": "^2.17.0",
"copy-webpack-plugin": "^3.0.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.13.0"
},
"repository": {
"type": "git",
"url": "https://github.com/angularclass/angular2-webpack-starter.git"
},
"bugs": {
"url": "https://github.com/angularclass/angular2-webpack-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
1 个解决方案
解决方案1
0 2016-06-14 02:26:49
I had imported styles according primeng documentation, but can not be located from the folder node_modules/primeui 我已经根据primeng文档导入了样式，但是无法从node_modules/primeui文件夹中node_modules/primeui
As workaround, i had copied 解决方法是，我复制了
node_modules/primeui/themes
node_modules/primeui/primeui-ng-all.min.css
node_modules/primeui/primeui-ng-all.min.js
to the assets folder. 到assets文件夹。 Webpack copies the contents of assets folder to dist folder Webpack将assets文件夹的内容复制到dist文件夹
new CopyWebpackPlugin ([{
from: 'src/assets'
to: 'assets'
}]),
In the index.html , i had changed node_modules to assets 在index.html ，我已将node_modules更改为assets
<link rel="stylesheet" type="text/css" href="assets/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="assets/icon/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/primeui/primeui-ng-all.min.css" />
then the components are displayed correctly 然后正确显示组件
Hope this workaround helps you 希望这个解决方法能对您有所帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
angular2 primeng文件上传问题 - angular2 primeng fileupload issue
PrimeNG（PrimeUI）+ Webpack + angular2 +打字稿 - PrimeNG (PrimeUI) + Webpack + angular2 + typescript
使用Webpack将PrimeNG添加到Angular2应用程序中 - Add PrimeNG into Angular2 app using Webpack
Pouchdb Angular2 Webpack问题 - Pouchdb Angular2 webpack issue
Angular2，PrimeNG，日历，jQuery，webpack datepicker不是函数 - Angular2, PrimeNG, Calendar, jQuery, webpack datepicker is not a function
angular2 中的树 - Tree in primeng in angular2
带有Elasticsearch的Angular2 / Webpack：CORS问题 - Angular2/Webpack with Elasticsearch: CORS issue
WebPack Angular 2上的PrimeNG日程安排 - PrimeNG Schedule on WebPack Angular 2
带有primeng的Angular2复选框失败 - Angular2 checkbox with primeng fails
Angular2 底图未呈现 - Angular2 primeng chart not rendering
相关标签