System.js doesn't display full stack trace

Question

I'm using System.js to load modules written in TypeScript. System.js wraps my original code in a function, therefore when I have an error in my code and I try to see it in Chrome developer tool, clicking on the error just brings me to the first line of the JavaScript file in which there's a declaration of a wrapping function that System.js has added, instead of the correct line in the original TypeScript file.

Usually this is not a problem because System.js adds its own stack trace to the end of the error and clicking on it brings me to the correct line in the original TypeScript file without the wrapping function.

However, sometimes System.js does not include the entire stack trace, then the original stack trace that Chrome produces is the only place to see the error line, but the problem is that clicking on it brings me to the JavaScript file instead of the TypeScript one, and to the first line, instead of the correct one, as I described above already.

My question: Is this a bug in System.js or perhaps I'm doing something wrong?

To make it more understandable, I will add here my code and will explain the scenario. However please remember that I don't try to fix my code but to understand why I can't reach the correct error line via the developer tool.

So this is my System.js declaration & configuration:

<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
<script src="/assets/libs/systemjs-master/dist/system.src.js"></script>

<script>
        System.config({
            defaultJSExtensions: true,
            transpiler: 'typescript',
        });

        System.import('app.module')
                  .then(null, console.error.bind(console));

 </script>

And this is app.module (the root file that System.js loads):

import './angular-1.4.7'
import './angular-route.min'
import {User} from "./classes";
import {Post} from "./classes";
import {BlogModel} from  "./model"

var app: angular.IModule = angular.module("blogApp", ["ngRoute"]);

var model: BlogModel = new BlogModel();

app.run(function($http: angular.IHttpService): void{
    $http.get("/user-context/current-user")
    .success(function(currentUser: User): void{
        if(currentUser.userName) {
            model.currentUser = currentUser;
        }
    }); 

  ... 
});

...

The line that produces the error:

$http.get("/user-context/current-user")

Here is the full stack trace I get:

As you can see, the correct error line is only shown in the OOTB developer tool stack trace, but not in the System.js one (which 50% of the time does show the actual error line, and supposed to do it all the time).

And when I click on the error line in the OOTB developer tool stack trace, I just get this file with the first line highlighted:

(function(require, exports, module, __filename, __dirname, global, GLOBAL) { //this line is highlighted
require('./angular-1.4.7');
require('./angular-route.min');
var model_1 = require("./model");
var app = angular.module("blogApp", ["ngRoute"]);
var model = new model_1.BlogModel();
app.run(function ($http) {
    $http.get("/user-context/current-user")  //but this is the line that should be highlighted
        .success(function (currentUser) {
        if (currentUser.userName) {
            model.currentUser = currentUser;
        }
    });
    ...
});
...
});
//# sourceMappingURL=app.module.js.map
}).apply(__cjsWrapper.exports, __cjsWrapper.args);

My question: Is this a bug in System.js or perhaps I'm doing something wrong?

Any help will be profoundly appreciated!

Answer 1

This issue is reported & closed :Javascript errors don't link to original source?

Chrome console pointing your error to line 1 is usual: Chrome appears to report wrong line for error.

Also try on another browser as it could be a browser issue. Another possibility is file corruption as stated here.