Search code examples
angularliferayyeomanliferay-7

Integrating angular 8 and liferay 7.2

I'm searching for a good guide to integrate angular 8 and liferay 7.2, but I see Resources are kinda scarce.

I found this Angular tutorial But I didn´t understand if it is mandatory to execute 

   yo liferay-bundle

and create the Shared Bundle. Given that in npm site it states that generator-liferay-bundle has been renamed to generator-liferay-js. wchich is the toool used in the first part of the tutorial.

Also, is not clear how to manage components (and other angular stuff) given that the project is created through npm tools and not as an Angular CLI project and I can't use Angular commands.

Hope someone can share a good resource.

Solution

  • You can create a Liferay widget using Angular or other JS framework, but you can also create and implement your application using Angular and convert it to a widget once it is finished

    Option 1: If you want to create a Angular widget from scratch, you have to follow this instructions:

    1. Install the generator Install Node.js and npm if you don't have them already.

    Then install Yeoman by running the following command:

    npm install -g yo ↩

    Install the liferay-js generator:

    npm install -g generator-liferay-js ↩

    1. Run the generator

    After installing, you are ready to go and generate your first project, by running the command:

    yo liferay-js ↩

    Option 2: If you want to convert your Angular development to a Liferay widget, you have to follow this instructions:

    1. Install Yeoman::

    $ npm install -g yo ↩

    1. Install the liferay-js generator:

    $ npm install -g generator-liferay-js ↩

    1. Go to your project's folder:

    $ cd my-project ↩

    1. Run the generator's subtarget adapt:

    $ yo liferay-js:adapt ↩

    1. Answer the questions of the generator:

    ? Under which category should your widget be listed? category.sample ? Do you have a local installation of Liferay for development? Yes ? Where is your local installation of Liferay placed? /home/me/liferay

    1. Enjoy

    Once you've done that, your package.json will be tweaked with more new npm scripts. For example, you will be able to run (depending on what your framework of choice uses):

    $ npm run build:liferay

    or

    $ yarn run build:liferay