Angular Module Loaders: SystemJS, Webpack and Today's esbuild and Vite Build

Old Angular tutorials talk about systemjs.config.js and webpack.config.js. You do not need to write either today. This short lesson explains what they were, so old articles make sense.

What you will learn

• What a module loader and a bundler are
• The history: SystemJS, then Webpack, then esbuild and Vite
• What you do (and do not) configure today

The problem they solve

Your code is split into hundreds of files that import each other. Browsers originally could not load that. Something had to find every file, join them and deliver something the browser can run.

• A module loader loads modules while the page runs, in the browser. SystemJS did this in the earliest Angular versions. You wrote a config file telling it where @angular/core lived, and the browser downloaded many small files.
• A bundler does the work at build time. It follows all the import lines, removes unused code (tree shaking), minifies and writes a few optimised files. Webpack became the standard, and Angular used it from version 6 to 16 behind the CLI. Config files were hidden inside the CLI; some projects used custom builders.
• Since Angular 17 the default is esbuild for building and Vite for the dev server (ng serve). They are much faster. You still run ng build.

Today's flow

1. You write standalone components and import them.
2. ng build uses @angular/build (esbuild) to bundle and optimise.
3. The result in dist/<app>/browser is plain files: index.html, JavaScript, CSS.
4. Any static server can host them.

Lazy loading is a loader feature

Lazy loading still uses a loader idea, now the browser's native dynamic import:

// File: dynamic import
const module = await import('./reports/reports.routes');

The bundler turns each import() into a separate file (a *chunk*) that downloads only when needed. That is exactly what loadComponent and loadChildren do.

What should you configure?

• Normally nothing. Use angular.json for options (styles, assets, budgets, file replacements).
• Add the packages you need with npm install and ng add.
• Do not add Webpack or SystemJS to a new Angular project. If an old project still uses the Webpack browser builder, upgrade with ng update and the migration to the application builder.

Common mistakes

• Following a tutorial for Angular 2 to 4 in a new project.
• Installing Webpack plugins that the esbuild builder cannot use.
• Importing the same large library in many lazy routes without checking the bundle size (use ng build --stats-json and an analyser).

Try it yourself

1. Run ng build and open dist/<app>/browser. Count the JavaScript chunks.
2. Add a lazy route and see a new chunk appear.
3. Check angular.json and find the builder value of your build target.

Quick check

1. What is the difference between a module loader and a bundler?
2. Which tools build Angular today?
3. How does lazy loading create a separate file?

Next, put everything together in the advanced capstone.