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']
                        }
                    }
                ]
            },
],
....