Custom builder for Angular: My way

This page summarizes the projects mentioned and recommended in the original post on dev.to

Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers
Other PDF SDKs promise a lot - then break. Laggy scrolling, poor mobile UX, tons of bugs, and lack of support cost you endless frustrations. Nutrient’s SDK handles billion-page workloads - so you don’t have to debug PDFs. Used by ~1 billion end users in more than 150 different countries.
www.nutrient.io
featured
CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
  1. nx-angular-mf

    Custom Angular Builder for Microfrontend Architecture

    TL;DR Here is the result

  2. Nutrient

    Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers. Other PDF SDKs promise a lot - then break. Laggy scrolling, poor mobile UX, tons of bugs, and lack of support cost you endless frustrations. Nutrient’s SDK handles billion-page workloads - so you don’t have to debug PDFs. Used by ~1 billion end users in more than 150 different countries.

    Nutrient logo
  3. es-module-shims

    Shims for new ES modules features on top of the basic modules support in browsers

    Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

  4. module-federation-plugin

    When Angular started moving away from Webpack towards ESBuild, and WMF was replaced by Native Federation (NF), it was nice to see that the ideas of five years ago were not so crazy. NF was used in recent projects, and everything seemed to be going well. With the release of Angular 18, Hydration support also appeared. I wanted to try this functionality, but it turned out that NF does not support SSR. The solution1 proposed by the author of NF didn't seem like a reliable. It called for a wrapper that, instead of a module, made an HTTP request to get the HTML, then parsed it and inserted it into the component. That approach created compatibility issues with Hydration and in my opinion significantly complicated the architecture, since it required running a separate SSR server for each mini-SPA. In turn, NF already had everything needed to load mini-SPA modules via dynamic import. Therefore I decided to give it a try:

  5. webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

  6. angular-cli

    CLI tool for Angular

    Shame on me, I didn't know that Node.js can't load modules via HTTP. So I had to find a workaround. Node.js supports hooks for loading modules, and this is already at the release candidate stage. Angular 19 even uses this method to generate the manifest file. Wrote an quick and dirty code which worked. Created an issue, suggested a pull request with POC, but there was no response. What's left? Make your own solution.

  7. TypeORM

    ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

    In my project I also use TypeORM with plugin for NestJS. To do this I needed to add custom options for esbuild. I implemented a feature similar to custom-esbuild to allow users to add their own plugins to the build.

  8. angular-builders

    Angular build facade extensions (Jest and custom webpack configuration)

    The problem was related to the implementation of @angular-devkit/build-angular:dev-server. After analyzing other builders, such as custom-esbuild, a solution was found. Using the approach from this example helped to successfully complete the build of host-application:serve. On http://localhost:4200/ everything looked correct, but only thanks to SSR. With disabled SSR, there was an error:

  9. CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  10. nestjs-json-api

    Tools to implement JSON API, such as, end point, query params, body params, validation and transformation response.

    In my project I also use TypeORM with plugin for NestJS. To do this I needed to add custom options for esbuild. I implemented a feature similar to custom-esbuild to allow users to add their own plugins to the build.

  11. single-spa

    The router for easy microfrontends

    Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

  12. nx

    Build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.

    An efficient work environment is the key to rapid development and testing. Many of us have heard stories about how it takes days or even weeks to set up a work environment at a new job or project. I am not exception! To avoid such situations, I decided to think through the structure and configuration in advance. The main idea was to make everything reproducible and easy to use. Since the goal was to develop a plugin for nx.dev, I started by creating a new workspace via create-nx-workspace. I used the test application to experiment with SSR, and therefore created a plugin template using @nx/plugin:plugin. Additionally, I generated two applications and one library via NX generators. As a result, the project structure looked like this:

  13. Nest

    A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀

    In my project I also use TypeORM with plugin for NestJS. To do this I needed to add custom options for esbuild. I implemented a feature similar to custom-esbuild to allow users to add their own plugins to the build.

  14. esbuild

    An extremely fast bundler for the web

    Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

  15. Angular

    Deliver web apps with confidence 🚀

    Hello everyone, I'd like to share by experience of building custom builder for Angular.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Hacktoberfest 2024 with Ghostfolio

    9 projects | dev.to | 26 Sep 2024
  • Hacktoberfest 2023 with Ghostfolio

    9 projects | dev.to | 26 Sep 2023
  • Angular Authentication: Best Practices 🏆

    6 projects | dev.to | 11 Nov 2021
  • Starting a Modern Angular Application

    10 projects | dev.to | 16 Feb 2025
  • Stream multiple responses in the Resource API

    1 project | dev.to | 4 Feb 2025

Did you know that TypeScript is
the 1st most popular programming language
based on number of references?