Encountering an Angular 5 (IE11) Error: Unhandled Promise Rejection - Route Matching Error

I've been encountering issues with IE11 in Angular 5 for a few days now. I've enabled polyfills:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es7/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';

and added the meta tag for IE:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Everythign works fine when I start the project with ng serve. However, when I build the project with --prod option, the app stops working in IE11. Chrome and Firefox are still working correctly.

Console log:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'gui/account'
Error: Cannot match any routes. URL Segment: 'gui/account'
   at Anonymous function (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:401190)
   ...
SCRIPT5011: Can't execute code from a freed script
File: polyfills.6460c1711c3b9abc371d.bundle.js, Line: 1, Column: 69035

When I try to debug it, I encounter some errors in polyfills.bundle.js:

IE11 debug screenshot

Thank you for your assistance.

Answer №1

Encountered a similar problem only with IE11 while using Angular 6 and Spring boot

The issue was resolved by creating a custom factory to supply the APP_BASE_HREF token based on the current location window.location.pathname:

{
    provide: APP_BASE_HREF,
    useValue: window.location.pathname,
}

In addition, the <base href> tag was also removed from the index.html for simplicity.

For more information, refer to IE11 Route Issue with sub-folder relative base path

Feel free to check out the source code

Answer №2

After some investigation, I was able to identify the root cause of the issue. It turns out that serving my Angular app from the webapp/gui folder within my Spring application was causing the router to behave erratically. The solution that worked for me was to modify the base href in the index.html file as follows:

<base href="/gui/">

By making this change, my Angular Spring controller successfully redirected the link http://localhost:8080/gui/account to the Angular index.html. Subsequently, the Angular router was able to process this link and redirect it to the /account component.

This issue may be related to a known problem outlined here: https://github.com/angular/angular/issues/18176.

I hope this solution proves helpful to others facing a similar challenge.

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

Exploring custom validation rules for string patterns in AngularJS

I have an input field that is using a pre-existing validator called "stringValidator". I want to customize or extend this pattern without creating a new one. Is there a way to do this inline? Can I input the validation regex directly into the tag declarati ...

A crucial error happened: The module "@angular-devkit/build-angular" could not be located within the directory "/ang-frontend". This issue arose while utilizing docker and docker-compose

When I attempt to run an angular application in docker-compose, I encounter an error, yet strangely, the error does not occur when running with docker run. docker-compose Ang-frontend | Ang-frontend | > <a href="/cdn-cgi/l/em ...

A guide on implementing getStaticProps using TypeScript in Next.js

Why am I consistently receiving undefined results when attempting to retrieve all posts from my backend? What could be causing this issue? import { AppContext } from '@/helpers/Helpers' import axios from 'axios' import { GetStaticProps} ...

How can I retrieve data from a script tag in an ASP.NET MVC application?

I'm struggling to figure out how to properly access parameters in a jQuery call. Here is what I currently have: // Controller code public ActionResult Offer() { ... ViewData["max"] = max; ViewData["min"] = min; ... return View(paginatedOffers ...

Adjusting package.json settings for an npm module

An npm package that I am using has an incorrect file path specified in its package.json. The current configuration is: "main": "./htmldiff.js", However, for it to function correctly, it should be: "main": "./src/html ...

Click the button to trigger a loading popup, followed by a change in the text displayed on

I have a button that triggers a popup box when clicked. However, I want to add a loading circle with text underneath before the popup appears, and for it to display after 3 seconds. Is this doable? Here is my current code snippet: <a href = "javascrip ...

Using Angular, we can make an HTTP call and map the response to an

I have a function that fetches information from a REST API in this format: getProducts(category: string): Observable<IProduct[]> { let url = `/rest/getproducts?category=${category}`; return this._http.get<IProduct[]>(url); } The dat ...

Adjust input width based on content in VueJS

Is it possible to achieve the following using (Pug & CoffeeScript): input(placeholder="0", v-model.number="order[index]" v-on:change="adjustInput") ... adjustInput: -> event.target.style.width = event.target.value.length + 'ch' Even ...

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

Modify the size of images retrieved from the Twitch API

I have a request to the Twitch API to retrieve a list of top games and show their box art, but I'm facing an issue where the image will only display if I adjust the width and height values in the provided link. Is there a way to modify these values wi ...

Utilizing dynamic, MongoDB-inspired expressions to eliminate specific elements from an array

In the process of creating a lightweight database similar to MongoDB, I am incorporating an object-oriented query language where references can be functions or object references: foo.users.find( args ); foo.users.remove( args ); The 'args' para ...

Obtaining the data from the React material-UI Autocomplete box

I have been exploring the React Material-UI documentation (https://material-ui.com/components/autocomplete/) and came across a query. Within the demo code snippet, I noticed the following: <Autocomplete options={top100Films} getOptionL ...

Switch the functionality of a Google Chrome extension back and forth numerous times

My Google Chrome extension works by attaching event listeners to all elements on a page and inserting CSS (lol.js and style.css) when clicked. However, I am facing an issue where I cannot remove the JS and CSS upon clicking the icon again. Right now, I am ...

Invoke a method in an Angular 2 component using an HTML event

Can an angular component method be invoked using an HTML event? <shape onclick="myMethodInParentComponent()" > I am unable to use (click) as shape is not recognized by Angular. Shape also contains several unknown sub elements making it impractical ...

What is the best way to retrieve an array of model objects utilizing a resolver?

I utilize a resolver to fetch data from the server import {Resolve, ActivatedRoute} from "@angular/router"; import {Observable} from "rxjs"; import {RouterStateSnapshot} from "@angular/router"; import {ActivatedRouteSnapshot} from "@angular/router"; imp ...

ParcelJS takes a unique approach by not bundling imported JavaScript libraries

My NodeJS app, which is a Cloudflare Worker, seems to be having trouble with bundling the 'ping-monitor' dependency. In my main typescript file (index.ts), I import the handler module and the first line reads: const Monitor = import('ping-m ...

Angular: You cannot assign a type of 'void' to a parameter that expects either a UserCredential or a Promise containing a UserCredential

Upon attempting to initiate a new method following a successful registration, I encountered an error in Webstorm: The argument type 'void' cannot be assigned to the parameter type '(value: UserCredential) => UserCredential | PromiseLik ...

Angular - issue with subject observable not functioning as expected

In my service SelectorService, I have created a subject and an observable. private eventEligibleApiStatus = new Subject<any>(); public eventEligibleApiStatusUpdated$ = this.eventEligibleApiStatus.asObservable(); I also have a method in which I use s ...

Dealing with errors in Smart Query using Nuxt and Vue Apollo: How to navigate to specific error pages for 404, 400, or 500 errors and is it possible to catch

When utilizing Smart Query for redirection, how can we redirect to a 400 page? While working with Vue Apollo, I attempted the following: apollo: { queryName: { prefetch: true, query: wrongQuery, error(e ...

Is it possible to invoke a helper function in Node.js from within a callback?

I recently started programming with node.js and I am encountering an error that I can't quite figure out. The function appears to be correctly set up, and I don't believe there are any asynchronous issues because of the self variable I have in pl ...