Angular2 Verwalten Sie eine große Anzahl von Komponenten

Question

Ich arbeite an Angular2. Wie wir wissen, müssen wir alle providers, components, services im Hauptmodul konfigurieren. Es kann der Fall sein, dass wir eine große Anzahl von components haben und es manuell konfigurieren. Betrachten wir zum Beispiel die folgende 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] 
    }) 

Ich brauche das gleiche in routes und etwas cubersome Was ist der richtige Weg zu konfigurieren, dass diese große Anzahl von Komponenten ohne viel Kopie-Einfügen konfigurieren?

Außerdem glaube ich, dass es mehrere Module geben sollte. Was ist dein Vorschlag oder der richtige Weg?

Answer 1

Für den Service erstellen Sie eine separate Datei shared.ts und importieren Sie alle Dienste & exportieren. So für jede Datei erstellen Sie eine .ts-Datei wie diese Zum Beispiel den folgenden 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 

    }