As a development company, it is quite common that different projects require (almost) equal code. The need for a modular system becomes more and more a requirement so that I maximize code-reuse on both front-end and back-end.

What is important is that I don't want to cut on restrictions, meaning a client would almost always be able to get the features he wants. If that feature turns out to be re-usable for other business cases, I would include it in one of the "main" modules, otherwise we would (extend/override existing modules and) create a separate module.

Back-end

Now on the back-end I have solved this, and it might be worth to explain with an example.

Let's say you have a Core module, a E-Commerce module and a Marketplace module.

• All of the modules would require a Portal / back-office / admin panel.


• The e-commerce module would need to have a dedicated webshop web project.


• The marketplace module would need to have a dedicated marketplace web project.

The way I solved this, in C#, is like so:

So in above image you can see that the controllers within the modules are extensible by overriding it. All the domain and application logics are in the same fashion (not shown): most things are virtualized so I can override it if needed within one business-project. So if one business-project does not meet the requirement by using the standard 'E-Commerce' module, it could extend or create additional logic/controllers to achieve the features.

So, for the portal application, I see no issue. I can easily lazy-load (angular) modules based on settings. This can be one single web application for all business cases and don't need any special care. So although it shows two separate Portal web applications, they will end up with the same angular front-end code. They will then just be split up on different servers of course.

Front-end

But coming down to the webshop and the marketplace modules/projects:

• They might both have a complete different design.


• Both could be used by different businesses with each it's unique checkout/marketplace flow/design.
  
  
  • But, loading products, showing marketplace items, register/login and payment is in terms of functionality mostly equal.
  
  


• Some components that are created in the core module and used in the portal should be also be able to be used in the webshop/marketplace app.

So..how do I get this done correctly in angular (7)? What I know up until now and worked out so far.

Similarities between business-projects

1. Since all back-end controllers will have their fixed routing, the http calls are equal across all projects. One project could extend a back-end controller and behave differently, but that would not change the routing. If one project requires way-off functionalities, it would most-likely also require a separate angular module/component.




2. Some businesses might want to show components slightly different (in the portal). This can either be achieved by having project-specific style.less files (most likely needed anyway for main layout colors) or 'override/replace' a component, as per this answer.




3. Even though a webshop and a marketplace are completely different businesses, they do have similar functionalities like: login, payment page for invoices, showing invoice details, upload photo's, datetime pickers and country/language selector + localization.




4. Sometimes extra fields are required, this can be achieved in a CRM-like method by configuring this in the database and have them load into the view on separate http-calls.

Differences between business-projects

I see the differences in a few 'stages', from minor changes to big changes:

1. 
   Small design changes: This would only require a small change in the overall layout, and could be achieved by changing the company-specific style.less. If that is not enough or would require to much code within the main style.less file, we would want to replace the component.less file. Example: A login page.


2. 
   Big design changes: The component functionality would be the same but it would require a complete different .html for the component. Example: Account profile page.


3. 
   Functional changes: The html and less file can actually be equal, but minor to major changes are required in the component functionality / behavior. Example: One might want to automatically save data, one might want to have a confirmation button.


4. 
   Complete different component: Solved, see 2. in similarities.

Remaining questions

1. How could I load a different style for a specific component? Similar to supplying multiple design files for mobile, tablet and desktop. But then based on an environment variable?


2. How to have a complete different .html file for the same component functionality?


3. Perhaps it can be useful to have the routing configuration per-company to easily switch to a custom component instead of one of the default components within one module?


4. How would I structure my folders? The ASP.NET Core-way is to have the angular project within the web project, but when I want to share components across all the different web projects I don't really see how this would work. I think I do prefer to have the angular project within the web project because they integrate quite good with each other, would also avoid token-based authentication overhead when not hosting them separately.

Consideration

One way I can think of is creating your own private npm packages, create a 'core' module, 'ecommerce' module and a 'marketplace' module. And then have every actual business-project import these npm packages. For production-ready code this would work I guess, but during development I am not sure how this would work so that I don't have to publish my package every time before I can use it in the other project. For this I would still have to solve the above questions: how can I extend/override the module again after importing it. If I would be able to all have a ng build --watch on them that it would be fine, but of I guess this will probably require intensive configuration when I want to automate it in the CI/CD? Also given the fact that it needs to easily be debuggable during testing one project.

Basically I am looking for best-practices. So far solutions were hard to find since 'modules' and 'angular' go hand in hand, so most solutions just solely focus on individual modules within one project.

I have a architecture sketch in how I would structure the angular modules: