angular2如何创建bundle目录以及如何生成源映射？

Question

我想调试angular2的打字稿源代码。但我在bundle目录中找不到源映射文件。那么angular2如何创建bundle目录？我可以自己生成吗？

Answer 1

您可以将SystemJS配置为从单独的文件而不是捆绑的文件加载Angular2模块。

<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>

源映射以这种方式嵌入node_modules/angular2文件夹中的JS文件中：

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

这样您就可以使用DevTools将断点放入Angular2 TypeScript文件中。

请注意，使用这种方法，应用程序负载会更长......

有关详细信息，请参阅此文章：

• 如何调试Angular2的TypeScript源代码：https://medium.com/@ttemplier/how-to-debug-the-typescript-source-code-of-angular2-99a593e2983f#.fc5xoqt0b