Page 1 of 1

Issue in Upgrading PrimeNG along with Angular2

Posted: 09 Jun 2016, 17:54
by ernitingoel
We are using Angular2 beta, PrimeNG 1.0.0-beta.3 and 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. 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

Code: Select all

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

Code: Select all

{
	"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"
	}
}