Unable to override WebpackDevServer configuration

[bdimitrijoski]

Hello,
I am upgrading big project that runs on AngularJS with Typescript and I am trying to customize the webpack configuration so everything can run as it worked previously.
I have managed to create all the configration that I need, thanks to the configuration provided here.

My only problem that I can't figure out how to do is to modify the webpackDevServer configuration.
I am using web sockets in my application and in my previous webpack configuration I was using the setup function to access to the Express app object and attach the web sockets there.

I have tried to put the "devServer" in my custom webpack configuration, but it seems that is not used.

Here is my part of my angular.cli configuration:

//... some stuff...
		"build": {
		  "builder": "@angular-builders/custom-webpack:browser",
		  "options": {
			"customWebpackConfig": {
			   "path": "./webpack.config.js",
				"mergeStrategies": {
					"entry": "prepend",
					"rules": "prepend",
					"plugins": "replace",
					"devServer": "replace"
				}
			},
 //... some stuff...
		"serve": {
		  "builder": "@angular-builders/dev-server:generic",
		  "options": {
			"browserTarget": "myapp:build"
		  },
//... some stuff...

Webpack configuration:

//... some stuff...
let CHUNK_HASH = webpackConfigurationUtils.generateBundleHash();

module.exports = {
    entry: {
        "main": [
            "./src/main.ts"
        ],
        "polyfills": [
            "./src/polyfills.ts"
        ],
        "styles": [
            "./src/styles.css"
        ]
    },
    output: {
        path: path.join(process.cwd(), "dist"),
        filename: `[name].bundle${CHUNK_HASH}.js`,
        chunkFilename: `[id].bundle${CHUNK_HASH}.js`
    },
    plugins: plugins,
	devServer: {
      port: METADATA.port,
      host: METADATA.host,
      hot: METADATA.HMR,
      public: METADATA.PUBLIC,
      historyApiFallback: true,
      watchOptions: {
        ignored: /node_modules/
      },
      stats: {
        assets: true,
        children: false,
        chunks: false,
        hash: false,
        modules: false,
        publicPath: false,
        timings: true,
        version: false,
        warnings: true,
        colors: {
          green: '\u001b[32m',
        }
      },
	  https: {
		cert: fs.readFileSync("keystore.crt"),
		key: fs.readFileSync("store.key")
		},

      /**
       * Here you can access the Express app object and add your own custom middleware to it.
       *
       * See: https://webpack.js.org/configuration/dev-server/
       */
      setup: function (app) {
        	var server = https.createServer({
                key: fs.readFileSync('store.key'),
                cert: fs.readFileSync('keystore.crt')
            }, appServer);

            server.listen(WEBPACK_CONFIG.WEB_SOCKETS_PORT);

            var socketManager = require('./socket.config')(server, WEBPACK_CONFIG.API_PORT);
            socketManager.connectToAPISocketServer();
      }
    }
}

Is it possible to use angular-builders to customize the webpackDevServer somehow?

[just-jeb]

In general the answer is yes, it should be possible. But it's very hard to tell what's the problem here. Could you create a minimal reproduction repo so that I could take a look?

[bdimitrijoski]

Hi, sorry for the late response.
Here is minimum reproduction repo:
https://github.com/bdimitrijoski/angular-cli-custom-webpack-config

[just-jeb]

It is a bug, apparently.
If you look into their source code you'll see that they are not building devServer configuration as part of webpack configuration but rather doing that in a different method - _buildServerConfig.
In order to fix the bug the builder has to override that method and merge devServer config from the custom webpack configuration.
The problem is that this method is private, so you can't just override it by inheritance.
I'll think about possible solutions.
Unfortunately I can't think of any workaround to provide you with for the time being.

[bdimitrijoski]

OK, thanks for the answer. Probably for now the only solution as I can see is to create new custom webpack configuration that will work without angular CLI.
If you find some other more elegant solution, please let me know :)

[just-jeb]

Just implemented this small bit of functionality, will be available in the next version (which I hope will be released today).

[bdimitrijoski]

Awesome, thanks.

[just-jeb]

Implemented in 2.3.5, please confirm that it works for you.

[bdimitrijoski]

Yes, I confirm that the issue is fixed in the 2.3.5 version.
Thank you.