Angular modules - shared module that uses 3rd party package/modules

0
votes

Setup

  1. I have a lot of lazy loaded modules
  2. I have a 3rd party module that defines its components/directives
  3. I need to use 3rd party component in many modules (eager and lazy loaded ones)
  4. 3rd party module has its config called like 3PModule.forRoot({someConfig: someValue})

I'd like to have a single point in my app where i import 3PModule with the config and use it that way in any of my app modules.

Problems/questions

  1. If i import it only in AppModule - it doesn't work in my lazy loaded modules. (template error, directive unknown)

    [This one should be because, in my understanding, AppModule does import SharedModule but since SharedModule is not the one having particular components/directives in its declarations, then AppModule does not have definitions for those 3rd party components/declarations. Is this correct? UPDATE: actually, this might be because modules are not hierarchical so each module has to import SharedModule separately]

  2. If i import it only in some SharedModule then i'm not sure how to export it with configuration: 3PModule.forRoot({someConfig: someValue})

What is the proper solution for this?

1
angular

1 Answers

-1
votes

I think you will have to import 3PModule.forRoot({someConfig: someValue}) in your AppModule and also import 3PModule in your SharedModule and export it from there. The reason is for this because forRoot registers all the providers so that needs to be done only once (by importing it in core or AppModule) but to use the respective directives or components you will have to just import that module in the respective Modules that you want to use so its better to import it in SharedModule and export it from there as SharedModule is import all the modules.