title: not able to debug typescript files in Chrome after updating Angular
body: <p>I've been writing a simple app using Angular 4.2.5 just to learn some stuff. I'd been able to debug the typescript files in Chrome all that time. I recently updated to Angular 5.2.7 and am no longer able to see the typescript files in Chrome. They don't appear at all when doing a control-P on the source tab (nor do the javascript files). My tsconfig.json file hasn't changed, and as you can see, the "sourcemap" property is set to true. So I'm not sure why Chrome can't seem to find these files now.</p>
  
  <pre><code>{   "compilerOptions": {
      "module": "es2015",
      "moduleResolution": "node",
      "target": "es5",
      "sourceMap": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "skipDefaultLibCheck": true,
      "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
      "strict": true,
      "lib": [ "es6", "dom" ],
      "types": [ "webpack-env" ]   },   "exclude": [ "bin", "node_modules" ],   "atom": { "rewriteTsconfig": false } }
  </code></pre>
  
  <p>Adding webpack.config as requested:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const merge = require('webpack-merge');
  const AotPlugin = require('@ngtools/webpack').AotPlugin;
  const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
  
  module.exports = (env) =&gt; {
      // Configuration in common to both client-side and server-side bundles
      const isDevBuild = !(env &amp;&amp; env.prod);
      const sharedConfig = {
          stats: { modules: false },
          context: __dirname,
          resolve: { extensions: [ '.js', '.ts' ] },
          output: {
              filename: '[name].js',
              publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
          },
          module: {
              rules: [
                  { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
                  { test: /\.html$/, use: 'html-loader?minimize=false' },
                  { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                  { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                  { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] }
              ]
          },
          plugins: [new CheckerPlugin()]
      };
  
      // Configuration for client-side bundle suitable for running in browsers
      const clientBundleOutputDir = './wwwroot/dist';
      const clientBundleConfig = merge(sharedConfig, {
          entry: { 'main-client': './ClientApp/boot.browser.ts' },
          output: { path: path.join(__dirname, clientBundleOutputDir) },
          plugins: [
              new webpack.DllReferencePlugin({
                  context: __dirname,
                  manifest: require('./wwwroot/dist/vendor-manifest.json')
              })
          ].concat(isDevBuild ? [
              // Plugins that apply in development builds only
              new webpack.SourceMapDevToolPlugin({
                  filename: '[file].map', // Remove this line if you prefer inline source maps
                  moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
              })
          ] : [
              // Plugins that apply in production builds only
              new webpack.optimize.UglifyJsPlugin(),
              new AotPlugin({
                  tsConfigPath: './tsconfig.json',
                  entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                  exclude: ['./**/*.server.ts']
              })
          ])
      });
  
      // Configuration for server-side (prerendering) bundle suitable for running in Node
      const serverBundleConfig = merge(sharedConfig, {
          resolve: { mainFields: ['main'] },
          entry: { 'main-server': './ClientApp/boot.server.ts' },
          plugins: [
              new webpack.DllReferencePlugin({
                  context: __dirname,
                  manifest: require('./ClientApp/dist/vendor-manifest.json'),
                  sourceType: 'commonjs2',
                  name: './vendor'
              })
          ].concat(isDevBuild ? [] : [
              // Plugins that apply in production builds only
              new AotPlugin({
                  tsConfigPath: './tsconfig.json',
                  entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
                  exclude: ['./**/*.browser.ts']
              })
          ]),
          output: {
              libraryTarget: 'commonjs',
              path: path.join(__dirname, './ClientApp/dist')
          },
          target: 'node',
          devtool: 'inline-source-map'
      });
  
      return [clientBundleConfig, serverBundleConfig];
  };
  </code></pre>
  
  <p>Adding the webpack.vendor file also:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const merge = require('webpack-merge');
  const treeShakableModules = [
      '@angular/animations',
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/forms',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      'zone.js',
  ];
  const nonTreeShakableModules = [
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      'es6-promise',
      'es6-shim',
      'event-source-polyfill',
      'jquery',
  ];
  const allModules = treeShakableModules.concat(nonTreeShakableModules);
  
  module.exports = (env) =&gt; {
      const extractCSS = new ExtractTextPlugin('vendor.css');
      const isDevBuild = !(env &amp;&amp; env.prod);
      const sharedConfig = {
          stats: { modules: false },
          resolve: { extensions: [ '.js' ] },
          module: {
              rules: [
                  { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
              ]
          },
          output: {
              publicPath: 'dist/',
              filename: '[name].js',
              library: '[name]_[hash]'
          },
          plugins: [
              new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
              new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
              new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
              new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
          ]
      };
  
      const clientBundleConfig = merge(sharedConfig, {
          entry: {
              // To keep development builds fast, include all vendor dependencies in the vendor bundle.
              // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
              vendor: isDevBuild ? allModules : nonTreeShakableModules
          },
          output: { path: path.join(__dirname, 'wwwroot', 'dist') },
          module: {
              rules: [
                  { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
              ]
          },
          plugins: [
              extractCSS,
              new webpack.DllPlugin({
                  path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                  name: '[name]_[hash]'
              })
          ].concat(isDevBuild ? [] : [
              new webpack.optimize.UglifyJsPlugin()
          ])
      });
  
      const serverBundleConfig = merge(sharedConfig, {
          target: 'node',
          resolve: { mainFields: ['main'] },
          entry: { vendor: allModules.concat(['aspnet-prerendering']) },
          output: {
              path: path.join(__dirname, 'ClientApp', 'dist'),
              libraryTarget: 'commonjs2',
          },
          module: {
              rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
          },
          plugins: [
              new webpack.DllPlugin({
                  path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                  name: '[name]_[hash]'
              })
          ]
      });
  
      return [clientBundleConfig, serverBundleConfig];
  }
  </code></pre>