Webpack, angular and ng-annotate-loader — having troubles with annotating angular files

Question

I am trying to bundle an Angular app using Webpack and am having problems after minification of the bundle. This syntax, with manual annotation of dependencies, works:

var app = angular.module('app', [
    'ui.router'
])
.config(['$locationProvider', '$stateProvider', ($locationProvider, $stateProvider) => {
    $locationProvider.html5Mode(true);
    $stateProvider
        .state('root', {
            url: '/',
            views: {
                '': {
                    template: '<p>Hello!</p>'
                }
            }
        });
}]);

while this syntax produces an $injector:modulerr error:

var app = angular.module('app', [
    'ui.router'
])
.config(($locationProvider, $stateProvider) => {
    $locationProvider.html5Mode(true);
    $stateProvider
        .state('root', {
            url: '/',
            views: {
                '': {
                    template: '<p>Hello!</p>'
                }
            }
        });
});

I am using ng-annotate-loader for Webpack. Here is the relevant part of the config file:

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'ng-annotate!babel?stage=1'
        },

But this does not fix the [$injector:modulerr] error. Tried to change the loader: 'ng-annotate!babel?stage=1' line with loaders: ['ng-annotate', 'babel?stage=1'], with no improvement. Could you please suggest how I could fix it?

EDIT: eventually found that my question is basically a duplicate of Angular ng annotate does not work with babel

EDIT2: It was pointed out to me that ng-annotate failed to annotate the .config of angular module, because I was importing angular as a es6 module instead of declaring it as a variable, which apparently confused ng-annotate.

Answer 1

Ok, what I eventually found in ng-annotate’s Readme is that a string 'ngInject'; when placed inside a function can show ng-annotate which function to annotate.

I tried that with my setup, and it worked.

But it would be great to set up ng-annotate-loader in a way that does not require such extraneous marker strings inside functions.

P.S.: The Edit2 portion of my question contains the eventual answer — in my case, ng-annotate’s static analyzer got unhappy, because angular was imported as ES6 module instead of declared as a variable using require syntax.