UI rendering issue with ng production build

[BlackThunderParticipant]

Cli & Libraries versions

Angular CLI: 8.3.20
Node: 11.12.0
OS: win32 x64
Angular: 8.2.14

“@angular/animations”: “~8.2.13”,
“@angular/common”: “~8.2.13”,
“@angular/compiler”: “~8.2.13”,
“@angular/core”: “~8.2.13”,
“@angular/forms”: “~8.2.13”,
“@angular/platform-browser”: “~8.2.13”,
“@angular/platform-browser-dynamic”: “~8.2.13”,
“@angular/router”: “~8.2.13”,
“jqwidgets-ng”: “^8.3.2”,
“rxjs”: “~6.4.0”,
“tslib”: “^1.10.0”,
“zone.js”: “~0.9.1″
typescript”: “~3.5.3”

Steps to reproduce

1. Create new angular project using ‘ng new’
2. Add jqwidgets-ng library i.e. ‘npm install jqwidgets-ng’
3. Add jqx.base.css in angular.json
4. Use demo project to add menu component demo-angular-menu-defaultfunctionality
5. Build for production i.e. ‘ng build –prod’
6. Bring up the page using webserver. e.g. ‘npx http-server –port 8080 –path <path to dist>’
7. Open page in browser, check rendering of menu and submenu. Everything will be as expected
8. Refresh the page, check rendering of menu and submenu. You will notice rendering issue with submenu items

*Note:
– Enable caching in browser. If caching is disabled this issue won’t reproduce
– With nested jqwidgets components (splitter, tabs, panel etc), UI rendering issues will be more.

Tried to put demo project in jseditor, don’t know how to add jqwidget-ng library

[HristoParticipant]

Hello BlackThunder,

I tested the mentioned example and it seems to work fine.
For example, I use the tutorial below:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-cli-with-jqwidgets-ng/index.htm?search=
After that with the ng build --base-href ./ --prod command build the project.
I use the XAMPP to create a server to host the files from the dist folder.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[BlackThunderParticipant]

Hi Hristo Hristov,

Thank you for your prompt reply. Issue is still reproducible after trying suggested build command and using XAMPP as web server.

For your reference I have included the following, kindly go through them

1. Link to video file

Link to mp4 video file
https://drive.google.com/file/d/1WCVX2W46R2uUpen26xwOWgu13MXjEiHo/view

2. Link to project source zip

Project Source zip
https://drive.google.com/file/d/1IPcZm_Akem8WKoIsb-8MHMeyX4hdB6g9/view?usp=sharing

For your information, <strong>ng build</strong> works as expected, where as <strong>ng build --base-href ./ --prod</strong> has issues after page refresh.

Regards,
BlackThunder

[HristoParticipant]

Hello BlackThunder,

Thank you for the video and the example.
But when I try to run this example it was not possible.
I use the “npm install” command to prepare the environment and after that “ng serve” command to run the example.
But I try after that to build it and it seems to work fine.
Something more that I saw is that you use different OS I try this example on Windows 10 Pro.
I would like to suggest trying to reproduce this with our Angular demos from the website to check is this happens at a specific instance:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/defaultfunctionality.htm?light#CustomerService

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[BlackThunderParticipant]

Hi Hristo Hristov,

Thank you for taking time and reviewing the video and sample project. Excuse me for not mentioning steps to build project i.e. npm install, ng build –prod

Following are the few observations

– “ng serve” will not reproduce the issue.

– “ng serve –prod” will reproduce the issue.

– “ng build” will not reproduce the issue.

– “ng build –prod” will reproduce the issue. For this we have to use any web server for hosting.

– Issue is reproducing in the following browser client environments (available with me for testing)
— Windows 7 64 bit: Google Chrome 78 (64 bit) and Firefox 71 (32 bit)
— Windows 10 Pro 64 bit: Google Chrome 78 (64 bit) and Firefox 71 (64 bit)
— Mac 10.12.6: Google Chrome 78 (64 bit)

– Issue is reproducing even with jqwidgets-scripts/jqwidgets-ts when used instead of jqwidgets-ng.

– Issue is reproducing irrespective of OS used for building and hosting project, i.e. Windows 7 64 bit or Windows 10 Pro 64 bit or Mac 10.12.6 64 bit

