Troubleshooting Front-End Development Issues

Front-end development involves many moving parts. Sometimes it’s hard to tell what may be causing the issues you run into along the way. This can be particularly frustrating. These frequently asked questions and answers help you troubleshoot and correct problems arising during front-end development.

Here are the troubleshooting sections:

• CSS
• Modules
• Portlets

Click a question to view the answer.

CSS

Why are my CSS templates not applied in my Angular app? 

A known bug with Angular causes absolute URLs for CSS files not to be recognized.

Due to the nature of portals, a relative URL is not an option either because the app can be placed on any page.

To fix this, you can either provide the CSS with a theme or themelet, or you can specify the path to the CSS file with the com.liferay.portlet.header-portlet-css property in the portlet containing your Angular code.

Why is Liferay Portal's CSS broken in Internet Explorer? 

By default CSS files are minified in the browser. This can cause issues in Internet Explorer. You can disable this behavior by including theme.css.fast.load=false and minifier.enabled=false in your portal-ext.properties file.

Modules

Why does my JQuery module throw an anonymous module error when I try to load it? 

If you're using an external library that you host, you must disable the Expose Global option as described in the Using External JavaScript Libraries tutorial.

Why are my source maps not showing for my Angular or Typescript module? 

This is due to LPS-83052.

To solve this, activate the inlineSources compiler option via argument or your tsconfig.json file.

I'm using the liferay-npm-bundler for multiple projects. How can I disable analytics tracking for the liferay-npm-bundler in my projects? 

There are a couple options you can use to disable reporting:

• Use the --no-tracking flag in your package.json's build script to disable reporting:

  liferay-npm-bundler --no-tracking

• Create a .liferay-npm-bundler-no-tracking file in your project's root folder, or any of its ancestors, to disable reporting.

  This equates to answering No to the May liferay-npm-bundler anonymously report usage statistics to improve the tool over time? question.

Portlets

I want to use a custom router in my Angular/React/Vue portlet. How can I disable the default Senna JS SPA engine in my portlet? 

By default, the Senna JS SPA engine is enabled in your portlets and sites. This disables full page reloads during portlet navigation.

If you want to use a custom router in your portlet instead, follow the instructions in the SPA documentation to blacklist your portlet from SPA.