Error: The `ngMetadataName` property cannot be accessed because it is undefined or null in Internet Explorer version 10

Encountered an issue in IE 10 that is not present in IE 11:

Error: TypeError: Unable to get property 'ngMetadataName' of undefined or null reference

The property ngMetadataName can be found in the file vendor.js.

This is the content of polyfills.ts:

/******************************************************************************* 

BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**

Web Animations @angular/platform-browser/animations
Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
import 'web-animations-js'; // Run npm install --save web-animations-js.
/**

By default, zone.js will patch all possible macroTask and DomEvents
user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

/*

in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
with the following flag, it will bypass zone.js patch for IE/Edge
*/
(window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************

Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************

APPLICATION IMPORTS
*/

Please advise on resolving this issue specifically for IE 10.

Many thanks

Answer №1

Successfully upgraded the angular-cli from version 6.0.8 to 6.2.3 (the latest), resolving the issue mentioned above.

For further assistance, check out this reference link: github#24339.

A shoutout to @Suresh Kumar Ariya for the help!

Answer №2

The issue lies within the components that must be included in the entryComponents section. The higher versions of Angular ~7.2.2 seem to have some issues with these components.

  1. To resolve this, I suggest removing all instances of ^ and ~ to ensure a stable version for your application.

  2. For stability, it is recommended to use version 7.2.2 for all @angular/package_name entries in your package.json file.

    "@angular/cli "7.2.2",
    "@angular/compiler "7.2.2",
    "@angular/compiler-cli "7.2.2",
    "@angular/language-service "7.2.2",
    

Answer №3

To resolve this issue, it is recommended to update @angular/cli (as well as related packages) to version 7.2.9 or above.

npm install @angular/cli@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/language-service@latest

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

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

While trying to install express using Node.js, an error (error:0906D06C :PEM routines : PEM_read_bio npm) occurred

I recently installed node.js on my computer and npm came along with it. However, when I try to execute "npm install express" in my Windows command prompt, I encounter the following error message. Can anyone guide me on how to resolve this issue? C:\U ...

ReactJS not displaying the class effect as intended

When using the react zoom pan pinch library, I am trying to set the height to "100%" for TransformWrapper and TransformComponent. Interestingly, it works perfectly fine when done through Chrome inspect, but when attempting to add a className or use style={ ...

Retrieve the Multer file name and/or file path

Just checking in on everyone's well-being. I'm currently struggling to retrieve the file path or name after uploading it to the folder. Whenever I try console logging req.files.path or req.files.filenames, it always returns undefined. Could someo ...

When the fullscreen modal is opened, the initial image displayed is not the same as the one that was clicked on

Seeking assistance: I've been struggling with a problem for quite some time now and could really use some help from you guys. My issue involves an 'AngularJS' webapp that retrieves posts from an 'FB page' via 'OpenGraph' ...

Insert data into Typeorm even if it already exists

Currently, I am employing a node.js backend in conjunction with nest.js and typeorm for my database operations. My goal is to retrieve a JSON containing a list of objects that I intend to store in a mySQL database. This database undergoes daily updates, bu ...

Eliminate text from template literals in TypeScript types

I have successfully created a function that eliminates the 'Bar' at the end of a string when using foo. However, is there a way to achieve the same result using the type statement? (refer to the code snippet below) declare function foo<T exten ...

Guide to incorporating Angular 2 onto a specific section of a webpage

As a student of Angular 2, I have a question about utilizing specific parts of a web page. Is it possible to use certain Angular 2 utilities, such as *ngFor, in only designated areas - for example, within just a div element? While this was feasible in An ...

Transferring variables from EJS to JavaScript on render (server to client) securely to prevent cross-site scripting vulnerabilities

When passing variables to JavaScript using ejs, the accepted method often looks like this: <script> var foo = <%- JSON.stringify(foo) %>; </script> However, there have been issues with XSS vulnerabilities using this approach. Is there ...

Revamp your search experience with Algolia's Angular Instant Search: Design a personalized search box template

Custom Search Box Request: My goal is to implement an autosuggest search box using Algolia Angular instant search with an Angular Material design. To achieve this, I am planning to customize the search box component by replacing the standard <ais-sea ...

Arrange the JSON object according to the date value

I am working on a JavaScript project that involves objects. Object {HIDDEN ID: "06/03/2014", HIDDEN ID: "21/01/2014"} My goal is to create a new object where the dates are sorted in descending order. Here's an example of what I want: SortedObject ...

Enhance your map by incorporating an overlay with ngx-openlayers

Currently, I am trying to implement zoom-in and zoom-out buttons on an OpenLayers map. I attempted to use the overlay method but encountered an error. Here is the code snippet for reference: zoom_button = document.getElementById('zoom') zo ...

Comparing global variables in ng-switch: Best practices

I'm currently utilizing the AngularJS $rootScope object to expose some global constants that should be accessible to both controllers and views: var app = angular.module('myApp', []); app.run(function ($rootScope) { $rootScope.myConsta ...

In Typescript, encountering a member of a union type with an incompatible signature while utilizing the find method on an array of

I need to verify if a specific value exists within an array of objects. The structure of my array is as follows: [ 0: { id: 'unique_obj_id', item: { id: 'unique_item_id', ... }, ... }, 1: {...} ] The objects in the ar ...

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

The enigma of the Angular2 Object's Undefined nature

Encountering an "object undefined" error when trying to access the object of the Service Component. Interestingly, hard coding the data directly into a JavaScript variable works fine and shows the type as "object Array." Data.json [ { "id": ...

The test may detect a variable that was not initialized

I'm trying to understand why I get the error message "variable may not have been initialized" when testing (variable === "some text"), but I don't receive the same error when using (typeof passwordHashOrg !== 'undefined') The code that ...

Verifying the presence of a cookie when the page loads

My goal is to have the browser initially check for a cookie named "yes." If this cookie exists, I would like to show a message. If not, I want to display the following: <input type="button" id='approve' value="approve" onclick="a()"/> &l ...

Resolve the error message "variable is utilized prior to assignment"

Looking at the code snippet below, import { STS } from 'aws-sdk' const sts = new STS({ region: 'us-east-1' }); let accessKeyId: string let secretAccessKey: string sts.assumeRole(params, function(err, data) { if (err) { ...

Error encountered during TypeScript compilation: Module 'fs' not found

I encountered an issue: TSError: ⨯ Unable to compile TypeScript: server/src/test/test.ts(2,45): error TS2307: Cannot find module 'fs' Every time I execute this particular test import "mocha" import { writeFileSync, readFileSync } from &a ...