title: How to create submodule with Angular
body: <p>I am creating an app in angular 2 with CLI , my app module is going too long so now i want to create submodules</p>
  <p><strong>My submodule is</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { NgModule } from '@angular/core';
      import { Routes, RouterModule } from '@angular/router';
      import { CommonModule } from '@angular/common';
      import { ProjectComponent } from './project.component';
      import { ProjectListingComponent } from './project-listing/project-listing.component';
      import { ProjectCreateUpdateComponent } from './project-create-update/project-create-update.component';
      
      
      // routing set for project module 
      
      const routes: Routes = [
          {path:'project/add' , component:ProjectCreateUpdateComponent},
          {path:'project/:id/edit' , component:ProjectCreateUpdateComponent},
          {path:'project-listing' ,component:ProjectListingComponent},
      ];
      
      @NgModule({
        imports: [RouterModule.forChild(routes)],
        exports: [RouterModule],
        providers: []
      })
      export class ProjectRoutingModule { }
      
      
      // Main module for project 
      @NgModule({
        imports: [
          CommonModule,
          ProjectRoutingModule
        ],
        declarations: [ProjectComponent, ProjectListingComponent, ProjectCreateUpdateComponent ]
      })
      export class ProjectModule { }
  </code></pre>
  <p><strong>&gt; Main module is</strong></p>
  <pre><code>    import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { DatePipe } from '@angular/common';
      //import { ViewContainerRef} from '@angular/core';
      import { FormsModule } from '@angular/forms';
      import { HttpModule } from '@angular/http';
      import { routing } from './app.routing';
      import { ReactiveFormsModule } from '@angular/forms';
  
      import { MaterialModule } from '@angular/material';
  
      //custom modules 
      import {ProjectModule} from './project_module/project.module';   
  
      import { HomeComponent } from './home/home.component';  
      ...
      @NgModule({
        declarations: [
          AppComponent,
          GradeComponent,
          GradeListingComponent,
          HomeComponent,
          GradeComponent,
          ...
  
        ],
        imports: [
          BrowserModule,
          FormsModule,
          HttpModule,
          routing,       
          MaterialModule.forRoot(),
          ReactiveFormsModule,        
          ProjectModule   
      
        ],
        providers: [
          NotificationsService,
          DatePipe,
          GradeService,
          ...        
          ],
          exports: [
              ConfirmDialogComponent,
          ],
        entryComponents: [
          logsShow
        ],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
  </code></pre>
  <blockquote>
  <p>But issue is coming my submodule can not access material module value
  and other module/plugins i have use in app.module ..</p>
  <p>What is the way to get this .. facing also issue on routing</p>
  </blockquote>