Muhammed Senussi
Muhammed Senussi
  • Muhammed Senussi
Migrating to Standalone Without a Big BangAngular

Angular ships a schematic that converts components, and it works. Run it, commit, move on. What follows is the part worth thinking about.

The hidden dependency graph

An NgModule that declares twelve components and imports twenty modules tells you nothing about which component needed what. Standalone components declare their own imports, and suddenly you can see that a small presentational component was pulling in a forms module it never used, and that two features shared a module for one directive.

Expect the import lists to look verbose at first. That verbosity is information that was previously hidden, and lazy loading gets more precise as a result — the router can now load exactly what a route needs.

Worth doing at the same time

  • Replace loadChildren pointing at modules with loadComponent.
  • Move providers from modules to providedIn: root or route-level providers, whichever matches the real lifetime.
  • Delete the shared module. It was never a boundary, only a convenience, and it is usually the largest single source of accidental bundle weight.

1 Comments

  • Lotte Jansen

    March 12, 2024

    Deleting the shared module was the scariest and most useful part for us. It had grown to 60 exports.

Leave a comment