Bug: ng-annotate-loader and babel-loader break Source Maps.

[mikeymco]

Description

Using ng-annotate-loader and babel-loader together breaks Source Maps in Angular1.x, Webpack, Babel/ES6 scaffolds. The line associations between the Source Maps and actual source files are output incorrectly, preventing browsers from adding breakpoints in the correct place in source files.

Reproduction Steps

• Generate a scaffold with the following config.
• Try to add breakpoints at specific source file lines via Source Maps in Chrome. (Within webpack://./src/app.) For example: Add a breakpoint at line 8 in src/app/routes.js. The browser will place the breakpoint at line 4.

Config

{
  "generator-fountain-angular1": {
    "version": "1.0.0",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": "",
      "css": "scss",
      "resolved": "/usr/local/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1:app",
      "_": [],
      "sample": "techs",
      "router": "uirouter"
    }
  }
}

Potential Fix

I was able to fix this inside my own scaffold by using babel-plugin-angularjs-annotate instead of ng-annotate-loader. (And according to some this is the proper way to annotate Angular1.x code. I don't know one way or another.)

I'd prefer to make a PR for this change but after looking at the Fountain source, I'm unable to find an elegant way to use this dependency based on the specific config criteria responsible for this issue. If I'm missing something and this is a straightforward fix, I'd be happy to make it. Any suggestions?