0

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

Lu Roman
  • 2,220
  • 3
  • 25
  • 40
  • You may want to try out something that works with commonjs modules, it would make it easier. Try Browserify, JSPM, or Webpack. They all have TS plugins. – elclanrs Dec 29 '16 at 22:29
  • What errors do you see? – randominstanceOfLivingThing Dec 29 '16 at 22:30
  • @elclanrs Tried browserify at first, but i was getting lots of errors, since I'm using the new import syntax and not the node syntax – Lu Roman Dec 29 '16 at 22:32
  • @randominstanceOfLivingThing the error basically is that it doesn't load the file, it throws a `require.js:168 Uncaught Error: Script error for "/init"` and if i check on the network tab, its not adding the .js, by adding the extension on require.js via the hack i said before, it works, but then it messes up with the source maps – Lu Roman Dec 29 '16 at 22:33
  • Wht are you using requirejs when you specified amd code generation for typescript compiler. I don't see a need to use requirejs. – randominstanceOfLivingThing Dec 29 '16 at 22:33
  • @randominstanceOfLivingThing Well requierejs is an implementation of the amd pattern, or what do you mean?, please expand on that thought – Lu Roman Dec 29 '16 at 22:36
  • @Zagen, `AMD` is used for async module loading on web, `commonjs` on node side. Typescript allows to define modules using es6-imports syntax and the typescript compiler can emit `amd` or `commonjs` style modular code. Requirejs was existent before typescript came into existence and was quite common on web. If you are using typescript, I do not see a need for requirejs. Code will just be scattered with `import`/`export` and `define`/`require` which to me is too much to deal with. – randominstanceOfLivingThing Dec 29 '16 at 23:00
  • @randominstanceOfLivingThing you mean, using es6 syntax for modules? I'm targeting old browsers too, and if you are referring to using commonjs instead of amd, i tried that first with browserify and got another set of issues. – Lu Roman Dec 29 '16 at 23:13

1 Answers1

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.

Louis
  • 146,715
  • 28
  • 274
  • 320
  • I've read something about that too, but the thing is (which maybe i should have said) is that it was the first thing i tried, but if i do that, then the init.js doesn't even load. But let check again to confirm – Lu Roman Dec 29 '16 at 23:09
  • Ok, i just checked, and it doesn't work, but if i append `requirejs.config({baseUrl: '/'});` before that line so that i avoid using `/` on the first initialization, it works. But the source maps aren't working, i've just tried with System.js and i get the same result, it works but sourcemaps don't seem to be loading, any ideas on that? – Lu Roman Dec 29 '16 at 23:23
  • Yeah, you have to use a `baseUrl` and a module path that are going to work together. What do you do to trigger the loading of the sourcemaps? What network request do you see being done for loading the sourcemaps when you trigger their loading? Is the network request successful? Is it loading an actual sourcemap? You should edit your question with this information. – Louis Dec 29 '16 at 23:28
  • Thanks, i realized how to solve the sourceMap issue, using inline sourcemaps or defining "sourceRoot", please add the line of code that sets the baseUrl on your code and i'll mark it as the accepted answer for future reference for other users – Lu Roman Dec 29 '16 at 23:31