How do I get Angular working in an HTA running IE 9?

Question

I'm required to develop an HTML application (HTA) to solve a business problem. I consider that using Angular under the hood would greatly ease development.

I've created a new Angular project via ng new and made some small changes (detailed below), but when I run the built HTA file, I get this error:

Error: 'console' is undefined

and the page never loads in the HTA window.

The HTA uses IE 9 (the requirements of the app prevent use of a later browser version), so the app includes this meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Angular's documentation states that IE 9 is supported if I uncomment all of the necessary polyfills in polyfills.ts, which I've done:

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

I've renamed the included index.html file to index.hta and made the corresponding change in .angular-cli.json.

I've tried to put the following code directly into polyfills.ts to circumvent the missing console:

if (!window.console) console = {error: function() {}};

but then I can't build at all, because it doesn't like me redefining console:

ERROR in src/polyfills.ts(77,22): error TS2322: Type '{ error: () => void; }' is not assignable to type 'Console'.
  Property 'assert' is missing in type '{ error: () => void; }'.

Can anyone suggest a way forwards from here?

Answer 1

I solved this by adding the following code under the <app-root></app-root> line in index.hta:

<script>
  // HTAs don't have a console.
  console = {};
</script>

I now get the “Welcome to app!” screen when I double-click the HTA file.

It seems that Angular's build process doesn't look as closely at JavaScript declared inside the main page.