How to modularize Angular 2 application - share components, services, models among multiple pages?

Question

I am developing Angular 2 payroll application intended for serveral user groups/roles - e.g. for accountants, for employee self-service, for managers. Each user group should have completely different page layout and menus. So - there should be separate *.html pages and - I guess - separate @NgModules for each *.html page. But all those pages and modules should share the (almost) same set of components, services and model classes.

How to modularize Angular 2 application? Or is it possible to do this at all? Maybe Angular 2 supports only SPA - single page for the entire application?

• Walfrat: I don't see the problem here, you could have one main page which include either the login page if needed or the top-component corresponding to one role. You need to details a bit more what you're trying to do, because here you just seems to try to handle rights management, which is common problem.

Answer 1

One solution is to use a container page at the top level that has route references within it. The routes can be mapped to URI paths, and Angular can figure out from the URI which application component to load. At that level each application component represents a view, say, and the components at this level can share subcomponents, services, and what have you.