updated all components to lazy loaded

src/app/app.module.ts

@@ -1,29 +1,20 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
 import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
-import { RouterModule } from '@angular/router';
-
-import { RXJS_DOC_ROUTES } from './app.routing';
+import { RouterModule, PreloadAllModules } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { OperatorsComponent } from './operators/operators.component';
-import { CompaniesComponent } from './companies/companies.component';
-import { TeamComponent } from './team/team.component';
-import { RxjsComponent } from './rxjs/rxjs.component';
+import { RXJS_DOC_ROUTES } from './app.routing';
 
 @NgModule({
   declarations: [
     AppComponent,
-    OperatorsComponent,
-    CompaniesComponent,
-    TeamComponent,
-    RxjsComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    RouterModule.forRoot(RXJS_DOC_ROUTES),
+    RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }),
     MatToolbarModule,
     MatSidenavModule,
     MatIconModule,

src/app/app.routing.ts

@@ -7,9 +7,9 @@ import { RxjsComponent } from './rxjs/rxjs.component';
 import { TeamComponent } from './team/team.component';
 
 export const RXJS_DOC_ROUTES: Routes = [
-  { path: '', component: RxjsComponent },
-  { path: 'operators', component: OperatorsComponent },
-  { path: 'team', component: TeamComponent },
-  { path: 'companies', component: CompaniesComponent },
+  { path: '', loadChildren: './rxjs/rxjs.module#RxjsModule' },
+  { path: 'operators', loadChildren: './operators/operators.module#OperatorsModule' },
+  { path: 'team', loadChildren: './team/team.module#TeamModule' },
+  { path: 'companies', loadChildren: './companies/companies.module#CompaniesModule' },
   { path: '**', redirectTo: '' }
 ];

src/app/companies/companies.component.ts

@@ -11,5 +11,5 @@ export class CompaniesComponent implements OnInit {
 
   ngOnInit() {
   }
-
 }
+

src/app/companies/companies.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { CompaniesComponent } from './companies.component';
+import { routing } from './companies.routing';
+
+@NgModule({
+    imports: [routing],
+    declarations: [CompaniesComponent]
+})
+export class CompaniesModule { }

src/app/companies/companies.routing.ts

@@ -0,0 +1,10 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CompaniesComponent } from './companies.component';
+
+const routes: Routes = [
+    { path: '', component: CompaniesComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);

src/app/operators/operators.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { OperatorsComponent } from './operators.component';
+import { routing } from './operators.routing';
+
+@NgModule({
+    imports: [routing],
+    declarations: [OperatorsComponent]
+})
+export class OperatorsModule { }

src/app/operators/operators.routing.ts

@@ -0,0 +1,10 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { OperatorsComponent } from './operators.component';
+
+const routes: Routes = [
+    { path: '', component: OperatorsComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);

src/app/rxjs/rxjs.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { RxjsComponent } from './rxjs.component';
+import { routing } from './rxjs.routing';
+
+@NgModule({
+    imports: [routing],
+    declarations: [RxjsComponent]
+})
+export class RxjsModule { }

src/app/rxjs/rxjs.routing.ts

@@ -0,0 +1,10 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { RxjsComponent } from './rxjs.component';
+
+const routes: Routes = [
+    { path: '', component: RxjsComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);

src/app/team/team.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { TeamComponent } from './team.component';
+import { routing } from './team.routing';
+
+@NgModule({
+    imports: [routing],
+    declarations: [TeamComponent]
+})
+export class TeamModule { }

src/app/team/team.routing.ts

@@ -0,0 +1,10 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TeamComponent } from './team.component';
+
+const routes: Routes = [
+    { path: '', component: TeamComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);

src/styles.scss

@@ -1,17 +1,16 @@
 @import "~@angular/material/theming";
 @include mat-core();
-
 // Define the theme.
 $primary: mat-palette($mat-indigo);
-$accent:  mat-palette($mat-pink);
+$accent : mat-palette($mat-pink);
 $theme: mat-light-theme($primary, $accent);
 @include angular-material-theme($theme);
-
 body {
   font-family: Roboto, sans-serif;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   width: 100%;
   height: 100%;