CODEWITHSUNDEEP
angulardependency-injectionscope
Triet Nguyen
Triet Nguyen

Reputation: 821

Create singleton services in App Module but initialize components in Feature Modules

As I knew, a services is declared in a Module will be available in its children, and the service should be singleton (in my opinion if that service do not manage any states of particular module so it should be singleton).

To do so (singleton service) we often export static forRoot function in Feature Module to initialize app-wide service and that module will be imported in App Module.

Detailed question I would like to ask that a Feature Module has services which declared as singleton. But its component in array "declarations" just imports in others Feature Module which want to use. For example:

I have used library angular-tree-component (https://angular2-tree.readme.io/) which has TreeModule that expose static forRoot as the following:

var TreeModule = /** @class */ (function () {
    function TreeModule() {
    }
    TreeModule.forRoot = function () {
        return {
            ngModule: TreeModule,
            providers: [TreeDraggedElement]
        };
    };
    TreeModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [
                        TreeComponent,
                        TreeNodeComponent,
                        ...
                    ],
                    exports: [
                        TreeComponent,
                        TreeNodeComponent,
                        ...
                    ],
                    imports: [
                        CommonModule,
                        MobxAngularModule
                    ],
                    providers: []
                },] },
    ];
    return TreeModule;
}());

And in App Module will import TreeModule.forRoot() and all components (TreeComponent, TreeNodeComponent, ...) of TreeModule will available for application, but some of Modules don't need these components. So what do I have to now? Services are singleton but components just import for specific Modules.

Any help I will appreciate and thank you in advance.

UPDATE 1

In App Module imports TreeModule.forRoot() and FeatureModuleA also imports TreeModule, so components of TreeModule will be created two times. I consoled log I and that exactly what I thought. 

// App Module
@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...
    TreeModule.forRoot(),
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {}
}


// FeatureModuleA    
@NgModule({
  declarations: [
    FeatureComponent,
    ...
  ],
  imports: [
    ...
    TreeModule,
  ],
  providers: [
    ...
  ]
})
export class FeatureModuleA {
  constructor() {}
}

enter image description here

Upvotes: 0

Views: 1288

Answers (1)

Akshay Rana
Akshay Rana

Reputation: 1485

If the module you are using have a forChild method, that doesn't provide the services but exports all the components, directives etc, you can use that in feature modules, otherwise, you'll have to import it the same way you'll do in the Root module. It does not matter unless you are using Lazy loading, you'll still end up with singleton services.

Edit In your Tree Module source code, if you import TreeModule without forRoot, you get only the declarations, so you can just add "TreeModule" in feature modules, and TreeModule.forRoot() in Root Module as it provides all the services.

Update 1 Response: If you want to render components in multiple module, you'll have to import Components in all those modules, and whenever the component is rendered in view, it will be initialized, and hence you see 2 logs.

You can read more here : Importing HttpClientModule in feature modules

Upvotes: 1

Related Questions