CODEWITHSUNDEEP
angulartypescriptarchitectureweb-componentangular9
AlexKibo88
AlexKibo88

Reputation: 827

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.

Upvotes: 0

Views: 525

Answers (2)

AlexKibo88
AlexKibo88

Reputation: 827

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! :-)

Upvotes: 0

Yogesh Dahiya
Yogesh Dahiya

Reputation: 159

Sharing a component in different project(s) under one solution project.

Step1 - You have to create separate "shared module" or any name whatever you like, module should be out of consuming projects.

Step2 - All your consumer project should use "share module" or import "share module".

Example-

Solution-1

-- Shared Module
--Project1
  --- Module1 (import shared module)
  --- Module2
--project2
  --- Module1
  --- Module2 (import shared module)

In your scenario I think you may pull down your shared component and create a kind of shared control library and you can use that lib in different projects.

Upvotes: 0

Related Questions