angular-builders: CustomWebpack with Devkit/CLI 8.2 causes build options to get overridden/ignored

Update: Related issue in Angular CLI repo: https://github.com/angular/angular-cli/issues/16098

Describe the bug This is a hard bug to describe, but when using custom-webpack for both dev-server and browser, certain options in the browser build get ignored. I spent a lot of time trying to debug what’s going on (the devkit was very hard to debug), and it seems that when getTargetOptions is called within custom-webpack/dev-server, it includes the options, but when getTargetOptions is called again inside of executeDevServerBuilder, it is missing some of the options specified.

This manifested for me with ‘showCircularDependencies’ (which is set to false for my browser build) getting ignored in the dev server build but respected in the browser build).]

This seems to repro pretty easily by simply calling getTargetOptions twice inside of dev server, e.g.

    async function setup() {
        const browserTarget = targetFromTargetString(options.browserTarget);

        const targetOptions1 = context.getTargetOptions(browserTarget).then(opts => // correct);
        const targetOptions2 = context.getTargetOptions(browserTarget).then(opts => // missing some parameters)

        return context.getTargetOptions(browserTarget) as unknown as CustomWebpackSchema;
    }

I hope this is enough to investigate, I can provide more details as well

To Reproduce Steps to reproduce the behavior:

Create a project that uses dev-server
Add a non-default property to the browser build, e.g. showCircularDependencies: false
Target dev-server at build:browser
Notice that the property showCircularDeps is ignored

Expected behavior Properties specified in the browser build are ignored

Libraries

@angular-builders/custom-webpack: "8.1.0"
@angular-devkit/architect: "0.802.0"
@angular-devkit/build-angular: "0.802.0"
@angular-devkit/build-optimizer: "0.802.0"
@angular/cli: "8.2.0"
@angular/compiler-cli: "8.2.0"
@angular/language-service: "8.2.0"

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 9
Comments: 35 (14 by maintainers)

Most upvoted comments

@flash-me the code (both Angular’s and custom-webpack’) seems completely fine to me. The custom config is still applied after the base one - note that the base one is passed to a transform, which, in turn, merges the config while the custom overrides the base.
Regarding the if, yes, you are right, this is for reason. If custom config exports a function, the base config is passed into this function and then the function is supposed to modify it and return the new config. It’s described in the docs.
I’ll try to figure out why you’re getting this weird behavior, but from the first glance the code seems OK. One thing I need you to try though. If you run the dev-server build with aot the problem still persists?

just-jeb on Sep 6, 2019

The problem here is that @angular-builders will apply its config onto the base webpack config. This was okay, because the CLI webpack-config has been applied before the custom one. But this Commit changed the behaviour.

On a quick look into the code I’d assume that using mergeConfigs in both cases might solve the issue, but I can image that there was a reason for the if when providing a function. I donno 😕

flash-me on Aug 23, 2019

I just upgraded an app from Angular 8.x to Angular 11.x and the circular dependency plugin workaround above wasn’t needed any more 👍

insin on Mar 26, 2021

@chriswep try /[\s\S]*/

It’s worked for me.

Thanks @justinappler for the workaround.

Just in case any newbs to webpack like me come across this,

you need to run npm install --save circular-dependency-plugin if you haven’t already got it installed and also require it i.e. const CircularDependencyPlugin = require('circular-dependency-plugin');

Then this will work

const CircularDependencyPlugin = require('circular-dependency-plugin');
module.exports = {
	plugins: [
	new CircularDependencyPlugin({
		exclude: /[\s\S]*/,
	})]
}

mancmanomyst on Sep 18, 2019

I see. Seems that I also misunderstood the issue.
@justinappler , @chriswep Just to make sure I understand it right now:

You use some non-default option in browser build in angular.json (for example showCircularDependencies: false).
When you use vanilla builders (@angular-devkit/build-angular) it works as expected both for build and serve.
When you use @angular-builders/custom-webpack, without even using custom webpack config (just replacing the builder), the serve ignores this override. Is that so?
Would you mind creating a minimal reproduction repo for me?

just-jeb on Sep 6, 2019

@just-jeb Uhhhm puhh. Donno what exactly the issue was here. In the meanwhile I changed my approach / have my own builders. I think the problem was a mix of “where do I have to write what” like in angular.json you set flags for the CLI and in webpack.custom.config.js you are modifying the final WebpackOptions that will be used to execute webpack in the end with the help of ExecutionTransformer.

But all in all, just checked again. Seems to work for me. 👍 I’m dealing with other issues atm ^^

flash-me on Sep 6, 2019

Please update me if this is still the case with custom-webpack@8.2.0.

it’s still the case for me

chriswep on Aug 19, 2019