Angular 5 Application not working in Firefox v48.0.1 or < 50.0

[Aka144001]

I am trying to run my Angular Application in older versions of Browsers because of project scope. Application is working fine in latest versions and in Chrome. Seems like issue is with IE10 and Mozilla Firefox ( Firefox version < 50 ). I am running my app currently with 48.0.1 and I am getting simple one liner issue in Console that reads.

TypeError: this is undefined That's it.

I tried to google and found few similar git hub problems.

This is the closes solution I found. https://github.com/angular/angular-cli/issues/9340

I tried to follow steps where issue was related to uglifyjs-webpack-plugin and move it to previous version 1.1.5. I tried that also with these commands.

npm i uglifyjs-we...@1.1.5 --save-exact
rm -rf package-lock.json node_modules
npm install

Now issue is I can still see some other versions 1.2.5 and 0.4.6 in my package-lock.json file. I manually deleted that but still no solution.

More details on the stackoverflow question - 

https://stackoverflow.com/questions/50480892/angular-5-application-not-working-in-firefox-v48-0-1-or-50-0

Thanks in advabce

[Sebastian Kalicki]

You need to manually edit the src/polyfills.ts file and uncomment:

/** 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/set';

[Aka144001]

These settings are already in place in my polyfill file. Below is the list. Please have a look.

/** 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 to support `@angular/animation`. */

import 'web-animations-js'; // Run `npm install --save web-animations-js`.

/** Evergreen browsers require these. **/

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';

import 'core-js/es7/array';

/** ALL Firefox browsers require the following to support `@angular/animation`. **/

import 'web-animations-js'; // Run `npm install --save web-animations-js`.

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

* Zone JS is required by Angular itself.

*/

import 'zone.js/dist/zone'; // Included with Angular CLI.

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

* APPLICATION IMPORTS

*/

/**

* Date, currency, decimal and percent pipes.

* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10

*/

import 'intl'; // Run `npm install --save intl`.

/**

* Need to import at least one locale-data with intl.

*/

import 'intl/locale-data/jsonp/en';

Second I found solution for Mozilla Firefox issue. If I run using aot false i.e. ng serve --prod --aot=false then its working fine. But I think it is not feasible solution. Please suggest.