Solving the Tree-Shaking Problem in Angular Projects with NX-Monorepos

A common issue when using NX-Monorepos in Angular projects is the tree-shaking problem, which occurs when barrel files are used in conjunction with @angular-devkit/build-angular:browser. One solution for this is applying the @nrwl/angular:webpack-browser build tool, offering more flexibility and customization. By creating a specific webpack configuration file and using the sideEffects parameter, the tree-shaking problem can be remedied. It's important to carefully configure the build tools to ensure only necessary code is included in the final bundle file. Utilizing NX-Monorepos and build tools such as @nrwl/angular:webpack-browser in general provides better maintainability and scalability for modern web development projects.

webpack.config.js

1const webpack = require('webpack')
2
3module.exports = {
4    module: {
5        rules: [
6            {
7                test: [/src\/index.ts/i],
8                sideEffects: false,
9            }
10        ]
11    },
12    plugins: [
13        new webpack.DefinePlugin({
14            'STABLE_FEATURE': JSON.stringify(true),
15            'EXPERIMENTAL_FEATURE': JSON.stringify(false)
16        })
17    ]
18};

project.json

1{
2 ...
3    "architect": {
4    "build": {
5    "builder": "@nrwl/angular:webpack-browser",
6    "options": {
7    "customWebpackConfig": {
8    "path": "apps/my-app/webpack.config.js"
9    },
10  ...
11}

Before

After