Maximizing Productivity in Angular: Advanced Configurations in angular.json (2024)

Optimizing the generation of Angular components, classes, directives, guards, modules, pipes, and services.

Maximizing Productivity: Advanced Configurations in angular.json. By Astrit Shuli

Not a member? No problem. Read here for free!

Angular, a popular web application framework, provides a powerful configuration file called angular.json that allows developers to fine-tune various aspects of their projects. In this article, we will explore some advanced configurations in the angular.json file to enhance your development workflow.

Customizing Schematics

Angular schematics provide a way to scaffold and generate code automatically. By customizing the schematics configuration in angular.json, you can tailor the generated code to match your project's specific requirements.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "skipTests": true
  },
  "@schematics/angular:class": {
    "skipTests": true
  },
  "@schematics/angular:directive": {
    "skipTests": true
  },
  "@schematics/angular:guard": {
    "skipTests": true
  },
  "@schematics/angular:pipe": {
    "skipTests": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  }
}

In this example, we’ve customized the default options for various schematics:

Component: Set the default style to SCSS and skip generating test files.
Class: Skip generating test files for classes.
Directive: Skip generating test files for directives.
Guard: Skip generating test files for guards.
Pipe: Skip generating test files for pipes.
Service: Skip generating test files for services.

Feel free to adjust these settings based on your project’s coding standards and testing strategies.

Extending Schematics Customization

Customizing schematics in angular.json goes beyond skipping tests and choosing styles. Let's look at more options you can leverage:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "skipTests": true,
    "flat": true, // Generate components in the same folder
    "prefix": "app", // Customize the selector prefix
  },
  "@schematics/angular:service": {
    "skipTests": true,
    "flat": false, // Generate services in their own folder
  },
  "@schematics/angular:module": {
    "routing": true // Generate a routing module
  }
}

Here, we’ve added configurations for:

Component: Generating components with flat structure, custom prefixes
Service: Specifying non-flat service structure and enabling lint fixes.
Module: Generating modules with routing configurations.

Adjust these settings based on your project’s architecture and coding standards.

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "skipTests": true,
    "flat": true,
    "prefix": "app",
    "lintFix": true,
    "viewEncapsulation": "Emulated" // Set default view encapsulation
  },
  "@schematics/angular:service": {
    "skipTests": true,
    "flat": false,
    "lintFix": true,
    "providedIn": "root" // Set the providedIn option for services
  },
  "@schematics/angular:module": {
    "routing": true,
    "routingScope": "Child" // Set the scope of the routing module
  }
}

Here, we’ve added configurations for:

Component: Setting the default view encapsulation and other styling options.
Service: Specifying the providedIn option for Angular services.
Module: Defining the scope of the routing module.

These options give you more control over how your code is generated.

Fine-Tuning Build Options

Beyond schematics, the angular.json file provides configurations for the Angular CLI build process. Here are some additional configurations you might find useful:

"architect": {
  "build": {
    "configurations": {
      "production": {
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
      }
    }
  }
}

In this example, we’ve customized the production build configuration:

Optimization: Enable Angular’s optimization techniques for smaller bundles.
Output Hashing: Use unique hashes for file names to ensure cache busting.
Source Map: Disable source maps for a smaller production bundle.
Extract CSS: Extract and bundle CSS files separately.
Named Chunks: Disable named chunks for simpler file names.
Ahead-of-Time (AOT) Compilation: Enable AOT compilation for faster rendering.
Extract Licenses: Extract third-party licenses into a separate file.
Vendor Chunk: Disable the creation of a separate vendor chunk.
Build Optimizer: Enable the build optimizer for smaller bundles and faster runtime.

These configurations can significantly impact the size and performance of your application in production.

Enhancing Build Configurations

Customizing build options in the angular.json file allows you to tailor your application's performance and output. Consider these additional build configurations:

"architect": {
  "build": {
    "configurations": {
      "development": {
        "sourceMap": true,
        "optimization": false,
        "vendorChunk": true
      },
      "staging": {
        "outputHashing": "media",
        "extractLicenses": false
      },
      "production": {
        "outputHashing": "none",
        "namedChunks": true
      }
    }
  }
}

Here, we’ve introduced configurations for different build environments:

