I am currently working on migrating a large enterprise application to Angular 17 and I want to start using Standalone Components to reduce the NgModules boilerplate. However, I am confused about how to handle shared dependencies and global services without the traditional AppModule structure. What is the best strategy to refactor a component-heavy app into a standalone-first architecture while ensuring that lazy loading still works correctly?
3 answers
Transitioning to standalone components in Angular 17 is a game changer for reducing code complexity. When you remove NgModules, you need to use the imports array directly within the @Component decorator to pull in common directives like CommonModule or specific UI components. For global services, instead of the old providers array in a module, you should now use provideHttpClient() or provideRouter() within your app.config.ts during the bootstrapApplication call. I found that using the Angular CLI's migration schematic ng generate @angular/core:standalone saved me days of manual refactoring by automating the conversion of pipes and directives too.
Kimberly, that is a great point about the schematics! But if I have a complex shared module used by fifty different components, does converting it to standalone actually improve my initial bundle size or just make the imports list longer?
I suggest starting with your leaf components first. Once the small, independent pieces are standalone, converting the larger parent containers becomes much more manageable.
Sarah’s "bottom-up" approach is exactly what we followed. It allowed our team to continue shipping features while slowly phasing out the legacy AppModule structure without breaking the main build.
David, it actually helps significantly with tree-shaking. When you use standalone components, the compiler can more easily identify exactly which pieces of code are unused. While your imports list in the component file might look a bit longer at first, the overall production build is usually leaner because you aren't pulling in an entire SharedModule just to use one single pipe or directive.