– In “https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/defaultfunctionality.htm?light#CustomerService” issue is not reproducing
— Noticed: this is not angular project

– In “https://www.jqwidgets.com/angular/angular-menu/angular-menu-defaultfunctionality.htm?material” issue is not reproducing
— Noticed: project target is es2015

Important observations

– Issue is not reproducing when project target (file:tsconfig.json, key: compilerOptions.target) is “es2015”, it is reproducing only when project target is “es5”
— We can not use “es2015” as target for regular project as “Generating ES5 bundles for differential loading” never completes

– Issue is not reproducing when project target is “es5” and built with following command “ng build –prod –extractCss=false”

Note for sample project:
– First page load will not reproduce the issue
– Second and subsequent page refresh (F5, normal reload) will reproduce the issue
– Hard reload will not reproduce the issue

Kindly advice.

Regards,
BlackThunder

[HristoParticipant]

Hello BlackThunder,

I am sorry about the example it is simple JavaScript/jQuery example I mean this one:
https://www.jqwidgets.com/angular/angular-menu/angular-menu-defaultfunctionality.htm?material
I saw that you know it.

Thank you for the clarifications with this I reproduce your issue.
The example that you provide has an additional container app-default-view as a parent which has styles.
I remove these styles and the jqxMenu work fine.
The way that I use to reproduce it was to use the ng build --prod command after that I mentioned above without the styles and build it again and it looks fine.
The changes that I do was on app.component.html file:

<div>
    <app-default-view></app-default-view>
</div>

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[BlackThunderParticipant]

Hi Hristo Hristov,

The style used in app.component.html is based on Blog: fluid-layout-with-fixed-header-and-footer, our main app UI layout is similar to one described in blog post.

To keep issue reproduction simple, have used jqxmenu component in sample project.

Even after removing inline style of div element as suggested, issue is still reproducing.

I am sharing two builds for review, in both build issue is reproducible. For both builds base-href is ‘/’

build01: Regular build with default build parameters as below

“optimization”: true,
“outputHashing”: “all”,
“sourceMap”: false,
“extractCss”: true,
“namedChunks”: false,
“aot”: true,
“extractLicenses”: true,
“vendorChunk”: false,
“buildOptimizer”: true

build02: Modified parameters to make to easy to go through manually

“optimization”: false,
“outputHashing”: “all”,
“sourceMap”: true,
“extractCss”: true,
“namedChunks”: false,
“aot”: false,
“extractLicenses”: true,
“vendorChunk”: false,
“buildOptimizer”: false

Download link for builds zip file

Command to bring up cli http-server: npx http-server –port 8080 .

Kindly advice.

Regards,
BlackThunder

[HristoParticipant]

Hello BlackThunder,

Did you try to clear the cache of the browser because I tried these builds and they seem to work fine?
The goal of the mentioned article is to create a fluid menu.
For this purpose in Angular you could add width and height in percentage to the desired size:

[width]="'100%'"
 [height]="'100%'"

Please, take a look at this demo.

On the other side, if you have this component directly placed on the main page you should add these styles settings:

<style type="text/css">
	 html, body {
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
	}
</style>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[BlackThunderParticipant]

Hi Hristo Hristov,

Followed your recommendations, here is the update

– Added following in styles.css

html, body {
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
	} 

-Add following in app.component.html

