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)
}
};