5 Tips & Best Practices to Organize your Angular Project

Photo from unsplash.com

There are different ways of organizing Angular projects. Many of them follow a pattern of using a shared and core module, which we’ll be discussing in this article amongst other tips to keep your codebase clean and maintainable. While this architecture is suited for most projects, larger enterprise projects or tiny one-page apps might favour different approaches. In the end the architecture of each project serves the same purpose: to create a maintainable and scalable codebase.

To demonstrate the tips here, we’ll create a sample Angular app. You can follow along or check out the 👉Github repository here with some more examples.

npm install -g @angular/cli@latest
ng new best-practices-app --routing=true --style=scss
cd best-practices-app

1. Use a Shared Module 📕

Feature modules are NgModules for the purpose of organizing code.

Every Angular app has at least one module, the root module, by default called AppModule. You bootstrap that module to launch the application. As your application grows it doesn’t make sense to keep everything in the same module, so you refactor the root module into smaller Feature Modules that represent collections of related functionality. Feature Modules declare their own components, pipes and directives…