Encountering an issue on Safari: WeakMap variable not found in .NET Core 1.1.0 and Angular 2 application

I recently deployed a .NET Core 1.1.0 + Angular 2 + Typescript app on ASPHostPortal and encountered an issue while accessing it from Safari. The console showed the following exception:

Can't find variable:WeakMap

This caused the site to not load properly, getting stuck at the "loading" screen.

Has anyone else experienced this issue and found a solution?

UPDATE

After implementing Sakuto's solution for the WeakMap problem, Safari now displays different errors in the console:

Does anyone know what might be causing these new errors? The site continues to function correctly in Chrome and Firefox.

Answer №1

Unfortunately, Safari does not support WeakMap as mentioned on the MDN

To work around this limitation, you can utilize a polyfill. Another option is to leverage Angular CLI which simplifies tasks like bundling and deploying for you.

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

Backdrop styling for Material-UI dialogs/modals

Is there a way to customize the semi-transparent overlay of a material-ui dialog or modal? I am currently using material-ui with React and Typescript. https://i.stack.imgur.com/ODQvN.png Instead of a dark transparent overlay, I would like it to be transp ...

The Angular application's "wait" dialog fails to appear

I'm currently setting up a dialog that includes a mat-spinner while the page data is loading in an Angular v14 project. Instead of using a basic spinner, I opted for a dialog because I need to pass some additional information within it. However, I&apo ...

Element is missing the necessary "key" property. (React and TypeScript)

Upon running the following code for reactJS and typescript, I encountered the error below: I have also included the import statement import 'bootstrap/dist/css/bootstrap.min.css'; in Index.tsx. Is there a solution to resolve this issue? npm s ...

Can Typescript classes be hoisted if I use two classes in my code?

Exploring Class Definitions Certain Rules to Comply With Ensuring that the class is defined in advance helps avoid errors. class Polygon { log() { console.log('i am polygon'); } } const p = new Polygon(); // Expected: no errors p.log(); U ...

The Typescript decorator is unable to access the property type within its own scope

I am currently in the process of developing a dependency injector for use in my VUE js project. Recently, I created an Inject decorator with the intention of accessing a property type. It was functioning perfectly fine yesterday, but now it seems that som ...

What is the best way to execute operations on two distinct datasets within a single function using RxJS?

Is there a way to perform operations on two separate data collections within a single function in RxJS, returning an observable instead of void? This function is located within a service and I intend to subscribe to it from my component. I believe some re ...

The NextJS application briefly displays a restricted route component

I need to ensure that all routes containing 'dashboard' in the URL are protected globally. Currently, when I enter '/dashboard', the components display for about a second before redirecting to /login Is there a way to redirect users to ...

The function within filereader.onload is not running properly in JavaScript

When working with FileReader to read a file and convert it to base64 for further actions, I encountered an issue. Although I was able to successfully read the file and obtain its base64 representation, I faced difficulties in utilizing this data to trigger ...

Angular control reset event allows you to reset form controls to their

I'm in the process of creating my own component and I need to implement a custom reset feature. This involves cleaning up certain labels and other elements. Whenever this.form.reset(); is called, I want my component to detect this event and perform s ...

Error TS5083: Unable to locate the file node_modules/gts/tsconfig-google.json while setting up Angular CLI on MacOS

I encountered issues while trying to install Angular CLI on my Mac using sudo npm install -g @angular/cli. The latest error message I received is as follows: npm WARN deprecated @npmcli/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...

Resource Not Found (404 Error) Encountered While Loading (Material Design Lite)

Embarking on my first Angular 2 project and encountering some obstacles. Utilizing WebStorm as my IDE and generated the project using Angular CLI. Facing issues when integrating Material Design Lite into the application. Have imported the necessary depe ...

TS: How can we determine the type of the returned object based on the argument property?

Assume we have the following data types type ALL = 'AA' | 'BB' | 'CC'; type AA = { a: number; }; type BB = { b: string; }; type CC = { c: boolean; }; type MyArg = { type: ALL }; I attempted to create a mapping between type n ...

Is the detection change triggered when default TS/JS Data types methods are called within an HTML template?

I'm currently updating an application where developers originally included function calls directly in the HTML templating, like this: <span>{{'getX()'}}</span> This resulted in the getX method being called after each change dete ...

Having difficulties injecting a Service into a TypeScript Controller

I recently started working with TypeScript and I created a controller where I need to inject a service in order to use its methods. However, I am facing an issue where I am unable to access the service functions and encountering an error. Error TypeError ...

Informing ng2-bootstrap's Timepicker of the invalidation

I have integrated ng2-bootstrap's timepicker component into my project. To enhance user experience, I created a custom validation function that is triggered by the ngModelChange() event. However, the timepicker component also comes with its own built- ...

Making calls to an Angular GRPC API through an Envoy proxy

Having trouble connecting to the GRPC server from the UI via Envoy. Here's the code snippet for the Envoy proxy: static_resources: listeners: - address: socket_address: address: 0.0.0.0 port_value: 8888 filter_chains: ...

Step-by-step guide on how to stop CDK Drop depending on a certain condition

I'm trying to figure out how to disable dropping using CDK based on certain conditions. Specifically, I want the drop functionality to be disabled if the list I'm attempting to drop into is empty. I haven't been able to find a solution withi ...

Using Next.js, it is not possible to use absolute imports within SASS

Having trouble utilizing @/ imports within my scss files. The variables I need are stored in src/styles/_variables.scss Here is my tsconfig.json: { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "baseUrl": ".", "allowJs": tr ...

Retrieve category descriptions in Angular using their corresponding IDs

During the edit form process, I am sending categories by ID but displaying them as descriptions in options. Here is an example: new-campaign.html <mat-label>categories</mat-label> <mat-select multiple formControlName="VehicleCa ...

What is the best way to display a Nested JSON structure without an object key?

Need help with extracting data from two different JSON structures. The first one is straightforward, but the second is nested in multiple arrays. How can I access the content? See below for the code snippets: // First JSON { "allSuSa": [ { ...