Best practise to handle multiple application

My team and I are going to develop a very big system using Angular2: there are at least 8/9 different macro-sections and each of them is very different from the others. The only common point is the login. Some of them are the following:

-dashboard

-operative console

-admin console

-customer console

-...

(each of them has a lot of sub-sections)

I'm thinking about two different approaches:

1) In order to reuse as much code as possible, all the sections will belong to the same application (same project.. so single entry point) and each macro-section will be a different state (route). I'm afraid about this approach because the system will grow a lot and I dont know if the performances of each macro-section will be affected. Furthermore this approach limits the possibility of writing others macro-sections in others technologies (angularJS or others). (in this approach there will be a single project folder, with a single boostrap() method and a single index.html)

http://ip/dashboard // state

http://ip/operative-console // state

http://ip/admin-console // state

2) In order to better separate the macro-sections, each macro-section will be a different application (this means that there will be 8-9 project folder, 8-9 index.html). Maintaining 8-9 (in the future even 20 or 30) project could be very frustrating. Just think about libraries, updates, etc.. This approach permits to write each module in whatever technology we want (for example in the future we could use Angular3 without rewrite the entire system) but it is difficult to share code between applications.

http://ip/dashboard // application

http://ip/operative-console // application

http://ip/admin-console // application

What do you think about?

Thanks a lot