Configure feature module(s) sharing service

Question

Three Modules as depicted...

|Elements| and |myForms| are imported into |App|.

Folder Structure

--app

|--Elements angular module (has ConfigService in it).

|--App angular module (angular imports Elements, and myForms (NPM PKG))

Elements module exports ConfigService using forRoot.

export class ElementsModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: ElementsModule,
      providers: [ConfigService]
    };
  }
}

App module imports Elements and myForms modules.

import { Elements } from './local-dir';
import { myForms } from 'NPM PACKAGE';

@NgModule({
  imports: [
    Elements.forRoot(),
    myForms
  ]
})

How would I give myForms access to the ConfigService in a component?

The forRoot method is working as I have access in the App module like so.

import { ElementsModule, ConfigService } form './local-dir';

I would like to give it to a myForms service that myForms already knows about. Or find a way in which I don't have to directly import the file into the myForms component I want to use it in.

If I go into the myForms NPM PACKAGE, I can do the following and it will work of course.

import { ConfigService } from './local-dir';

@Component({
  selector: 'my-element',
  providers: [ConfigService]
});

export class MyElementComponent {

  constructor(private CS: ConfigService){} 
}

Update - further clarification.

• There is one app module.
• The app module imports a myForms module. This module requires info from another module that will also be loaded.
• The other module that will be loaded, is one of many that will be choses from. But in the end, only one will be chosen.
• when the chosen module shows up in the app module, I then want to share something it has with the myForms module, inside of the app module. This is a one time share, the myForms modules does not require communication after this.
• The chosen module hands over a key/value of { anyKey: chosenModuleClassNamesToken }.
• Then in the myForms module, I can call the shared data to get class names from the chosen module like this: myFormsService[ chosenModuleDataKey ]. This would result in a value of a class from the chosen module, that I would then build in the view using ComponentFactoryResolver.

Answer 1

Create a barrel file index.ts

export * from '....' path to your module
export * from '....' path to your service

Assuming the below folder structure,

---modules
       |---- elements
       |---- configuration

Create a barrel file inside the elements folder naming it as index.ts

export * from './elements.module';
export * from '../configuration/configuration.service';

Use this file to import in a single line as

import { ElementsModule, ConfigService } from '../elements';