4

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?

jjaskulowski
  • 2,524
  • 3
  • 26
  • 36
  • Just a shot in the dark, is your web page switching to enterprise mode when you change to IE11? to the left of your URL there will be a blue box with what looks like a 2 buildings if you are. this would cause your app to possibly fail. – Bean0341 Nov 08 '16 at 16:13
  • @Bean0341 Next clue: The -d version works in the same conditions. What can that be? – jjaskulowski Nov 10 '16 at 09:03
  • I have the same issue but it is not throwing any error. Interestingly when we open dev tools it starts working!. Has any one faced similar issue? – Gangadhar Jannu Jun 27 '17 at 08:48

2 Answers2

7

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.

kabirbaidhya
  • 3,264
  • 3
  • 34
  • 59
3

I got stuck with the same problem using 2.0.0-rc.1 and webpack. After reading some issues, the solution for me was to include the following scripts on my index.html when the browser is IE:

es6-shim.min.js
system-polyfills.js
shims_for_IE.js

The first two can be found inside node_modules, and I downloaded the third from here.

SebaGra
  • 2,801
  • 2
  • 33
  • 43