Angular in the Liferay Portlets world

Omar harrari

omar.harrari@zango.pro
Pourquoi une portlet angular ?
Pre requis
● Node 8.12.0
● Npm 6.4.1 ● Liferay Bundle generator
● Yo 2.0.5 ● Active Liferay Frontend JS
● Angular cli 6.0.8 Portlet Extender module
Pre requis
Creation d’une simple portlet angular
1 : installation de Liferay bundle generator
npm install -g generator-liferay-bundle

2 : Liferay Frontend JS Portlet Extender module

Execusion du Liferay bundle generator
● yo liferay-bundle
Creation du portlet Angular
1) Choisir Angular based Portlet

2) Repondre au question

3) Specifier le chemin vers l’installation

Liferay
Deployment
1) Ajout de "process-serially" : true dans
le ficher .npmbundlerrc

2) npm run deploy

Npm scripts
● npm run start
● npm run build
● npm run deploy
Shared Bundle
1) execute yo Liferay-bundle

2) ajouter "process-serially" : true dans

le ficher .npmbundlerrc

3) copier le dependances du portlet angular vers

le fichier package.json dans le provider

4) spprimer init()

5) npm run deploy

Dans la portlet angular
● Modifer le fichier .npmbundlerrc

● Ajouter l’import du module angular-npm-provider

« import 'angular-npm-provider’; » dans le fichier
Polyfil.ts
Migration
Copier les fichiers
● Copier les fichiers html dans assets/app
● Copier les fichiers css dans assets/css
● Et les fichier ts dans src/app
Les Chemins relative => Web Context Path
 css

● 1 supprimer styleUtls et importer les fichiers css

dans style.css qui ce trouve dans assets/css
Angular routing dans Liferay
Angular routing dans Liferay
● Active le usehash
merci