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
• Templates
• Themes

Click a question to view the answer.

CSS

• Why are my CSS templates not applied in my Angular app?
• Why is Liferay Portal’s CSS broken in Internet Explorer?

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?
• Why are my source maps not showing for my Angular or Typescript module?
• I’m using the liferay-npm-bundler for multiple projects. How can I disable analytics tracking for the entire tool across all my projects?

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?

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.

Templates

• Why does my web content break when I refresh the page?

Why does my web content break when I refresh the page? 

Some taglibs, such as the liferay-map taglib, have limitations when used in a cacheable template (e.g., FreeMarker and Velocity). For instance, when the liferay-map taglib is used in a cacheable template and the user refreshes the page, the map does not show.

One possible workaround is to disable cache for the template by editing it and unchecking the cacheable option. Alternatively, you can disable cache for all templates by navigating to System Settings→Template Engines and setting Resource Modification Check to 0.

As best practice, however, we recommend that you don't use taglibs in cacheable web content.

Themes

• How can I use the Classic theme as my base theme?
• How can I include OSGi headers in my theme?
• Why aren’t my changes showing up after I redeploy my theme?
• Why is my theme not loading? It returns the default theme instead.
• How can I prevent specific CSS rules from transforming for RTL Languages?

How can I use the Classic theme as my base theme? 

The Classic theme is already an implementation of an existing base theme and should not be extended. You can use the Gulp kickstart task to copy files from the Classic theme into your theme if you wish. If you want to start off with some base styling, start with the Styled theme instead.

How can I include OSGi headers in my theme? 

Specify the headers you want to use in your theme's liferay-plugin-package.properties file. Any headers placed in this file are included automatically in your MANIFEST and the OSGi bundle.

For example, you can add OSGi dependencies in your theme by importing the exported package with the Import-Package header:

Import-Package:com.liferay.docs.portlet

Why aren't my changes showing up after I redeploy my theme? 

By default CSS, JS, and theme template files are cached in the browser. During development, you can enable Devloper Mode to prevent your theme's files from caching.

Why is my theme not loading? It returns the default theme instead. 

If you receive the warning "No theme found for specified theme id...", you may be referencing an outdated theme ID in your Site. Verify that the theme ID in your theme's liferay-look-and-feel.xml matches the theme ID in the warning message: "mytheme_WAR_mytheme". If the theme IDs match, there may be pages using the outdated theme instead of the Site theme. You can verify this by checking the pages manually or searching the database for layouts with values for themeId -.

How can I prevent specific CSS rules from transforming for RTL Languages? 

You can prevent specific CSS rules from transforming (flipping) with the /* @noflip */ decoration. Place the decoration to the left of the CSS rule to apply it. For example, this rule gives a left margin of 20em to the body no matter if the selected language is LTR or RTL:

      /* @noflip */ body {
       margin-left: 20em;
      }
      

You can also use the .rtl CSS selector for rules that exclusively apply to RTL languages.