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:
Click a question to view the answer.
- Why are my CSS templates not applied in my Angular app?
- Why is Liferay Portal’s CSS broken in Internet Explorer?
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.
By default CSS files are minified in the browser. This can cause issues in Internet Explorer. You can disable this behavior by including
minifier.enabled=false in your
- 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?
There are a couple options you can use to disable reporting:
--no-trackingflag in your
package.json's build script to disable reporting:
.liferay-npm-bundler-no-trackingfile in your project's root folder, or any of its ancestors, to disable reporting.
This equates to answering
May liferay-npm-bundler anonymously report usage statistics to improve the tool over time?question.
- 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?
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
Template Engines and setting
Resource Modification Check to
As best practice, however, we recommend that you don't use taglibs in cacheable web content.
- 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.
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.
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
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.
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