Angular App Won't Load After Publishing On IE11

I’m currently developing an app in Angular with an ASP.NET backend. I’ve configured the project to work fine locally in IE11 (Update polyfills, browserlist, and add ES5 TsConfig files), but when I’ve published it to the server via IIS the page will not load and is stuck at “Loading…”

To test out publishing I’ve attempted to publish the default Angular/ASP.NET app to the same results.

The console displays four errors:

SCRIPT1002: Syntax error
runtime.458556a34b891ea32398.js (1,1)

SCRIPT1002: Syntax error
polyfills-es5.7119ad0e4b3aeae98a0b.js (1,1)

SCRIPT1002: Syntax error
polyfills.4efda4a4618e08b621be.js (1,1)

SCRIPT1002: Syntax error
main.59969322f93fb24d6bee.js (1,1)

polyfills.ts

import 'classlist.js';
import 'web-animations-js';
import 'zone.js/dist/zone';

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <defaultDocument enabled="true">
      <files>
        <add value="ClientApp/dist/index.html" />
      </files>
    </defaultDocument>
  </system.webServer>

</configuration>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

your application may throw errors in IE11, even when it is working fine in other browsers. There can be numerous reasons why your Angular application is not working, including:

Missing polyfills in polyfills.ts.
Using a TypeScript target version which IE11 does not support
Importing third-party dependencies using a TypeScript target version
which IE11 does not support

Refer this : https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920

Method 2

Thanks @Deepak-MSFT for the answer, turns out I didn’t have the .NET Hosting Bundle installed on the host machine. Once I installed that, the website displayed as it was supposed to — barring a couple issues not related to what I’m talking about here.

For those curious, I was having issues with database connection string, I found another project being hosted on the server and modified its connection string:
data source=[database];initial catalog=

;persist security info=True;user id=;password=[password];MultipleActiveResultSets=True;App=EntityFramework

I also removed the web.config file I’d created, as it would probably get in the way of the one generated during publishing.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating