IE11 displaying empty placeholders instead of PrimeNG icons after deployment on server

Currently, I am in the midst of an Angular project that heavily relies on PrimeNg for various components.

While everything runs smoothly when testing the project locally across all browsers (including IE11 and Chrome), a hiccup arises once the project is deployed onto a Linux server. It seems that the PrimeNg icons fail to display as intended.

Upon investigating further, it has come to my attention that the CSS entities specified in the PrimeNg CSS files (refer to the snippet below) do not load properly in IE11 on the server.

.pi-exclamation-triangle:before {
    content: "\e922";
}

.pi-calendar:before {
    content: "\e927";
}

In an attempt to resolve this issue, I have inserted the following line into Index.html:

<meta http-equiv="X-UA-Compatible" content="ie=edge">

Furthermore, adjustments were made to polyfills.ts:

** For compatibility with IE9, IE10, and IE11, the following polyfills are essential. **/

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

If you have any valuable insights or suggestions regarding this matter, please feel free to share them!

Answer №1

Upon reviewing your mention of "primeng css files (see below) are not getting loaded in IE11 on the server", I have looked into possible solutions.

I came across some potential workarounds and suggestions in a discussion on Github.

  1. It is recommended to try using another machine or resetting IE settings, including checking for any group policy restrictions.

  2. Verify that your IE security settings allow/enabled the downloading of fonts.

https://i.sstatic.net/9sQZ6.png

I hope this information proves helpful in resolving your issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to align the contents of a div in the center

Looking at the content in this div, it seems that the top is positioned higher than the bottom. Can anyone provide some guidance on how to fix this? .dtestContactDet{ border-bottom:1px solid #D7D7DE; border-bottom:1px solid #D7D7DE ; -khtml-border-bo ...

Ensuring grid columns are equal for varying text sizes

I am looking to achieve equal width and spacing for columns without using the width, min-width, max-width properties. Can anyone help me accomplish this using flex or any other method? https://i.sstatic.net/xo56M.png .d-flex { display: flex; } .d-fl ...

Retrieve and showcase information from Firebase using Angular

I need to showcase some data stored in firebase on my HTML page with a specific database structure. I want to present the years as a clickable array and upon selecting a year, retrieve the corresponding records in my code. Although I managed to display a ...

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

two divs side by side with adjustable sizes

Is there a way to achieve a typical forum post layout with user info on the left and the post itself using CSS? I tried wrapping two divs around another div and using float, but encountered an issue where the floated div remains on the left instead of next ...

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

Having trouble installing Angular Material due to a getaddrinfo ENOTFOUND error?

When attempting to execute ng add @angular/material in my Angular project, I encountered the following error: Unable to fetch package metadata: request to http://registry.npmjs.org/@angular%2fmaterial failed, reason: getaddrinfo ENOTFOUND proxy.{companyna ...

CSS, Assistance in incorporating a sub menu into a drop-down menu

I'm looking to enhance my drop down menu by adding a sub menu. Specifically, I would like to create a sub menu for Item 3 in the HTML below. How can I achieve this? Thank you, Below is my CSS code: .nav_menu { width:100%; background-color:# ...

Upgrading to the official release of Angular 2 from RC6 with webpack: a step-by-step

I have been working with rc6 in Angular from the angular2 starter class. How can I upgrade to the most recent version of Angular? Is there a command that will handle the update automatically or do I need to manually adjust the versions in package.json? ...

Ways to implement a conditional statement to display a div using JavaScript

Looking for a way to utilize Javascript conditions to toggle the visibility of a div in an HTML5 document? Check out this code snippet below: #demo { width: 500px; height: 500px; background-color: lightblue; display: none; } To set the f ...

Angular and Firestore, when combined, present a unique challenge as the queries

After upgrading the code of an outdated project to the latest versions of Angular and RxJs, I made every effort to update the code as thoroughly as possible. Here is a link to my previous code However, I am now encountering the issue of receiving undefin ...

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

Setting up a variable with no operation assigned to it

As I delved into the Angular utils source code, I stumbled upon this interesting line: export const NOOP: any = () => {}; It seems pretty straightforward - a variable that doesn't perform any operation. But then, within the same library, there is ...

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

how to choose the :after pseudo-element with jQuery

Below are the codes I have tried. When this popup appears, I want to be able to close the entire popbox using the close button. CSS code .bigdiv{ display:none; background-color:#efefef; box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4); ...

The Challenge of Upgrading from AngularJS 1 to Angular 2: An Adapter Solution

<html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> <script src="https:/ ...

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

Is there a way to create a dropdown menu that transforms into a burger icon on smaller screens, while still housing all of my navigation items within it?

I'm currently working on a segment of my header that includes a navbar with 3 links, as well as a dropdown menu listing additional functionalities. Here is the current code I have: <div class="col-md-4 pt-4"> <nav class="navbar ...

Oversee various interactions for the user

I am currently utilizing NodeJs, ExpressJs, and Angular 6 for my application, but I have encountered an issue. Within my system, there is a user with the attributes: User U: { name; email; password; } Let's assume this user, named U, is ...

Several components utilizing a popup module

I have created a modal popup example where scrolling is disabled in the background but enabled within the pop-up itself. Check out my demo here: View Demo My challenge lies in implementing a grid of images on the website: Take a look at the type of grid ...