[Enhancement] Lazy load components

src/app/app-routing.module.ts

@@ -1,142 +1,71 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { HomeComponent } from './components/home/home.component';
-import { AuthComponent } from './components/auth/auth.component';
-import { LoginComponent } from './components/auth/login/login.component';
-import { SignupComponent } from './components/auth/signup/signup.component';
-import { VerifyEmailComponent } from './components/auth/verify-email/verify-email.component';
-import { PubliclistsComponent } from './components/publiclists/publiclists.component';
-import { ChallengelistComponent } from './components/publiclists/challengelist/challengelist.component';
-import { TeamlistComponent } from './components/publiclists/teamlist/teamlist.component';
-import { ContactComponent } from './components/contact/contact.component';
-import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
-import { GetInvolvedComponent } from './components/get-involved/get-involved.component';
-import { AboutComponent } from './components/about/about.component';
-import { ChallengeComponent } from './components/challenge/challenge.component';
-import { ChallengesettingsComponent } from './components/challenge/challengesettings/challengesettings.component';
-import { ChallengeoverviewComponent} from './components/challenge/challengeoverview/challengeoverview.component';
-import { ChallengeevaluationComponent } from './components/challenge/challengeevaluation/challengeevaluation.component';
-import { ChallengephasesComponent} from './components/challenge/challengephases/challengephases.component';
-import { ChallengeparticipateComponent } from './components/challenge/challengeparticipate/challengeparticipate.component';
-import { ChallengeleaderboardComponent } from './components/challenge/challengeleaderboard/challengeleaderboard.component';
-import { ChallengesubmitComponent } from './components/challenge/challengesubmit/challengesubmit.component';
-import { ChallengesubmissionsComponent } from './components/challenge/challengesubmissions/challengesubmissions.component';
-import {
-  ChallengeviewallsubmissionsComponent
-} from './components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component';
-import { ChallengeCreateComponent } from './components/challenge-create/challenge-create.component';
-import { DashboardComponent } from './components/dashboard/dashboard.component';
-import { ProfileComponent } from './components/profile/profile.component';
-import { OurTeamComponent } from './components/our-team/our-team.component';
+import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
 import { NotFoundComponent } from './components/not-found/not-found.component';
