Webpack AngularJS Sourcemaps issue

Question

I've been struggling with getting my source-maps working in my app for quite a while. I have set

devtool:  'source-map',

in the webpack configuration, but they are still not available in the Chrome devtools.

I pushed a really simple app using my FE Stack hoping someone could identify the issue, whether it is with webpack, angular, or some other library. https://github.com/coreysnyder/Angular-Webpack3-Seed

Here are the versions I'm running:

{ 
  CoreyApp: '1.0.0',
  npm: '4.4.4',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '57.1',
  modules: '48',
  node: '6.9.0',
  openssl: '1.0.2j',
  uv: '1.9.1',
  v8: '5.1.281.84',
  zlib: '1.2.8' 
}
OSX 10.12.6

Intuition

If i change start-native port to something like 8080 (because it can't start otherwise on my pc) and runnpm install and npm run start-native everything works fine i.sstatic.net/fkfXN.png and i can see source in the Chrome devtools – Frumpy

So if you throw a debugger into the view1.js controller do you see the the breakpoint show up in the view1.js in chrome devtools? I am not having trouble finding the code in the console but rather having it show up on the controller. – Intuition

Can you try with devtool: 'cheap-module-source-map' option? – Pirnot

I've tried with every option. Alas none result in helpful source maps making into the devtools. – Intuition

Please list which OS you are using? Also node and npm versions – Crossways

@TarunLalwani I've updated my question with Node/NPM & OSX versions. – Intuition

Answer 1

You will probably have to setup source map for different loaders individually.

For 'ng-annotate-loader' (Docs)

use: [{
    loader: 'ng-annotate-loader',
    options: { 
        add: true, 
        single_quotes: true ,
        map: { inline: true, inFile: 'app.js', sourceRoot: __dirname + '/app' }}
}]

For less you can use documentation option like @ahmedelgabri suggested

use: [{
    loader: "style-loader"
}, {
    loader: "css-loader", options: {
        sourceMap: true
    }
}, {
    loader: "less-loader", options: {
        sourceMap: true
    }
}]

---

Old post before OP github changes.

Other option is to add devtoolLineToLine: true in your output, if you want to use devtool: 'source-map'. But devtoolLineToLine is deprecated, so consider changing devtool to something else. devtool: 'source-map' demo image

output: isTest ? {} : {
    devtoolLineToLine: true, // <= this line

    sourceMapFilename: '[name].map',
    path: __dirname + '/dist',
    filename: '[name].bundle.js',
    publicPath: publicPath
},

---

Alternatively you could use devtool: 'eval' or some variation of eval, like cheap-module-eval-source-map (similar behavior, but without file names) also works fine for me

Frumpy

Closer, but still not working. I see "View 1 Ctrl" on view1.js?:19 instead of line 23. Also I'm unable to set a breakpoint in my doThing function on line 27 of that same file. Are my expectations of sourcemaps off or are they just not working correctly. – Intuition

@Intuition are you using babel-loader from @scipper answer? Because i had the same issues with wrong line numbers. Probably can try some advice from here or in my case i just dont have loader: 'babel-loader' part and use your initial source code – Frumpy

@Intuition if that is the case, i think the easiest solution would be to use retainLines: true option { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], retainLines: true } } – Frumpy

Answer 2

I could fix your source maps for JS files, by adding the babel-loader. To do this, you need to install babel-loader:

npm i -D [email protected] @babel/core @babel/preset-env

and then extend your rule for .js

 rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'ng-annotate-loader',
             options: { add: true, single_quotes: true }
           },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
         ]
       }, [...]
 ]

Ready further details on babel-loader github repo

Dagnydago

When I use that I saw no changes. The console log "View 1 Ctrl" still appears as "app.js:19" instead of "view1.js:23" – Intuition

Wht console log? Did I miss something? – Dagnydago

github.com/coreysnyder/Angular-Webpack3-Seed/blob/master/app/… – Intuition

ah ok. well that‘s strange. I tried my fix with your project. – Dagnydago

Answer 3

There is nothing wrong with the Webpack config here https://github.com/coreysnyder/Angular-Webpack3-Seed

here is a gif using your code & setting a breakpoint in view1 file

And here is why the text is blue

And I can see the source just fine

The main issue is the less-loader you need to pass the source-maps options for both, the less-loader & css-loader check the readme

  {
    test: /\.less$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'less-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
  },

After doing this you will be able to debug from the styles panel like this

If you want to edit directly the .less files the readme mentions a blog post that can help with this https://github.com/webpack-contrib/less-loader#source-maps

I hope this answers your question

Sillsby

You put the breakpoint in view.html which is a generated file by webpack. I'm trying to put breakpoints in the source via source maps. Putting breakpoints in the generated files is not helpful as the controller logic isn't broken out line-by-line. – Intuition

When you see where the text is blue you're again seeing the compiled code, not the source. The only part that seems to be working is that you can see the stackOverflow service in an uncompiled state. That is what I'm trying to achieve for the view controllers as well which isn't happening. – Intuition