Clash Royale CLAN TAG#URR8PPP

View injection container for angular

I'm trying to have an angular module for each backend microservice. So to keep each module independent and clean while they use each other's components when available and a default "service-is-not-available" component, when the component is not found in the container.

Example Scenario: Let's say there are a sales and accounting module.
The sales module needs a component with selector: 'total-price'.
Sales module and Accounting module are both used by the main module, but the sales doesn't know about accounting.
When I call the 'total-price' tag in sales I want the main module to find it in the accounting and display it in the sales.

Here the 'total-price' tag selector works like an abstraction (OO interface) which it's implementation is placed at accounting module, and the main module should have an IOC to search and find the implementation an inject it to the sales, and return a not found view if the view is unavailable (kind of like null object pattern). This may also help with handling authorization and returning a proper view whenever the user is not permitted to see some component.

Code Sample:
This is a sample code for the scenario but it doesn't compile, because as my question states I'm looking for a way of orchestrating, and composing the UI and injecting the <total-price> component to sales without referencing the accounting module directly.

<total-price>

1 Answer
1

In angular projects, we have modules and components. let's imagine that we have 2 modules which are X and Y, and each of them has 2 components,X1 and X2 and Y1 and Y2.

the project structure is as shown below.

Now as you have mentioned in the question, we want to use X1 component into Y2 component.
Generally, in the angular application, this situation is not a common one. we will reach to these positions rarely, but what if we get one?
Angular has mentioned that each component should use in its own module and if a component needs to be used in several components, so it does not belong to a single module,it belongs to the whole application or multiple modules and it's common.

Solution
We can imagine that X1 wants to be used in Y2 and X2 components. We have to create another module and named it 'ShareModule' and declare, export all common components into it, then we can simply import our ShareModule into any module which we want to use X1 into it. so our project structure should be like below.

Have a look at demo.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.