6

I work with Angular and RequireJS. I tried to use RequireJS optimization, and now my application is not working. I am sure it's due to minification.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=myapp&p1=Error%3…t%20(http%3A%2F%2Flocalhost%3A8080%2Fwebapp%2Fapp%2Fmain-built.js%3A4%3A10)

The error message is not very helpful to find the issue, so I was wondering how I can use the source map to pinpoint the error in the original source code. I use Chrome to debug.

Edit: Full error stacktrace

Failed to instantiate module myapp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=e
    at Error (<anonymous>)
    at http://localhost:8080/webapp/app/main-built.js:3:19581
    at http://localhost:8080/webapp/app/main-built.js:3:31899
    at n (http://localhost:8080/webapp/app/main-built.js:3:30540)
    at Object.r [as invoke] (http://localhost:8080/webapp/app/main-built.js:3:30716)
    at http://localhost:8080/webapp/app/main-built.js:3:30147
    at Array.forEach (native)
    at o (http://localhost:8080/webapp/app/main-built.js:3:19891)
    at i (http://localhost:8080/webapp/app/main-built.js:3:29951)
    at yt (http://localhost:8080/webapp/app/main-built.js:4:10
Sydney
  • 11,964
  • 19
  • 90
  • 142

1 Answers1

7

Here are the steps which should make it working for you:

  1. In Chrome's Developer Tools click the settings icon (bottom right corner).
  2. In the settings dialog, check "Enable source maps".
  3. Open the web page you want to debug.
  4. Open the Developer Tools (in this new tab)
  5. Reload the page
    • It's important, otherwise Chrome will not download map file.
  6. Press the error link you want to inspect
    • It's on the right of your error, i.e. main.js:12.
  7. That's it. You should be now redirected to human-readable, non-minified version of your script.

If source maps are still not working:

  1. Make sure minified JS file contains, at the very bottom, something like:

    //# sourceMappingURL=main.js.map

  2. Make sure mapping file is being downloaded. It should be listed in "Network" section of Developer Tools as downloaded during page reload. It should look like this:

    source map file download status

  3. Maybe RequireJS's minification strips out the sourceMappingURL comment from your output JS file?

    Make sure that you're using uglify2 method and you've enabled generateSourceMaps option. Here is relevant part of my requirejs target config from Grunt:

requirejs: {
  compile: {
    options: {
      /* some other options here */
      optimize: 'uglify2',
      logLevel: 0,
      preserveLicenseComments: false,
      generateSourceMaps: true
    }
  }
}
kamituel
  • 34,606
  • 6
  • 81
  • 98
  • I accepted the answer but the error link in my case references `angular.min.js:7` instead of `main.built.js`. In the console I can see briefly the error link changing from `main.built.js:3` to `angular.min.js:7` but I can't click on the `main.built.js. error link. – Sydney Sep 04 '13 at 20:03
  • One thing that might be worth clarifying is `//#` vs `//@` for the annotation at the end of the minified files. jQuery uses the "@" while AngularJS uses "#". Not sure what the difference is, and maybe it should even be a new question... – jamesmortensen Apr 04 '14 at 21:06
  • 2
    @jmort253 - `//@` [caused issues with IE's conditional comments](http://bugs.jquery.com/ticket/13274#comment:6), so it's being (has been?) abandoned in favour of `//#`. – kamituel Apr 04 '14 at 21:25