Angular 2 (4), Webpack site won't work on server in IE 11

Question

Is there some special switch for IE in angular or webpack because when I run my site on http://localhost:port/ it works. Also, when I run it on server http://server.domain/mysite/ on Edge or Chrome it works. But when I open it on IE 11 (with compatibility mode set to 11) I receive a following error in console:

Unhandled Promise rejection: Failed to load function t(t){var e=this;this.http=t,this.getItems=function(){e.results=null,e.http.get("api/app/components/my-items.component.html ; Zone: ; Task: Promise.then ; Value: Failed to load function t(t){var e=this;this.http=t,this.getItems=function(){e.results=null,e.http.get("api/app/components/my-items.component.html undefined

The only part that means anything to me is that 'api/' is plain wrong and that I've double checked the component and it clearly says:

@Component({
    selector: 'my-items',
    templateUrl: 'app/components/my-items.component.html'
})
export class MyItemsComponent implements OnInit { ...

There is not a single occurrence of phrase 'api/app' in the whole solution (including c#, ts, css, html and js files)

My webpack.config.js is simple:

/// <binding ProjectOpened='Watch - Development' />
var path = require('path');
var webpack = require('webpack');
var console = require('console');


module.exports = {
    context: path.join(__dirname, 'wwwroot'),
    //vendor: ['libs/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'],
    entry: './app/main.js',
    output: {
        path: path.join(__dirname, 'wwwroot/built'),
        filename: '[name].bundle.js',
    },
    plugins: [
            //new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
            // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
          // any required modules inside node_modules are extracted to vendor
          var path = module.resource.replace(/\\/g, '/');

          return (/\.js$/.test(path) && (path.indexOf('node_modules/') >= 0 || path.indexOf('libs/') >= 0));
      }

};

What's going on here?

Answer 1

BTW, I was having the same situation. My app was not working in IE 11 after I migrated to using webpack 2.

I just put these and it seems to be working now.

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-sham.min.js"></script>

Check this: https://github.com/es-shims/es5-shim#example-of-applying-es-compatability-shims-in-a-browser-project

Note: if you're just concerned about IE 11, you may skip the first two es5 shims. But you might need them if you do need to support browsers <= IE 11.