Issues with require.js and sourcemaps when compiling typescript with grunt-ts

Question

When using grunt-ts and specifying and out file my app runs as expected, but since that option has no support for fast compilation, i tried using a regular compilation where all my .ts files live on the dist folder

There are two issues, first, it will fail to load any imported file, since it will try to look for it without extension. As a quick fix i edited the load fn on the require.js file and all my dependencies load correctly, but then the sourcemaps stopped working, all i get is a blank file on the chrome inspector (and of course i don't want to rely on a dirty hack) .

Please note that i'm not very familiar with requirejs so I'm not quite sure if this is a misconfiguration on my side, a bug, or something that is missing.

My grunt config, related to ts

ts: {
      options: {
        module: 'amd',
        target: 'es5',
        experimentalDecorators: true
      },
      dev: {
        src: ['client-app/**/*.ts'],
        outDir: "dist",
        watch: '.'
      }
    },

My bootstrap.js which is just the entry point and require.js config file

requirejs.config({
  baseUrl: '.',
  waitSeconds: 20
});

requirejs(['/init'], function(module) {
  module.main()
});

A simplified version of the compiled init file

define(["require", "exports", './section-manager.view'], function (require, exports, section_manager_view_1,) {
    "use strict";
    function main() {
        ///
    }
    exports.main = main;
});
//# sourceMappingURL=init.js.map

And the html

<script src="/js/lib/require.js" data-main="/bootstrap"></script>

Any help is appreciated, thanks

Edit:

Using System.js or @Luis answer solves the loading issue. The sourcemap issue is solved by using sourceRoot or

inlineSourceMap: true,
inlineSources: true

To the ts options

Answer 1

Don't use an absolute module name. If you do use an absolute name, RequireJS assumes that you do not want any alteration when it generates a path from the module name and will not add the .js extension. You should use a relative path, or you could do this:

requirejs.config({
    baseUrl: '/'
});

requirejs(['init'], function(module) {
  module.main()
});

By doing this, RequireJS will automatically add the .js extension.