Using Babel loader with ngAnnotate plugin

Hey there. Loving your project!

Small Issue I currently have:

I want to use Babel with ngAnnotate to annotate my old AngularJS files after they have been bundled by angular-cli/webpack. I want use an Angular hybrid app.

Since ‘ng eject’ isn’t working anymore I wanted to use this library to include babel into my build.

I managed to get my custom webpack config loaded, but it doesn’t seem to pickup the files and transpile them.

This is how my configs are looking like:

angular.json

        "build": {
          "builder": "angular-cli-builders:custom-webpack-browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true,
              "mergeStrategies": { "externals": "replace" }
            }

webpack.config.js

  module: {
    rules: [{
      test   : /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use    : [{
        loader : 'babel-loader',
        options: {
          presets: [ 'es2015' ],
          plugins: [ require('babel-plugin-angularjs-annotate') ]
        }
      }]
    }]
  }
};

Do you have an idea what might be the problem here?

[just-jeb]

If it’s not working you are welcome to create a reproduction repo and we’ll figure it out. I can reopen this issue or you can create a brand new one.

[tommck]

For the mean time, this is what my webpack.partial.ts file looks like:

import { CustomWebpackBrowserSchema } from '@angular-builders/custom-webpack';
import * as webpack from 'webpack';
import * as merge from 'webpack-merge';

export default (config: webpack.Configuration, _options: CustomWebpackBrowserSchema) => {

  const customConfig: webpack.Configuration = {
    module: {
      rules: [
        {
          test: /\.[j|t]s$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: ['@babel/plugin-proposal-object-rest-spread', 'angularjs-annotate', 'lodash']
            }
          }
        }
      ]
    }
  };

  return merge.strategy({
    'module.rules': 'prepend'
  })(config, customConfig);
};