-import {AnalyticsComponent} from './components/analytics/analytics.component';
-import {HostAnalyticsComponent} from './components/analytics/host-analytics/host-analytics.component';
-import {ResetPasswordComponent} from './components/auth/reset-password/reset-password.component';
-import {ResetPasswordConfirmComponent} from './components/auth/reset-password-confirm/reset-password-confirm.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule),
     data: {
       'title': 'EvalAI - Welcome'
     }
   },
   {
     path: 'about',
-    component: AboutComponent
+    loadChildren: () => import('./components/about/about.module').then(m => m.AboutModule),
   },
   {
     path: 'auth',
-    component: AuthComponent,
-    children: [
-      {path: '', redirectTo: 'login', pathMatch: 'full'},
-      {path: 'login', component: LoginComponent},
-      {path: 'reset-password', component: ResetPasswordComponent},
-      {path: 'reset-password/confirm/:user_id/:reset_token', component: ResetPasswordConfirmComponent},
-      {path: 'signup', component: SignupComponent},
-      {path: 'verify-email/:token', component: VerifyEmailComponent},
-      {path: '**', redirectTo: 'login'}
-    ]
+    loadChildren: () => import('./components/auth/auth.module').then(m => m.AuthModule)
   },
   {
     path: 'challenge',
     redirectTo: 'challenges'
   },
   {
     path: 'challenge/:id',
-    component: ChallengeComponent,
-    children: [
-      {path: '', redirectTo: 'overview', pathMatch: 'full'},
-      {path: 'overview', component: ChallengeoverviewComponent},
-      {path: 'evaluation', component: ChallengeevaluationComponent},
-      {path: 'phases', component: ChallengephasesComponent},
-      {path: 'participate', component: ChallengeparticipateComponent},
-      {path: 'submit', component: ChallengesubmitComponent},
-      {path: 'my-submissions', component: ChallengesubmissionsComponent},
-      {path: 'my-submissions/:phase', component: ChallengesubmissionsComponent},
-      {path: 'mysubmissions/:phase/:submission', component: ChallengesubmissionsComponent},
-      {path: 'view-all-submissions', component: ChallengeviewallsubmissionsComponent},
-      {path: 'leaderboard', component: ChallengeleaderboardComponent},
-      {path: 'leaderboard/:split', component: ChallengeleaderboardComponent},
-      {path: 'leaderboard/:split/:entry', component: ChallengeleaderboardComponent},
-      {path: 'settings', component: ChallengesettingsComponent}
-    ]
+    loadChildren: () => import('./components/challenge/challenge.module').then(m => m.ChallengeModule)
   },
   {
     path: 'challenges',
-    component: PubliclistsComponent,
-    children: [
-      {path: '', redirectTo: 'all', pathMatch: 'full'},
-      {path: 'all', component: ChallengelistComponent},
-      {path: 'me', component: ChallengelistComponent}
-    ]
+    loadChildren: () => import('./components/publiclists/publiclists.module').then(m => m.PubliclistsModule)
   },
   {
     path: 'challenge-create',
-    component: ChallengeCreateComponent
+    loadChildren: () => import('./components/challenge-create/challenge-create.module').then(m => m.ChallengeCreateModule)
   },
   {
     path: 'contact',
-    component: ContactComponent
+    loadChildren: () => import('./components/contact/contact.module').then(m => m.ContactModule)
   },
   {
     path: 'dashboard',
-    component: DashboardComponent,
+    loadChildren: () => import('./components/dashboard/dashboard.module').then(m => m.DashboardModule)
   },
   {
     path: 'analytics',
-    component: AnalyticsComponent,
-    children: [
-      {path: '', redirectTo: 'host-analytics', pathMatch: 'full'},
-      {path: 'host-analytics', component: HostAnalyticsComponent}
-    ]
+    loadChildren: () => import('./components/analytics/analytics.module').then(m => m.AnalyticsModule)
   },
   {
     path: 'get-involved',
-    component: GetInvolvedComponent
+    loadChildren: () => import('./components/get-involved/get-involved.module').then(m => m.GetInvolvedModule)
   },
   {
     path: 'our-team',
-    component: OurTeamComponent
+    loadChildren: () => import('./components/our-team/our-team.module').then(m => m.OurTeamModule)
   },
   {
     path: 'privacy-policy',
-    component: PrivacyPolicyComponent
+    loadChildren: () => import('./components/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyModule)
   },
   {
     path: 'profile',
-    component: ProfileComponent
+    loadChildren: () => import('./components/profile/profile.module').then(m => m.ProfileModule)
   },
   {
     path: 'teams',
-    component: PubliclistsComponent,
-    children: [
-      {path: '', redirectTo: 'participants', pathMatch: 'full'},
-      {path: 'participants', component: TeamlistComponent},
-      {path: 'hosts', component: TeamlistComponent}
-    ]
+    loadChildren: () => import('./components/publiclists/publiclists.module').then(m => m.TeamlistsModule)
   },
   {
     path: '404',
@@ -150,7 +79,14 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
+  imports: [
+    RouterModule.forRoot(
+      routes,
+      {
+        preloadingStrategy: PreloadAllModules
+      }
+    )
+  ],
   exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -2,15 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { EmailValidator, FormsModule } from '@angular/forms';
-import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
-import { TextareaAutosizeModule } from 'ngx-textarea-autosize';
-import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
-import { MatSelectModule } from '@angular/material/select';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCheckboxModule } from '@angular/material';
+import { EmailValidator } from '@angular/forms';
 
 // Import serivces
 import { AuthService } from './services/auth.service';
@@ -23,150 +15,35 @@ import { EndpointsService } from './services/endpoints.service';
 
 // Import Components
 import { AppComponent } from './app.component';
-import { HomeComponent } from './components/home/home.component';
 import { AppRoutingModule } from './app-routing.module';
-import { HeaderStaticComponent } from './components/nav/header-static/header-static.component';
-import { ContactComponent } from './components/contact/contact.component';
-import { FooterComponent } from './components/nav/footer/footer.component';
-import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
-import { InputComponent } from './components/utility/input/input.component';
-import { AuthComponent } from './components/auth/auth.component';
-import { LoginComponent } from './components/auth/login/login.component';
-import { SignupComponent } from './components/auth/signup/signup.component';
-import { ToastComponent } from './components/utility/toast/toast.component';
-import { GetInvolvedComponent } from './components/get-involved/get-involved.component';
-import { AboutComponent } from './components/about/about.component';
-import { CardlistComponent } from './components/utility/cardlist/cardlist.component';
-import { ChallengecardComponent } from './components/publiclists/challengelist/challengecard/challengecard.component';
-import { ChallengelistComponent } from './components/publiclists/challengelist/challengelist.component';
-import { TeamcardComponent } from './components/publiclists/teamlist/teamcard/teamcard.component';
-import { TeamlistComponent } from './components/publiclists/teamlist/teamlist.component';
-import { PubliclistsComponent } from './components/publiclists/publiclists.component';
-import { ForceloginComponent } from './components/utility/forcelogin/forcelogin.component';
-import { ChallengeComponent } from './components/challenge/challenge.component';
-import { ChallengeoverviewComponent } from './components/challenge/challengeoverview/challengeoverview.component';
-import { ChallengeevaluationComponent } from './components/challenge/challengeevaluation/challengeevaluation.component';
-import { ChallengephasesComponent } from './components/challenge/challengephases/challengephases.component';
-import { ChallengeparticipateComponent } from './components/challenge/challengeparticipate/challengeparticipate.component';
-import { ChallengeleaderboardComponent } from './components/challenge/challengeleaderboard/challengeleaderboard.component';
-import { ChallengesubmitComponent } from './components/challenge/challengesubmit/challengesubmit.component';
-import { ChallengesubmissionsComponent } from './components/challenge/challengesubmissions/challengesubmissions.component';
-import { PhasecardComponent } from './components/challenge/challengephases/phasecard/phasecard.component';
-import { ConfirmComponent } from './components/utility/confirm/confirm.component';
-import { LoadingComponent } from './components/utility/loading/loading.component';
-import { SelectphaseComponent } from './components/utility/selectphase/selectphase.component';
-import { HomemainComponent } from './components/home/homemain/homemain.component';
-import { ChallengeCreateComponent } from './components/challenge-create/challenge-create.component';
-import { VerifyEmailComponent } from './components/auth/verify-email/verify-email.component';
-import { ModalComponent } from './components/utility/modal/modal.component';
-import { DashboardComponent } from './components/dashboard/dashboard.component';
-import { ProfileComponent } from './components/profile/profile.component';
-import { NotFoundComponent } from './components/not-found/not-found.component';
-import { OurTeamComponent } from './components/our-team/our-team.component';
-import { TwitterFeedComponent } from './components/home/twitter-feed/twitter-feed.component';
-import { NgxTwitterTimelineModule } from 'ngx-twitter-timeline';
-import { PartnersComponent } from './components/home/partners/partners.component';
-import { RulesComponent } from './components/home/rules/rules.component';
-import { TestimonialsComponent } from './components/home/testimonials/testimonials.component';
-import { FeaturedChallengesComponent } from './components/home/featured-challenges/featured-challenges.component';
-import { ChallengesettingsComponent } from './components/challenge/challengesettings/challengesettings.component';
-import { AnalyticsComponent } from './components/analytics/analytics.component';
-import { HostAnalyticsComponent } from './components/analytics/host-analytics/host-analytics.component';
-import { EditphasemodalComponent } from './components/challenge/challengephases/editphasemodal/editphasemodal.component';
 import {
   TermsAndConditionsModalComponent
 } from './components/challenge/challengeparticipate/terms-and-conditions-modal/terms-and-conditions-modal.component';
-import {
-  ChallengeviewallsubmissionsComponent
-} from './components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component';
-import { SideBarComponent } from './components/utility/side-bar/side-bar.component';
+import { EditphasemodalComponent } from './components/challenge/challengephases/editphasemodal/editphasemodal.component';
+import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
+import { ModalComponent } from './components/utility/modal/modal.component';
+import { ToastComponent } from './/components/utility/toast/toast.component';
 
 import { MatTableModule } from '@angular/material/table';
 import { MatDividerModule } from '@angular/material/divider';
-import { DashboardContentComponent } from './components/dashboard/dashboard-content/dashboard-content.component';
-import {PasswordMismatchValidatorDirective} from './Directives/password.validator';
-import { ResetPasswordComponent } from './components/auth/reset-password/reset-password.component';
-import { EmailValidatorDirective } from './Directives/email.validator';
-import { ResetPasswordConfirmComponent } from './components/auth/reset-password-confirm/reset-password-confirm.component';
+import { SharedModule } from './shared.module';
+
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent,
-    HeaderStaticComponent,
-    FooterComponent,
-    PrivacyPolicyComponent,
-    InputComponent,
-    AuthComponent,
-    LoginComponent,
-    SignupComponent,
-    ContactComponent,
-    ToastComponent,
-    GetInvolvedComponent,
-    AboutComponent,
-    CardlistComponent,
-    ChallengecardComponent,
-    ChallengelistComponent,
-    TeamcardComponent,
-    TeamlistComponent,
-    PubliclistsComponent,
-    ForceloginComponent,
-    ChallengeComponent,
-    ChallengeoverviewComponent,
-    ChallengeevaluationComponent,
-    ChallengephasesComponent,
-    ChallengeparticipateComponent,
-    ChallengeleaderboardComponent,
-    ChallengesubmitComponent,
-    ChallengesubmissionsComponent,
-    PhasecardComponent,
-    ConfirmComponent,
-    LoadingComponent,
-    SelectphaseComponent,
-    HomemainComponent,
-    ChallengeCreateComponent,
-    VerifyEmailComponent,
-    ModalComponent,
-    DashboardComponent,
-    ProfileComponent,
-    NotFoundComponent,
-    OurTeamComponent,
-    TwitterFeedComponent,
-    PartnersComponent,
-    RulesComponent,
-    TestimonialsComponent,
-    ChallengesettingsComponent,
-    SideBarComponent,
-    AnalyticsComponent,
-    FeaturedChallengesComponent,
-    DashboardContentComponent,
-    HostAnalyticsComponent,
-    PasswordMismatchValidatorDirective,
-    EmailValidatorDirective,
-    ResetPasswordComponent,
     EditphasemodalComponent,
-    ResetPasswordConfirmComponent,
-    ChallengeviewallsubmissionsComponent,
+    ModalComponent,
+    ToastComponent,
     TermsAndConditionsModalComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
+    SharedModule,
     HttpClientModule,
-    FormsModule,
-    NgxTwitterTimelineModule,
     FroalaEditorModule.forRoot(),
     FroalaViewModule.forRoot(),
-    TextareaAutosizeModule,
-    OwlDateTimeModule,
-    OwlNativeDateTimeModule,
-    MatSelectModule,
-    MatChipsModule,
-    MatMenuModule,
-    MatIconModule,
-    MatTableModule,
-    MatDividerModule,
-    MatCheckboxModule
   ],
   providers: [
     AuthService,

src/app/components/about/about-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AboutComponent } from './about.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AboutComponent
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AboutRoutingModule { }

src/app/components/about/about.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AboutComponent } from './about.component';
+import { AboutRoutingModule } from './about-routing.module';
+import { SharedModule } from '../../shared.module';
+
+@NgModule({
+  declarations: [
+    AboutComponent
+  ],
+  imports: [
+    CommonModule,
+    AboutRoutingModule,
+    SharedModule,
+  ],
+  exports: [
+    AboutComponent
+  ]
+})
+export class AboutModule { }