与Angular2 webpack一起升级PrimeNG的问题

时间：2016-06-09 18:23:56

标签： angular webpack primeng

我们使用的是Angular2 alpha，PrimeNG 1.0.0-beta.3和angular2-webpack-starter 5.0.4。

现在我们想将所有这些内容升级到最新版本。

我们尝试更新它，但是我们使用的PrimeNG组件在升级后现在没有按预期显示。我们没有任何编译或浏览器控制台错误。

我想我们可能会遗漏一些东西。

是否有人试图像这样更新并知道我们需要做哪些更改？

我们已经更改了导入声明＆amp;删除任何编译错误的其他一些事情。

我们当前的工作包.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"
   }
}

这是我们新的错误的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 个答案:

答案 0 :(得分：0)

我根据primeng文档导入了样式，但无法从文件夹node_modules/primeui

中找到

作为解决方法，我复制了

node_modules/primeui/themes
node_modules/primeui/primeui-ng-all.min.css
node_modules/primeui/primeui-ng-all.min.js

到assets文件夹。 Webpack将assets文件夹的内容复制到dist文件夹

new CopyWebpackPlugin ([{
    from: 'src/assets'
    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" />

然后组件正确显示

希望此解决方法可以帮助您

相关问题
最新问题