Sourcemaps are not generated in Angular1/Typescript/Webpack build

[scottschafer]

Description

I am using a completely fresh install (as of today of node, yeoman and this generator).

I generated my project using the following options:

? Which JavaScript framework do you want? Angular 1 ? Which module management do you want? Webpack with NPM ? Which JS preprocessor do you want? TypeScript ? Which CSS preprocessor do you want? Less ? Which Continuous Integration platform do you want? ? Do you want a sample app? TodoMVC ? Would you like a router? None

When I run gulp build no sourcemap files are generated. When I run gulp serve:dist, the browser (Chrome) does not show Typescript files, just the compressed Javascript files.

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "typescript",
      "ci": "",
      "css": "less",
      "resolved": "/usr/local/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1:app",
      "_": [],
      "sample": "todoMVC",
      "router": "none"
    }
  }
}```


## Relevant Links

- If your project is public, link to the repo so we can investigate directly.
- **BONUS POINTS:** Create a [minimal reproduction](http://stackoverflow.com/help/mcve) and upload it to GitHub. This will get you the fastest support.


## Environment

Node: v6.10.3, darwin 15.6.0 yeoman: 2.0.0 npm: 5.6.0

[scottschafer]

This seems to fix it. I added sourcemap to new webpack.optimize.UglifyJsPlugin(..., and ** devtool: 'source-map',** towebpack-dist.conf.js. Additions in bold:

const webpack = require('webpack'); const conf = require('./gulp.conf'); const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); const FailPlugin = require('webpack-fail-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const pkg = require('../package.json'); const autoprefixer = require('autoprefixer');

module.exports = { module: {

loaders: [
  {
    test: /\.json$/,
    loaders: [
      'json-loader'
    ]
  },
  {
    test: /\.ts$/,
    exclude: /node_modules/,
    loader: 'tslint-loader',
    enforce: 'pre'
  },
  {
    test: /\.(css|less)$/,
    loaders: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader?minimize!less-loader!postcss-loader'
    })
  },
  {
    test: /\.ts$/,
    exclude: /node_modules/,
    loaders: [
      'ng-annotate-loader',
      'ts-loader'
    ]
  },
  {
    test: /\.html$/,
    loaders: [
      'html-loader'
    ]
  }
]

}, plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.NoEmitOnErrorsPlugin(), FailPlugin, new HtmlWebpackPlugin({ template: conf.path.src('index.html') }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, output: {comments: false}, compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase }), new ExtractTextPlugin('index-[contenthash].css'), new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}), new webpack.LoaderOptionsPlugin({ options: { postcss: () => [autoprefixer], resolve: {}, ts: { configFileName: 'tsconfig.json' }, tslint: { configuration: require('../tslint.json') } } }) ], devtool: 'source-map', output: { path: path.join(process.cwd(), conf.paths.dist), filename: '[name]-[hash].js' }, resolve: { extensions: [ '.webpack.js', '.web.js', '.js', '.ts' ] }, entry: { app: ./${conf.path.src('index')}, vendor: Object.keys(pkg.dependencies).filter(dep => ['todomvc-app-css'].indexOf(dep) === -1) } };