0

Angular2 alpha、PrimeNG 1.0.0-beta.3、angular2-webpack-starter 5.0.4 を使用しています。

これらすべてを最新バージョンにアップグレードしたいと思います。

アップデートを試みましたが、アップグレード後、使用していた PrimeNG コンポーネントが期待どおりに表示されません。コンパイル エラーやブラウザ コンソール エラーはありません。

何かが欠けているのではないかと思います。

誰かがこのように更新しようとして、そのために必要な変更を知っていますか?

コンパイルエラーを取り除くために、インポートステートメントとその他のいくつかの変更を既に行っています。

現在作業中の 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"
   }
}

これが私たちの新しい不完全な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"
   }
}
4

1 に答える 1

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" />

その後、コンポーネントは正しく表示されます

この回避策がお役に立てば幸いです

于 2016-06-14T02:26:49.470 に答える