Angular2 Aot and multi stage source maps integration
<p>I am working on an Angular2 application. I went through the doucmentation and implemented AOT and rollup. I have some non-es6 modules in the application. After rollup, I bundle the js with the help of webpack for replacing the 'require' statements with the required library code. I have generated sourceMap at every step.But still, when an error turns up in the console, it does not reflect the correct line. Following are my aot, rollup and webpack configs. 'sourceMap' option is set to 'true' in each of the configs. please advise.</p>

<p>tsconfig.aot.js
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowUnreachableCode": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  },
  "compileOnSave": false,
  "files": [
    "scripts/app.module.ts",
    "scripts/main.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}</code></pre>
</div>
</div>
</p>

<p>rollup.ts</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
    entry: 'scripts/main.js',
    dest: 'build/app.js', // output a single application bundle
    sourceMap: true,
    format: 'iife',
    context: 'this',
    plugins: [

        nodeResolve(
            {
                jsnext: true,
                module: true,
            }
        ),
        commonjs({
            include: 'node_modules/**/**',
        })  ,

    ]
}</code></pre>
</div>
</div>
</p>

<p>and finally Webpack</p>

<p>plugins: [</p>

<pre><code>//Does type checking in a separate process, so webpack don't need to wait.
new ForkCheckerPlugin(),
new ExtractTextPlugin("styles/[name].css"),

//Varies the distribution of the ids to get the smallest id length for often used ids.
new webpack.optimize.OccurenceOrderPlugin(true),

//Copy files and directories in webpack. Copies project static assets.
new CopyWebpackPlugin([{
  from: root('assets'),
  to: root('build/assets')
}]),

    new webpack.optimize.DedupePlugin(),

    new webpack.optimize.UglifyJsPlugin({sourceMap: true}),

    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|it/)
</code></pre>

<p>],</p>