Development: Enable source maps, disable optimization for faster builds, and create a separate vendor chunk.
Staging: Use media hashing for filenames and skip extracting licenses.
Production: Disable output hashing, enable named chunks for debugging.

These configurations cater to different deployment scenarios, allowing flexibility in your build process.

"architect": {
  "build": {
    "configurations": {
      "development": {
        "sourceMap": true,
        "optimization": false,
        "vendorChunk": true,
        "baseHref": "/dev/" // Set the base href for development
      },
      "staging": {
        "outputHashing": "media",
        "extractLicenses": false,
        "baseHref": "/staging/" // Set the base href for staging
      },
      "production": {
        "outputHashing": "none",
        "namedChunks": true,
        "baseHref": "/prod/" // Set the base href for production
      }
    }
  }
}

In this extended example, we’ve added:

Base Href: Configuring different base href values for development, staging, and production environments.

This allows you to manage your application’s deployment paths seamlessly.

Leveraging Asset Configurations

Managing assets is crucial for a seamless user experience. Customize asset configurations in angular.json to suit your project's needs:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "src/app/images/",
    "output": "assets/images/"
  }
]

This example:

Includes the favicon and the entire src/assets folder as top-level assets.
Specifies a more granular configuration for images, copying them from src/app/images/ to assets/images/.

Tailor asset configurations based on your project’s directory structure and asset organization.

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "src/app/images/",
    "output": "/assets/images/" // Specify a different output path for images
  },
  {
    "glob": "robots.txt",
    "input": "src/",
    "output": "/" // Include a specific file at the root level
  }
]

Here, we’ve added:

Output Path for Images: Specifying a different output path for images.
Root-Level File: Including a specific file (robots.txt) at the root level.

This flexibility in asset configurations allows for better organization and management.

Adding Language Support

"i18n": {
  "sourceLocale": "en-US",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

Here, we’ve added configurations for internationalization (i18n) support:

Source Locale: Setting the default source locale to English (en-US).
Locales: Adding French (fr) and Spanish (es) locales with their corresponding message files.

Customizing Date and Number Formats

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "angularCompilerOptions": {
              "dateLocale": "fr-FR",
              "locale": "fr-FR"
            }
          }
        }
      }
    }
  }
}

In this example, we’ve configured the date and number formats for the French locale in the production build.

Configuring Language-Related Dependencies

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "allowedCommonJsDependencies": ["ngx-translate/core"]
        }
      }
    }
  }
}

Here, we’ve added an allowed CommonJS dependency for a library like ngx-translate/core, which is commonly used for handling translations in Angular applications.

Adjusting TypeScript Configuration for Language Features

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "tsConfig": "src/tsconfig.app.json"
        }
      }
    }
  }
}

In this example, we’ve pointed to a specific TypeScript configuration file (tsconfig.app.json) where you can include language-related settings like strict typing and language features.

Enabling Differential Loading for Better Browser Compatibility

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "differentialLoading": true
          }
        }
      }
    }
  }
}

By enabling differential loading, your Angular application can serve separate bundles for modern and legacy browsers, optimizing performance and compatibility.

Fine-Tuning TypeScript Configuration

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "tsConfig": "src/tsconfig.app.json",
          "strictPropertyInitialization": false,
          "noImplicitAny": true
        }
      }
    }
  }
}

Adjust TypeScript compiler options like strictPropertyInitialization and noImplicitAny to enforce stricter typing and catch potential issues during development.

Configuring Build Output Paths

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist/my-custom-output",
          "deployUrl": "https://cdn.example.com/"
        }
      }
    }
  }
}

Specify custom output paths and deployment URLs to control where your build artifacts are stored and served from.

Adding Custom Builder Options

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./extra-webpack.config.js"
          }
        }
      }
    }
  }
}

Use a custom webpack builder and provide additional webpack configurations via a separate file.

Customizing File Replacements for Different Environments

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

This example shows how to use the fileReplacements option to replace specific files during the build process, such as swapping out the development environment configuration with the production one.

Configuring Asset Optimization

"configurations": {
  "production": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "glob": "**/*",
        "input": "src/app/images/",
        "output": "/assets/images/",
        "cache": true // Enable caching for optimized assets
      }
    ]
  }
}

