title: Angular Module with Multiple Component Gets Slow in loading
body: <p>I have found a scenario which delays initiating my module in Angular 2.
  I am not an experienced guy in Angular. This is my first project. So, didn't know how to deal with this scenario:</p>
  
  <p>I have created a small application in which there are various modules. Each module has 2-3 subcomponents. But my SignUp Module and MyAccount Module is the mixture of various components. </p>
  
  <p>Below is the hierarchy of my application. </p>
  
  <blockquote>
    <p>app<br>
    --Front-end<br>
    ----videos<br>
    ------Detail<br>
    --------videodetail.component.html<br>
    --------videodetail.component.ts<br>
    ------List<br>
    --------list.component.html<br>
    --------list.component.ts<br>
    ------videos.component.html<br>
    ------videos.component.ts<br>
    ------videos.routing.ts<br>
    ------videos.module.ts<br>
    ----article<br>
    ------article.component.html<br>
    ------article.component.ts<br>
    ----front-end.routing.ts<br>
    ----front-end.module.ts<br>
    ----front-end.component.ts<br>
    ----front-end.component.html<br>
    --signup<br>
    ----stepone<br>
    ------stepone.component.html<br>
    ------stepone.component.ts<br>
    ----steptwo<br>
    ------steptwo.component.html<br>
    ------steptwo.component.ts<br>
    ----stepthree<br>
    ------stepthree.component.html<br>
    ------stepthree.component.ts<br>
    ----stepfour<br>
    ------stepfour.component.html<br>
    ------stepfour.component.ts<br>
    ----final<br>
    ------final.component.html<br>
    ------final.component.ts<br>
    ----OneMore<br>
    ------onemore.component.html<br>
    ------onemore.component.ts<br>
    ----signup.module.ts<br>
    ----signup.component.ts<br>
    ----signup.routing.ts<br>
    ----signup.component.html   app.module.ts    app.component.ts   app.component.html   app.routing.ts</p>
  </blockquote>
  
  <p>Below is the <code>signup-routing.module.ts</code> routing code for children.</p>
  
  <pre><code>const routes: Routes = [
      { path: '', component: SignupComponent },
      { path: 'terms', component: TermsComponent },
      { path: 'first', component: StepOneComponent },
      { path: 'second', component: SteptwoComponent },
      { path: 'third', component: StepthreeComponent },
      { path: 'third/:status', component: StepthreeComponent },
      { path: 'third/:status/:type', component: StepthreeComponent },
      { path: 'success', component: FinalComponent }
  </code></pre>
  
  <p>As requested, below is the constructor of <code>SingupComponent</code> and <code>BaseComponent</code>.</p>
  
  <pre><code>export class BaseComponent implements OnInit  {
      public SiteConfigurations: SiteConfigurations;
      public options: any
      constructor() {
          this.SiteConfigurations = new SiteConfigurations();
          var currentClass= this;
          window["SetDefaultImage"] = function(){}
          window["SetDefaultImage"]=function (event){
            currentClass.SetDefaultImageWithCurrentClass(event,currentClass);
          };
      }
  
      ngOnInit() {
        //  this.options = Baser
      }
  
      SetDefaultImageWithCurrentClass(event,currentClass) {
          event.target.src = currentClass.SiteConfigurations.EnvironmentConfigurations.siteURL+"assets/images/no-image.png";
      }
      SetDefaultImage(event) {
        this.SetDefaultImageWithCurrentClass(event,this);
      }
  }
  
  export class SignupComponent extends BaseComponent implements OnInit, OnDestroy {
  constructor(router: Router, accountService: AccountService) {
      super();
      this.accountService = accountService;
      this.router = router; }
  
      ngOnInit(): void {
          this.packageType = this.getStepData("packageType");
          this.stepone = this.getStepData("stepone");
          this.steptwo = this.getStepData("steptwo");
  
          this.options = this.accountService.notificationService.options;
          this.clear = true;
      }
  }
  </code></pre>
  
  <p>Below is my <code>app-routing.module.ts</code> code.</p>
  
  <pre><code>const routes: Routes = [
      {
          path: '', component: FrontEndComponent,
          children: [
          { path: 'home', loadChildren: './home/home.module#HomeModule' },
          { path: 'videos', loadChildren: './videos/videos.module#VideosModule' },
          { path: 'myaccount', loadChildren: './users/users.module#UsersModule', canActivate: [AuthGuard] },
          { path: 'signup', loadChildren: '../signup/signup.module#SignupModule' }]   
      } 
  ];
  </code></pre>
  
  <p>When I run my application and homepage gets loaded, when I click on SignUp for the first time it takes some time to execute the constructor of the signup.component.ts 
  The reason I found is in the signup module there are various subcomponents which get load when the signup module is called for the first time (i.e. when the chunk file is generated). The same problem is with the AccountModule where around 8 to 10 subcomponents are used to show data in the user account dashboard.</p>
  
  <p>It holds for some 2-3 seconds before the SignUp component's constructor and onInit method is called and then go to the server side to take data from the database.
  While other modules like videos, articles and rest other have only 2 and maximum 3 subcomponents and they are getting executed immediately.</p>