2016-06-09 78 views
0

我们使用Angular2 alpha,PrimeNG 1.0.0-beta.3和angular2-webpack-starter 5.0.4。问题在升级PrimeNG以及Angular2 webpack

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

我们尝试更新它,但是我们使用的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 <[email protected]>", 
    "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 <[email protected]>", 
    "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" 
    } 
} 
+0

你得到了什么错误?你的webpack配置是什么样的?你有什么尝试? –

回答

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_modulesassets

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

然后将零部件正确显示

希望这个解决方法可以帮助你