The Angular 6 website is functioning perfectly on all browsers when viewed locally, but is encountering compatibility issues on

  • My Angular 6 website
  • VMware virtual machine environment
  • Windows Server 2012 R2 Standard server

The Angular website runs smoothly on Chrome browser on my personal laptop.

  • Interestingly, the same website performs well on Internet Explorer on my laptop.
  • However, upon deployment to the client server through a virtual machine, the Chrome version of the website functions properly.
  • On the contrary, the Internet Explorer version displays a blank white page across all versions and virtual machines in the data center.
  • No errors or warnings are shown in the console, and the relevant polyfills.ts lines remain uncommented.

Upon changing IE to compatibility mode, I noticed the following errors in the console:

SCRIPT5009: 'Promise' is undefined
jspdf.min.js (118,654)
SCRIPT1002: Syntax error
main.js (8527,59)
SCRIPT5011: Can't execute code from a freed script
zone.js (2775,1)
angulartypescriptinternet-explorerpolyfills

Answer №1

If you're looking to make your Angular App compatible with Internet Explorer, head over to the polyfills.ts file and make sure to uncomment the following lines:

/** To support IE9, IE10, and IE11, the following polyfills are required. **/
 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/weak-map';
 import 'core-js/es6/set';

Answer №2

There is a well-known issue with zone.js and the IE Developer Tools that causes bugs to occur. https://github.com/angular/angular/issues/31723

To work around this problem during development, you can include this line before loading zone.js

(window as any).__Zone_enable_cross_context_check = true;
import 'zone.js/dist/zone';

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

Redefining the type of an existing function in Typescript: A step-by-step guide

If you're looking for a solution where you can declare an existing function without defining an expression, check out this article: . Rather than creating a new function, the goal is to declare the existing function in a similar manner without using t ...

javascripttypescript

How to dismiss ion-fab when clicking anywhere else on the screen (using Vue 3 and Ionic

Is there a way to close my ion-fab-button when clicking outside of it? I know this was possible with fab container in previous versions of Ionic, but it seems not feasible now. Does anyone have a solution for this? Here is my template: <ion-fab horizon ...

typescriptvue.jsionic-frameworkvuejs3

What could be causing the Google OAuth callback to fail upon the initial login attempt on my site?

I have developed a website that allows users to log in with Google. The following code is used to verify if the user has logged in before. If they have, they are simply logged into the site. However, if it's their first time logging in, they are added ...

node.jstypescriptexpressoauth-2.0passport.js

Incorporate a dynamic background image that adapts to the width of an element

In my Angular application, I am utilizing a mat-card component to showcase the details of each individual prof object: <mat-card class="mat-elevation-z4"> <mat-card-header> <mat-card-title>{{prof["fullName&quo ...

angular

Dynamic Text Labels in Treemap Visualizations with Echarts

Is it possible to adjust the text size dynamically based on the size of a box in a treemap label? I haven't been able to find a way to do this in the documentation without hardcoding it. Click here for more information label: { fontSize: 16 ...

javascriptreactjstypescriptecharts

Distinguishing Between TypeScript Interface Function Properties

Could anyone clarify why the assignment to InterfaceA constant is successful while the assignment to InterfaceB constant results in an error? interface InterfaceA { doSomething (data: object): boolean; } interface InterfaceB { doSomething: (data: obje ...

typescriptfunctioninterfaceproperties

Combining conditions with concatenation in [ngClass]: A step-by-step guide

My dilemma involves a div that I want to blur or reduce opacity on mouse enter. To achieve this, I've defined two CSS classes: .blur and .less-opacity CSS Stylesheet .blur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter ...

angularfont-awesomeangular8ng-classproperty-binding

Testing an Angular component with @Input through unit testing

I am dealing with an angular component that utilizes an @input attribute and processes it in the ngOnInit. When writing unit tests for @inputs, I usually set the value using component.inputproperty=value. However, in this case, I cannot do so due to the ...

angularunit-testinginput

Varieties of types within class structures

I've been delving into the world of implementing generic types in classes, but it seems that my understanding of what can and cannot be done with generics is a bit lacking. Hopefully someone out there can shed some light on this for me! My Objective ...

javascripttypescriptclassgenerics

I am encountering TypeScript errors during the build process due to importing extracted .graphql files which are causing unresolved types

Within my project, I have a file called @/graphql/mutations.graphql which contains the following code: mutation addCharacterToUser($userId: ID!, $characterId: ID!) { addCharacterToUser(userId: $userId, characterId: $characterId) { characterIds ...

typescriptvue.jsgraphql

"Overcoming obstacles in managing the global state of a TypeScript preact app with React/Next signals

Hello, I recently attempted to implement a global app state in Preact following the instructions provided in this documentation. However, I kept encountering errors as this is my first time using useContext and I suspect that my configuration might be inco ...

reactjstypescriptnext.jspreactpreact-signal

Filtering dates using the Angular Material Date filter on a single adapter

After implementing a custom date format for my mat-datepicker, I encountered a specific challenge: export const PICK_FORMATS = { parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}}, display: { date ...

angularangular-material2date-formatting

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

javascripthtmltypescript

Tips for retrieving prefilled data field values within the onsubmit form function in Angular4

I am currently working in Angular 4 and have a requirement to display a form with pre-filled user data. The user should be able to change the data if needed. onSubmit(userForm: NgForm) { console.log("userform",userForm.value); this.nex ...

angulartypescript

reference is not accessible within HTMLAttributes for HTMLDivElement

I created a versatile wrapper component with the following structure: import { FC, HTMLAttributes } from "react"; const CustomWrapper: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...props }) => ( <div c ...

javascriptreactjstypescriptref

Disabling function name renaming in Webpack for TypeScript and Javascript files

Is there a way to prevent Webpack from renaming function names? I have a class named MenuBlocksMenuPage in my code: import { MenuBlocksMenuPage } from "../pages/menu/blocks/menupage"; However, the compiled file turns this line into an unreadable string. ...

javascriptfunctiontypescriptwebpack

Filter array of objects in Angular4 without using any built-in pipe functions

I am working with an array of links where each element is an object containing a link, description, and category. I have different components to display these links, and I want each component to only display links from its specific category. So, I need to ...

arraysangulartypescriptobject

What distinguishes a dotnet CLI from an Angular CLI standard project template?

Can you explain the main variations between a new Angular 4 project created using dotnet new angular and ng new? I've already compared the folders of the two projects and noticed some minor differences, but I'm not really interested in those det ...

angularangular-clidotnet-cli

Tips on joining property name in typescript

Attempting to pass values between components using inheritance but encountering difficulties. Is it possible to achieve this through a service? If so, how can I overcome this issue? Any assistance in finding the solution would be greatly appreciated. bus. ...

angulartypescriptangular8angular14

Issue with Angular app's connectivity to Node backend app within kubernetes cluster

I currently have a backend Node application operating within a Kubernetes cluster (specifically running locally with minikube). The backend service is set up as shown below: apiVersion: v1 kind: Service metadata: name: flow-backend-service spec: select ...

angularkubernetesminikube