By adding the "cache": true option to an asset configuration, you can enable caching for optimized assets during the production build, improving performance.

Dynamic Environment Configuration

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "assets": [
      {
        "glob": "config/config.prod.json",
        "input": "./",
        "output": "./assets/config/"
      }
    ]
  }
}

Extend your environment configuration to dynamically include additional files based on the build configuration. Here, a production build includes a specific JSON configuration file.

Advanced Angular Compiler Options

"configurations": {
  "production": {
    "angularCompilerOptions": {
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true
    }
  }
}

Fine-tune the Angular compiler options for production builds, enabling features like fullTemplateTypeCheck and strictInjectionParameters for enhanced type checking.

Using Project Dependencies with Different Configurations

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "allowedCommonJsDependencies": ["lodash"],
            "styles": ["src/styles.scss"]
          }
        }
      }
    }
  }
}

Specify different styles and allowed CommonJS dependencies for the production build of your project, ensuring flexibility in managing project-specific dependencies.

Advanced Build Optimization

"configurations": {
  "production": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true
      },
      "fonts": true
    }
  }
}

Fine-tune build optimization by enabling script and font optimization. Additionally, minify and inline critical styles for enhanced performance.

Configuring Web Workers

"configurations": {
  "production": {
    "webWorkerTsConfig": "src/tsconfig.worker.json"
  }
}

ntegrate TypeScript configurations specifically for web workers by specifying a separate tsconfig.worker.json file.

Dynamic Polyfill Loading

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "scripts": [
              "node_modules/feature-targeting-polyfill/dist/polyfill.js",
              "src/polyfills.ts"
            ]
          }
        }
      }
    }
  }
}

Load polyfills dynamically based on the build configuration, allowing you to include specific polyfills for targeted environments.

Configuring Jest for Unit Testing

"projects": {
  "your-project-name": {
    "architect": {
      "test": {
        "builder": "@angular-builders/jest:run",
        "options": {
          "setupFile": "src/setup-jest.ts"
        }
      }
    }
  }
}

Switch to using Jest for unit testing by configuring the test architect with the @angular-builders/jest:run builder. Specify a custom setup file if needed.

Customizing ESLint Configuration

"projects": {
  "your-project-name": {
    "architect": {
      "lint": {
        "builder": "@angular-eslint/builder:lint",
        "options": {
          "lintFile": "src/custom-eslint-config.json"
        }
      }
    }
  }
}

Utilize ESLint for linting Angular projects and customize the configuration by specifying a custom lint file.

Angular Universal Configuration

"projects": {
  "your-project-name": {
    "architect": {
      "server": {
        "builder": "@angular/platform-server:server",
        "options": {
          "main": "src/main.server.ts",
          "tsConfig": "src/tsconfig.server.json"
        }
      }
    }
  }
}

Configure Angular Universal for server-side rendering by specifying the server builder and associated options.

Advanced Style Preprocessing

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss",
            {
              "input": "src/variables.scss",
              "bundleName": "variables",
              "inject": false
            }
          ]
        }
      }
    }
  }
}

Extend style preprocessing by including additional stylesheets, such as variables, as separate bundles without automatic injection.

Customizing the TypeScript Version

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "typescript": "./node_modules/typescript"
        }
      }
    }
  }
}

Specify a custom TypeScript version for your project, allowing flexibility in using a specific version of the TypeScript compiler.

Angular Router Configuration

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "allowedCommonJsDependencies": [
            "ngx-cookie-service",
            "lodash"
          ]
        }
      }
    }
  }
}

Fine-tune Angular router configurations, specifying allowed CommonJS dependencies for optimized builds.

Configuring Proxy for Development Server

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "options": {
          "proxyConfig": "src/proxy.conf.json"
        }
      }
    }
  }
}

Integrate a proxy configuration file (proxy.conf.json) to define proxy rules for the development server.

Conclusion

These examples showcase more advanced configurations in the angular.json file, covering topics such as style preprocessing, TypeScript versioning, library builds, external resources for tests, Angular router settings, and development server proxy configurations. Use these configurations as a starting point, and adapt them to fit the specific needs and requirements of your Angular projects. The angular.json file provides a powerful mechanism for fine-tuning and customizing various aspects of your Angular applications.