Split large Angular codebase to libraries

Question

I am writing a potentially large web application using Angular 7, where I came across a design problem. My angular applications until now have been relatively small, so there was no problem keeping whole code in one project (divided in modules with lazy loading). However now that an application can grow in size I find it hard to keep all code in the same project as it makes project hard to navigate.

My thoughts were that I could divide my application into multiple angular libraries by functionalities, which poses the following questions: do I really gain some advantage with such approach or do I just create overhead with managing dependencies making development harder because of having to link in all dependencies? If this option is viable, what would be good way to split code into multiple libraries? I have looked around for some articles about large angular apps but haven't found any with my solution - all were just one project - are there any good articles on such matter?

Answer 1

The simplest way to do this (if you haven't done this already) is to split your Angular code into modules.

That introduces the posibility to clean each module up so that it is not dependent on other modules, or only dependent if it is supposed to be on top of another module. So it is definitely a good idea to do so, even in projects that have as little as 20+ components and services.

If you are using git you can take advantage of the submodule functionality in git to allow you to share your modules between projects. (But beware that submodules in git can give you some annoyances, I have had some issues with them and TortoiseGit, not lost any commits, but still.)

If you already are using modules and that is not sufficient for splitting up your project the next step will be to make packages to install in your project with npm (or manually doing the same by editing the projects .json files and copying to node_modules).

I don't think Angular has anything between these two ways of splitting up your code. It seems to be a design decision that 'libraries' have to be packages. And that seems to be a fair choice considering the general architecture of Angular.