ng-annotate-loader + babel-loader not working together

[rmemon]

Hi,
Here is I am facing issue when i am using ng-annotate-loader and babel-loader together,

let me know if i am missing something

Thanks in advance.

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        loginApp: './public/modules/login/loginApp.js',
        docListApp: './public/modules/docList/ncApp.js',
        signingRoomApp: './public/modules/signingRoom/ncAppSV.js',
    },
    output: {
        filename: 'dist/[name].bundle.js',
    },
    module: {
        loaders: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: [                    
                    {
                        loader: 'ng-annotate-loader',
                        options: {
                            add: false,
                            map: false,
                        },
                    },
                    { loader: 'babel-loader', }
                ],                
            },            
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                },
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/[name].bundle.css',
        }),        
    ],
    devtool: 'source-map',
};

[al-the-x]

With options add:false, ng-annotate won't add annotations: https://github.com/olov/ng-annotate/blob/master/OPTIONS.md

[ptitdam2001]

Hi,
For ng-annotate-loader + latest babel loader gives :

Module build failed (from ./node_modules/ng-annotate-loader/loader.js): NonErrorEmittedError: (Emitted value instead of an instance of Error) error: couldn't process source due to parse error,'import' and 'export' may appear only with 'sourceType: module' (40:0) at runLoaders (/home/dsu/Documents/development/stack/intra-web/node_modules/webpack/lib/NormalModule.js:283:13) at /home/dsu/Documents/development/stack/intra-web/node_modules/loader-runner/lib/LoaderRunner.js:364:11 at /home/dsu/Documents/development/stack/intra-web/node_modules/loader-runner/lib/LoaderRunner.js:230:18 at Object.context.callback (/home/dsu/Documents/development/stack/intra-web/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at Object.module.exports (/home/dsu/Documents/development/stack/intra-web/node_modules/ng-annotate-loader/loader.js:87:10)

with my webpack.config.js :

`
const webpack = require('webpack');
const npmConfig = require('./package.json');
const devServer = require('./conf/webpack/devServer.conf');

const config = {
optimization: {
runtimeChunk: true,
// occurrenceOrder: true,
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
minChunks: 2,
name: "vendors",
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0 // This is example is too small to create commons chunks
},
vendors: {
test: /node_modules/,
chunks: "initial",
name: "vendors-commons",
priority: 10,
enforce: true
}
}
},
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: [
{
loader: 'ng-annotate-loader',
options: {
add: true
}
},
{
loader: "babel-loader"
}
]
}
]
},
devtool: process.env.NODE_ENV === "production" ? 'source-map' : 'eval',
devServer: devServer,
stats: process.env.NODE_ENV === "production" ? 'errors-only' : 'normal'
};
module.exports = config;
`

[kostetskyroma]

@ptitdam2001 did u resolve it?

[molecular]

@ptitdam2001 I second exactly your issue. Did you resolve it?

[ptitdam2001]

Yes I resolved it, I remove ng-annotate-loader from the webpack configuration and I use babel-plugin-angularjs-annotate.

In my .babelrc

{
  "presets": [
      //    "env",
      "@babel/preset-env"
  ],
    "plugins": [
        "angularjs-annotate"
    ]
}

In my webpack.config :

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