IE11 Angular-CLI source maps not working

Question

Using Angular-CLI 1.0 and Angular 4, I am unable to get source maps working despite having //# sourceMappingURL=main.bundle.js.map in the bundled JavaScript. Does anyone know a work around to get the sourcemaps working in IE-11? Normally this wouldn't be a huge issue, I'd just switch to firefox or chrome. But I'm developing an Excel add-in with the Office-js api, and it uses an embedded IE11 browser to display the add-in, so I'm stuck with it.

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "pretty": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
        "es2017",
        "dom"
    ]
  }
}

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Just a hunch but could that line with //# be getting minified in such a way that the proceeding minified content shares a line that causes errors. For Example --> //# here is the end of the file above <NO CTRL-LF> var thisVarsNowInTheCommentButFromAnotherFile.. — Ross Bush
– Ross Bush, Commented Apr 12, 2017 at 15:31
That's a good thought, but I don't think that's what is happening here. That screenshot is from the debugger while running the app and is showing the already bundled file in its final (dev) form. That could be an issue when compiling for prod though. — Jolleyboy
– Jolleyboy, Commented Apr 13, 2017 at 13:27
@Jolleyboy were you ever able to figure out the problem? I have similar configuration and source maps just stopped working. Chrome works, IE does not. Thanks. — Jim Barrett
– Jim Barrett, Commented Jun 4, 2017 at 19:15
Saddly no. I'm just spelunking in my bundle files and making excessive console.logs. — Jolleyboy
– Jolleyboy, Commented Jun 4, 2017 at 23:54
@Zze / JimBarrett It didn't end up working for me. I ended up ejecting and using the source-map-loader plugin for webpack. — Jolleyboy
– Jolleyboy, Commented Dec 18, 2017 at 20:26

Zze · Accepted Answer · 2017-12-18 20:57:31Z

2

The issue was that there were multiple //#sourceMappingURL comments in the bundled files. To fix this, you can use the source-map-loader for Webpack to extract those comments and feed them to the webpack devtool in order to create a master source-map file. This is then linked at the end of the bundle. Now there is only one //#sourceMappingURL comment in the file as IE11 expects, and things work swimmingly.

Here is how I did it:

I ejected from the Angular-CLI Warning, this kicks you out of the Angular-CLI, making you responsible for managing your own webpack config, among other things. This is irreversible. ng eject
npm install source-map-loader
I edited my webpack config to add this:

{
  //...
  devtool: 'inline-source-map',
  module: {
    rules: [
      //...
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        exclude: [/node_modules/],
        enforce: "post"
      }
    ]
  }
}

With this setup, I am able to use breakpoints in the F12 tools, using the sourcemaps.

If you want to go one step further and improve your stacktraces (like Chrome does) you can use stacktrace.js to make frames and translate them with the sourcemaps. This was a bit of a pain, and the solution is too long to post here

edited Dec 18, 2017 at 20:57

Zze

18.9k14 gold badges95 silver badges125 bronze badges

answered Dec 18, 2017 at 20:36

Jolleyboy

1,42313 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

msanford Over a year ago

It might be useful to mention what ng eject does (namely, breaks the CLI) for people who aren't familiar with it and copy-paste it into a terminal, run it, and promptly freak out.

Collectives™ on Stack Overflow

IE11 Angular-CLI source maps not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related