Presentation about Angular Portlet in liferay

1. Angular in the Liferay Portlets world
Omar harrari
omar.harrari@zango.pro

2. Pourquoi une portlet angular ?

3. Pre requis
● Node 8.12.0
● Npm 6.4.1
● Yo 2.0.5
● Angular cli 6.0.8
● Liferay Bundle generator
● Active Liferay Frontend JS
Portlet Extender module

4. Pre requis

5. 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

6. Execusion du Liferay bundle generator
● yo liferay-bundle

7. Creation du portlet Angular
1) Choisir Angular based Portlet
2) Repondre au question
3) Specifier le chemin vers l’installation
Liferay

8. Deployment
1) Ajout de "process-serially" : true dans
le ficher .npmbundlerrc
2) npm run deploy

9. Npm scripts
● npm run start
● npm run build
● npm run deploy

10. 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

11. 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

12. Migration

13. Copier les fichiers
● Copier les fichiers html dans assets/app
● Copier les fichiers css dans assets/css
● Et les fichier ts dans src/app

14. Les Chemins relative => Web Context Path

15. css
● 1 supprimer styleUtls et importer les fichiers css
dans style.css qui ce trouve dans assets/css

16. Angular routing dans Liferay

17. Angular routing dans Liferay
● Active le usehash

18. merci