<jqxMenu [theme]="'material'" #jqxMenu
         [width]="'100%'"
         [height]="'100%'">
  <ul>
    <li><a href="#Home">Home</a></li>
    <li>
      Solutions
      <ul style='width: 250px;'>
        <li><a href="#Education">Education</a></li>
        <li><a href="#Financial">Financial services</a></li>
        <li><a href="#Government">Government</a></li>
        <li><a href="#Manufacturing">Manufacturing</a></li>
        <li type='separator'></li>
        <li>
          Software Solutions
          <ul style='width: 220px;'>
            <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
            <li><a href="#Mobile">Mobile</a></li>
            <li><a href="#RIA">Rich Internet applications</a></li>
            <li><a href="#TechnicalCommunication">Technical communication</a></li>
            <li><a href="#Training">Training and eLearning</a></li>
            <li><a href="#WebConferencing">Web conferencing</a></li>
          </ul>
        </li>
        <li><a href="#">All industries and solutions</a></li>
      </ul>
    </li>
    <li>
      Products
      <ul>
        <li><a href="#PCProducts">PC products</a></li>
        <li><a href="#MobileProducts">Mobile products</a></li>
        <li><a href="#AllProducts">All products</a></li>
      </ul>
    </li>
    <li>
      Support
      <ul style='width: 200px;'>
        <li><a href="#SupportHome">Support home</a></li>
        <li><a href="#CustomerService">Customer Service</a></li>
        <li><a href="#KB">Knowledge base</a></li>
        <li><a href="#Books">Books</a></li>
        <li><a href="#Training">Training and certification</a></li>
        <li><a href="#SupportPrograms">Support programs</a></li>
        <li><a href="#Forums">Forums</a></li>
        <li><a href="#Documentation">Documentation</a></li>
        <li><a href="#Updates">Updates</a></li>
      </ul>
    </li>
    <li>
      Communities
      <ul style='width: 200px;'>
        <li><a href="#Designers">Designers</a></li>
        <li><a href="#Developers">Developers</a></li>
        <li><a href="#Educators">Educators and students</a></li>
        <li><a href="#Partners">Partners</a></li>
        <li type='separator'></li>
        <li>By resource</li>
      </ul>
    </li>
    <li>
      Company
      <ul style='width: 180px;'>
        <li><a href="#About">About Us</a></li>
        <li><a href="#Press">Press</a></li>
        <li><a href="#Investor">Investor Relations</a></li>
        <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
        <li><a href="#Careers">Careers</a></li>
        <li><a href="#Showcase">Showcase</a></li>
        <li><a href="#Events">Events</a></li>
        <li><a href="#ContactUs">Contact Us</a></li>
        <li><a href="#Become an affiliate">Become an affiliate</a></li>
      </ul>
    </li>
  </ul>
</jqxMenu>

– built project using command

ng build --prod --base-href=/

– hosted in xampp, also tried with npx http-server
– Issue is still reproducing in both servers

Please find the build at build.zip link: https://drive.google.com/file/d/1GMhCoBWpF-3WmtiG4n0R8f9qaffYQ3to/view?usp=sharing

Screenshot of UI rendering issue

link: https://drive.google.com/file/d/18arNs1RFEo688vfs4A-HXZSauqXs1QxZ/view?usp=sharing

Note: This issue cannot be reproduced in stackblitz environment. Need to be host in web server. This issue is reproducible with normal page refresh which loads css and js files from browser cache (which is most common end user browser settings, allows caching of css and js)

Regards,
BlackThunder

[HristoParticipant]

Hello BlackThunder,

Yes, I saw in your builds they reproduce this.
But I try this tutorial and I use all the mentioned settings as in the “Fluid Size” demo.
Without including the mentioned styles settings and it seems to work fine in the production build.
In previous builds that you provide, they have a strange behavior after the refresh but after I create it as a new project it was fine.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[BlackThunderParticipant]

Hristo Hristov,

Thank you for the reply. Wish you and your team happy new year 2020.

Please find my observations. For practical purpose setting jqxmenu height to 100% is not suitable as in the fluid size example, i have removed it in the sample project.

1. When compileroptions target is es2015 in tsconfig.json

– Issue is not reproducing in Google Chrome latest version
– Issue is reproducing in Firefox latest version

2. When compileroptions target is es15 in tsconfig.json

– Issue is reproducing in Google Chrome latest version (now it take more number of refreshes)
– Issue is reproducing in Firefox latest version

Regards,
BlackThunder

[HristoParticipant]

Hello BlackThunder,

Thank you for these details.
It seems that it has a cache.
I will try to recreate it and I hope I could provide you a solution.
Also, I will discuss this with my colleagues.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[BlackThunderParticipant]

Hristo Hristov,

There was a typo in REPLY #107720:

Please read “2. When compileroptions target is es15 in tsconfig.json”

as

“2. When compileroptions target is es5 in tsconfig.json”

Sorry for the inconvenience caused.

Regards,
BlackThunder

[HristoParticipant]

Hello BlackThunder,

I debug it again and it set padding-left with 40px size.
It seems there is an issue with the timing of the browser (Firefox).
For this reason, I would like to suggest an approach below while this is not fixed.
To create it the item just a while after the page is loaded with the [auto-create]="false" option.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts