how angular2 create bundles directory and how do I generate source map?

Question

I want to debug the typescript source code of angular2. But I can not find source map file in bundles directory.So how angular2 creates bundles directory? And Can I generate it myself?

add sourceMap: true in your tsconfig.json

Eric Martinez
– Eric Martinez

2016-04-05 12:04:03 +00:00
Commented Apr 5, 2016 at 12:04 — Eric Martinez
– Eric Martinez, Commented Apr 5, 2016 at 12:04

Thierry Templier · Accepted Answer · 2016-04-07 13:03:27Z

1

You could configure SystemJS to load Angular2 modules from separate files instead of the bundled ones.

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
  System.config({
    defaultJSExtensions: true,
    map: {
      angular2: 'node_modules/angular2',
      rxjs: 'node_modules/rxjs'
    },
    packages: {
      app: {
        defaultExtension: 'js',
        format: 'register'
      },
      angular2: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

Source maps are embedded in JS files in the node_modules/angular2 folder this way:

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjoz(...)

This way you will be able to put breakpoints into Angular2 TypeScript files using DevTools.

Notice that the application load will be longer with this approach...

See this article for more details:

How to debug the TypeScript source code of Angular2: https://medium.com/@ttemplier/how-to-debug-the-typescript-source-code-of-angular2-99a593e2983f#.fc5xoqt0b

edited Apr 7, 2016 at 13:03

answered Apr 5, 2016 at 12:18

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

4 Comments

small fish Over a year ago

Ii does not work! Can you show me in plunker? Thanks a lot!

Thierry Templier Over a year ago

What do you exactly mean by "it does not work"? ;-) You can't load the application or you can't set breakpoints in TypeScript files?

Thierry Templier Over a year ago

It's difficult to explain within an answer. So I created an article on the medium with screenshots: medium.com/@ttemplier/…. Hope it will answer your question ;-)

Max Koretskyi Over a year ago

@ThierryTemplier, have you tried that approach on the newest npm package that doesn't contain sources? I've posted the question, appreciate any feedback

Collectives™ on Stack Overflow

how angular2 create bundles directory and how do I generate source map?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related