title: My angular 2 app takes a long time to load for first time users, I need help to speed it up
body: <p>Below I have pasted in my app.ts file.</p>
  
  <p>I'm using angular2, with firebase and typescript.</p>
  
  <p>Is the reason its slow because I have a lot of routes and I'm injecting a lot of files?</p>
  
  <p>Also, my app works fine its just for first time users visiting the homepage I have this issue for.</p>
  
  <p>I'm not sure if the bootstrap can be improved at the bottom or if I'm doing anything wrong.</p>
  
  <p><strong>This is my app.ts file:</strong></p>
  
  <pre><code>import {Component, bind, provide, Injectable} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser'
  import {NgIf} from 'angular2/common';
  import {Router, Location, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF, CanActivate, OnActivate,
      ComponentInstruction} from 'angular2/router';
  import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
  import {ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
  import {enableProdMode} from 'angular2/core';
  enableProdMode();
  
  import {LoggedInRouterOutlet} from './interceptor';
  
  import {AuthService} from './services/authService/authService';
  import {SocialService} from './services/socialService/socialService';
  import {UserService} from './services/userService/userService';
  import {OrganisationService} from './services/organisationService/organisationService';
  import {NotificationService} from './services/notificationService/notificationService';
  import {EmailService} from './services/emailService/emailService';
  
  import {UserProfile} from './models/profile/profile';
  import {Organisation} from './models/organisation/organisation';
  
  import {HeaderNavigation} from './components/header/header';
  import {HeaderNavigationLoggedIn} from './components/header/headerNavigationLoggedIn';
  import {HeaderNavigationLoggedInCompany} from './components/header/headerNavigationLoggedInCompany';
  import {Footer} from './components/footer/footer';
  import {SideMenuCompany} from './components/header/sideMenuCompany';
  import {SideMenuUser} from './components/header/sideMenuUser';
  import {Splash} from './components/splash/splash';
  
  import {CreateJob} from './components/createJob/createJob';
  import {SearchJobs} from './components/searchJobs/searchJobs';
  import {Login} from './components/login/login';
  import {Applications} from './components/applications/applications';
  import {Register} from './components/register/register';
  import {ForgotPassword} from './components/forgotpassword/forgotpassword';
  import {ChangePassword} from './components/changepassword/changepassword';
  import {ChangeEmail} from './components/changeemail/changeemail';
  import {SocialRegister} from './components/socialregister/socialregister';
  import {Admin} from './components/admin/admin';
  import {Contact} from './components/contact/contact';
  import {SearchUsers} from './components/searchusers/searchusers';
  
  import {Jobs} from './components/job/jobs';
  import {CompanyProfile} from './components/company/company';
  import {Home} from './components/home/home';
  import {Dashboard} from './components/dashboard/dashboard';
  import {Profile} from './components/profile/profile';
  import {UserApplications} from './components/userApplications/userApplications';
  
  @Component({
      selector: 'app',
      providers: [UserService, UserProfile, OrganisationService, Organisation],
      template: `
  
          &lt;Splash *ngIf="isLoggedIn"&gt;&lt;/Splash&gt;    
  
          &lt;HeaderNavigation *ngIf="!isLoggedIn"&gt;&lt;/HeaderNavigation&gt;       
  
          &lt;HeaderNavigationLoggedIn *ngIf="isLoggedIn &amp;&amp; isUserLogin"&gt;&lt;/HeaderNavigationLoggedIn&gt;
          &lt;HeaderNavigationLoggedInCompany *ngIf="isLoggedIn &amp;&amp; isCompanyLogin"&gt;&lt;/HeaderNavigationLoggedInCompany&gt;
  
          &lt;SideMenuCompany *ngIf="isLoggedIn &amp;&amp; isCompanyLogin"&gt;&lt;/SideMenuCompany&gt;
          &lt;SideMenuUser *ngIf="isLoggedIn &amp;&amp; isUserLogin"&gt;&lt;/SideMenuUser&gt;
  
          &lt;div class="content"&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt; 
          &lt;/div&gt;     
      `,
      directives: [RouterOutlet, RouterLink, Splash, HeaderNavigation, HeaderNavigationLoggedIn, NgIf, HeaderNavigationLoggedInCompany, SideMenuCompany, SideMenuUser, Footer, LoggedInRouterOutlet]
  })
  
  @RouteConfig([
      { path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},
      { path: '/home', component: Home, as: 'Home', useAsDefault: true},
      { path: '/login', component: Login, as: 'Login' },  
      { path: '/register/:id', component: Register, as: 'Register' },
      { path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
      { path: '/dashboard', component: Dashboard, as: 'Dashboard' },
      { path: '/search', component: SearchJobs, as: 'Search' },   
      { path: '/profile', component: Profile, as: 'Profile' },
      { path: '/settings', component: CompanyProfile, as: 'Settings' },
      { path: '/jobs', component: Jobs, as: 'Jobs' },
      { path: '/password', component: ChangePassword, as: 'Password' },
      { path: '/email', component: ChangeEmail, as: 'Email' },
      { path: '/applications', component: Applications, as: 'Applications' },
      { path: '/socialRegister/:id', component: SocialRegister, as: 'SocialRegister' },
      { path: '/socialRegister', component: SocialRegister, as: 'SocialRegister' },
      { path: '/applys', component: UserApplications, as: 'Applys' },
      { path: '/contact', component: Contact, as: 'Contact' },
      { path: '/searchTeachers', component: SearchUsers, as: 'SearchUsers' },
      { path: '/createJob', component: CreateJob, as: 'CreateJob' },
      { path: '/adminmarkchris2016', component: Admin, as: 'AdminMarkChris2016' },
  
      { path:'/**', redirectTo: ['Home']}
  ])
  
  @Injectable()
  
  export class AppComponent {
      router: Router;
      location: Location;
      authService: AuthService;
      userService: UserService
      isLoggedIn: boolean = false;
      isCompanyLogin: boolean = false;
      isUserLogin: boolean = false;
      userProfile: UserProfile;   
  
      constructor(_router: Router, _location: Location, _authService: AuthService, _userService: UserService, _userProfile: UserProfile){ 
          this.router = _router;
          this.location = _location;
          this.authService = _authService;
          this.userService = _userService;
          this.userProfile = _userProfile;
  
          this.isUserLoggedIn(this.location.path());
  
          //On refresh
          this.router.subscribe((currentRoute) =&gt; {
              this.isUserLoggedIn(currentRoute);
          })  
      }
  
      isUserLoggedIn(currentRoute): void{ 
          this.authService.checkIfLoggedIn().then((response) =&gt; { 
              this.isLoggedIn = response
  
              if(this.isLoggedIn){
                  this.isUserOrganisationOrTeacher();                 
              }   
  
              if(currentRoute.substring(0, 14) == "socialRegister" || currentRoute == "socialRegister" || currentRoute == "home" || currentRoute == "contact" || currentRoute == "" || currentRoute == "forgotpassword" || currentRoute == "login" || currentRoute.substring(0, 8) == "register"){
                  this.isCompanyLogin = false;
                  this.isUserLogin = false;
                  this.isLoggedIn = false;
              }           
          });  
      }
  
      isUserOrganisationOrTeacher(): void{
          this.userService.checkIfProfileExists().then((response) =&gt; {
              this.isCompanyLogin = false;
              this.isUserLogin = false;       
  
              if(response){
                  this.isUserLogin = true;
                  this.isCompanyLogin = false;
              }else{
                  this.isCompanyLogin = true; 
                  this.isUserLogin = false;                   
              }
          }); 
      }       
  }
  
  bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS, AuthService, SocialService, UserService, EmailService, OrganisationService, NotificationService, ANGULAR2_GOOGLE_MAPS_PROVIDERS]);
  </code></pre>