Laravel-mix: [Enhancement Request] Angular compiler settings

[jastend]

Hi Jeffrey,

In its current state, it's not possible to run laravel mix for Angular in production mode without breaking the Angular. I do understand that Laravel is preferring Vue over Angular, but given the market share for Angular, I'd like to request to add ng-angular-annotations into the package as well.

I've tried to use the ng-angular-loader and add it to the config with webpackConfig but for some reason the loader doesn't properly annotate.

The only solution that I found is to use the ng-annotate-webpack-plugin. Unfortunately, I have to use a custom webpack.config.js to add this package, as I couldn't include the package via the merge command.

Here's the current custom code that I'm adding:

let ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

module.exports = {
    plugins: [
        new ngAnnotatePlugin({
            add: true
        })
    ]
};

Sorry if I overlooked an easier solution. I'm still fairly new to webpack2 - and thank you for your time!

[JeffreyWay]

I'm happy to add support. I just need to know precisely what is required to get Angular code to compile for dev and production modes. If anyone can chime in with steps, I can update the codebase.

[mateop]

ngAnnotate works fine for me like this:

mix.js('resources/assets/js/app.js', 'public/js')
    .webpackConfig({
        module: {
            rules: [
                {test: /\.js$/, loader: ['ng-annotate-loader']}
            ]
        }
    })

[jastend]

So I've had another look and this request is kind of redundant. I've taken @mateop's example, slightly modified it and not it also works when versioning (which was the underlying problem).

Here's the code for the webpack.mix.js:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['ng-annotate-loader', 'babel-loader']
            }
        ]
    }
});

[chaddio]

I know this is an old post but these solutions still are skipping my Angular controllers, etc when doing production mode...i've tried with .version() and without...i've tried .js .combine and .scripts with no luck...was this issue with the angular library itself or controllers, etc

[jastend]

Hi @chaddio,

For me, the issue used to be with the custom applications (I believe that's what you mean by controllers).

Here's how one of my current ones looks like (although don't look too closely how I added the CKEditor - I'm pretty sure I didn't do it the recommended way): https://gist.github.com/jastend/4e7ed4ec5c724b0bbb34ddedc935cb7c

[dragermrb]

Hi @jastend

ngAnnotatePlugin will not work because UglifyJsPlugin runs first. See #1214

[oli-laban]

My solution to this was to use babel-loader

mix.webpackConfig({
    module: {
    rules: [
        {
        test: /\.js$/,
            loader: ['babel-loader']
        }
        ]
    }
});

with babel-plugin-angularjs-annotate

{
    "presets": [
        "es2015"
    ],
    "plugins": [
        "angularjs-annotate"
    ]
}

uglifyjs-webpack-plugin causes ng-annotate-webpack-plugin to break and ng-annotate-loader won't work if you use arrow functions, but the babel way works great for me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.