Angular2 Manage large number of components

Question

I am working on Angular2. As we know we need to configure all providers, components, services in the main module. It may be the case where we have a large number of components and manually configuring it. For instance, consider the following module

 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { GoogleSigninComponent } from ./auth/google.login.component';
 import { ApiEndpoints } from './api.endpoints';
 // Providers
 import { AuthService } from './auth/auth.service';
 import { AppRoutingModule } from './route';
 import { ExpenseComponent } from './expense/expense.component';
 import { ExpenseService } from './expense/expense.service';

 import { GroupService } from './group/group.service';
 import {GroupUserService} from './group/group-user.service';
 import {MainGroupComponent, SaveGroupComponent, GroupListComponent } from './group/group.components';
 import {GroupUsersComponent,AddGroupUserComponent} from './group/group-  user.component';
 import {HelperService } from './helper.service';
 import {SearchUserComponent} from './user/users.component';
 import {UserService} from './user/users.service';


@NgModule({
  imports: [BrowserModule, HttpModule, BrowserModule, AppRoutingModule, FormsModule],
  declarations: [AppComponent, GoogleSigninComponent,
  ExpenseComponent, SaveGroupComponent, GroupListComponent, GroupUsersComponent,
MainGroupComponent,AddGroupUserComponent,SearchUserComponent],
 bootstrap: [AppComponent],
 providers: [AuthService, ApiEndpoints, ExpenseService,
 GroupService,GroupUserService,HelperService,UserService]
  })

I need to configure the same in routes and somewhat cubersome What will be the right way to configure this large number of components without much copy-pasting?

Also, I believe there should be multiple modules. What's your suggestion or the right way to do it?

None. You have only two options - 1. Live with it or 2. Make them as independent as possible and put them in child Modules. Remember you can have routes as well in child module so you may want to create a commonsmodule which will have just reusable components and one child module called as expensemodule with its own components and routes and then do an import of them. — Gary, Mar 23 '17 at 09:38

score 0 · Answer 1 · answered Mar 23 '17 at 09:40

For service create a separate shared.ts file and import & export all the services. So for each and every file create a .ts file like this For example see the below code

import { GroupService } from './group/group.service';
import {GroupUserService} from './group/group-user.service';

const SHARED_PROVIDERS: any[] = [
  GroupService ,
  GroupUserService
];

    export{
    Shared_Providers,
    GroupService ,
    GroupUserService

    }

Angular2 Manage large number of components

1 Answers1