Blogs

When we generate some NPM modules from generator-liferay-js, you should see that the generated (.jar) module is a "bit heavy". In the case of the Angular Liferay module it is more or less 20 MB. Now, imagine we want to work with a few modules of this type and instantiate them in one page. This would bring us some problems:

• Loss of performance: JS files will be downloaded for each module (those of the dependency) which implies a longer loading time.
• Possible version conflicts: If you use different versions of angular, there might be conflicts.
• Longer build time: By having to package the module with all its dependencies, the build time is considerably high.

So, we ask ourselves, how can we solve these problems? One possible solution is to use "Shared Bundle", that is, have a common javascript library in a container as a provider and consume it from the angular modules. If you did not know it, keep reading the blog and we will explain how to do it step by step.

Requirements: Node, Yeoman and NPM Installed

  1. First, it is necessary to install generator-liferay-js by running this command:

  2. Run the generator inside your “liferay-workspace/modules” or some other project folder which you are using:

  3. Choose the “Shared Bundle” type and fill the rest of the information needed:

  4. Open the src/index.js and add after init():

  5. Now create an Angular Project, running the generator inside your “liferay-workspace/modules” or some other project folder which you are using: 

  6. Choose the “Angular Widget” type and fill in the rest information necessary:

  7. Open the package.json and copy all inside “dependencies”. 

 8. Paste as “dependencies” in your package.json file of your “Shared Bundle” created before.

  9. Inside the “Shared Bundle” project run

  10. Back to Angular Widget, now open the .npmbundlerrc file (see below the  configuration needed)

           a. Exclude all dependencies declared inside the project, add the following

      b. Import all dependencies you need to pull from the “Shared Bundle”. We can do through “config/imports” + the name of the provider. It should look like this:

      c. Finally if you want to access the index.js from your provider, just need to add the provider without namespace inside the “imports”

• The final code of .npmbundlerrc file should be look this way:

11. Open the src/polyfills.ts and import your provider

    a. This import, loads main file (index.js) from provider 

  12. Back to your Angular Project, eliminate everything inside the build folder.

  13. Finally, we will deploy both projects: the consumer (Angular Widget) and the provider (Shared Bundle). To do that, run inside each project: 

npm run deploy

                                  .... Now the Angular Project should be much lighter :) .....

Here my Git repo with some samples:  https://github.com/RoselaineMarquesMontero/liferay-workspace-shared-library/tree/main/modules