Search code examples
angulartypescriptarchitectureweb-componentangular9

Angular 9 - Use shared components coming from a shared project in other project's sub-modules

I am struggling with an issue when importing and using shared component in a sub-project coming from a shared project belonging to the same app.

Here follows the current structure of our multi-project app:

  1. Root
    • Sub-Project (brand new)
      • SharedModule -> responsible for the import and export of the sub-project shared components, only available to it
      • AppModule -> collector of the sub-project sub-modules (as it should be)
    • Shared Project (already existing in the app)
      • SharedModule -> this as has a ModuleWithProviders clause in its forRoot() method which lets the AppModule available to the other sub-projects
      • AppModule -> available to the other sub-projects with all its components declared and exported (bad solution, IMHO)

Our sub-project has been structured into sub-modules (i.e. SharedModule), while the Shared Projects is just a normal project with its own AppModule and a SharedModule inserted at its same level. Whenever we try importing the components, which are exported by the shared project, into our sub-project, either we don't get them to work or we override the sub-project's AppModule with the shared one, losing all the features belonging to the sub-project itself.

We tried several solution using both the forRoot() call for the SharedModule of the overall shared project, and calling the AppModule of the shared project directly, but nothing worked.

Do you have any suggestions on how to solve this issue?

Thank you.

Solution

  • I managed to solve the issue. The problem we had was related to a wrong order for the imports inside the child feature module. Order is crucial! :-)