Blogs

Angular is a framework that many developers use and with new each new version there are more features that developers want to use. For developers using the Liferay JS Portlet generator, you may be wondering how to upgrade your portlets to work with version 8 of Angular. Fortunately for you, after making the version changes in your package.json and updating one line in polyfill.ts you are good to go! Please note that this blog post is about portlets generated using the yeoman generator for JS only Liferay portlets.

Here is the package.json file:

    
{
	"name": "my-project",
	"version": "1.0.0",
	"description": "My Project",
	"devDependencies": {
		"liferay-npm-bundler": "2.11.0",
		"liferay-npm-build-support": "2.11.0",
		"copy-webpack-plugin": "4.6.0",
		"webpack": "4.29.6",
		"webpack-cli": "3.3.0",
		"webpack-dev-server": "3.2.1",
		"@angular-devkit/build-angular": "0.802.0",
		"@angular/cli": "8.2.0",
		"@angular/compiler-cli": "8.2.0",
		"@angular/language-service": "8.2.0",
		"@types/jasmine": "3.3.16",
		"@types/jasminewd2": "2.0.6",
		"@types/node": "12.6.8",
		"codelyzer": "5.1.0",
		"jasmine-core": "3.4.0",
		"jasmine-spec-reporter": "4.2.1",
		"karma": "4.2.0",
		"karma-chrome-launcher": "3.0.0",
		"karma-coverage-istanbul-reporter": "2.1.0",
		"karma-jasmine": "2.0.1",
		"karma-jasmine-html-reporter": "1.4.2",
		"protractor": "5.4.2",
		"ts-node": "8.3.0",
		"tslint": "5.18.0",
		"typescript": "3.5.3",
		"ts-loader": "6.0.4"
	},
	"dependencies": {
		"@angular/animations": "8.2.0",
		"@angular/common": "8.2.0",
		"@angular/compiler": "8.2.0",
		"@angular/core": "8.2.0",
		"@angular/forms": "8.2.0",
		"@angular/http": "7.2.15",
		"@angular/platform-browser": "8.2.0",
		"@angular/platform-browser-dynamic": "8.2.0",
		"@angular/router": "8.2.0",
		"core-js": "3.1.4",
		"rxjs": "6.5.2",
		"zone.js": "0.10.0"
	},
	"scripts": {
		"build": "tsc && npm run copy-assets && liferay-npm-bundler",
		"copy-assets": "lnbs-copy-assets",
		"translate": "lnbs-translate",
		"deploy": "npm run build && lnbs-deploy",
		"start": "lnbs-start"
	},
	"portlet": {
		"com.liferay.portlet.display-category": "category.sample",
		"com.liferay.portlet.header-portlet-css": "/css/styles.css",
		"com.liferay.portlet.instanceable": true,
		"javax.portlet.name": "my_project",
		"javax.portlet.security-role-ref": "power-user,user",
		"javax.portlet.resource-bundle": "content.Language"
	},
	"main": "index.js"
}
    

For security reasons, I think it is good to lock down your package versions. You can always update them later, but this way you know what versions you are including and can test upgrades individually. When creating this sample I used the latest version (as of 8/1/2019) for each package.

From here you are able to deploy your module using the npm run deploy command, but you may notice that your module does not appear on the page when added to a page. That is because we need to make a change to polyfills.ts due to a change in core-js.

Before making the change the polyfills.ts file contains the following import:

import 'core-js/es7/reflect';

with the update to version 3.x of core-js we need to change the import to:

import 'core-js/proposals/reflect-metadata';

Presto! Now our code appears!

That is all for now, you are now able to create a module using Angular 8, enjoy! You can see my code on this repo.