TypeError: Unable to get property 'ngMetadataName' of undefined or null reference on IE 10

Question

In IE 10, I got the following error: (but OK in IE 11)

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

The property ngMetadataName has been found in vendor.js.

The polyfills.ts is as the following:

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

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
*/

Can you please suggest how to resolve this for IE 10.

Thanks

Answer 1

I have updated the angular-cli from 6.0.8 to 6.2.3 (Latest) and it solved the above error.

This link github#24339 might be helpful.

Thanks to @Suresh Kumar Ariya

Answer 2

It is a problem with the components that needs to be declared in entryComponents. The angular ~7.2.2 upper version are broken these components.

1. First of all, I recommend to remove all ^ and ~ to maintaining a stable application version.

2. The stable version of angular 7 packages is 7.2.2. So put version 7.2.2 for all @angular/package_name on package.json

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

Answer 3

Upgrade @angular/cli (and associated packages) to version 7.2.9 or higher should fix this.

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