updated all components to lazy loaded

Author: Only1MrAnderson

src/app/app.component.html

@@ -1,24 +1,22 @@
 <div class="app-fullpage">
-  <md-toolbar color="accent" class="mat-elevation-z6">
+  <mat-toolbar color="accent" class="mat-elevation-z6">
     <button md-icon-button (click)="sidenav.toggle()">
-    <md-icon>
+    <mat-icon>
       menu
-    </md-icon>
+    </mat-icon>
   </button>
     <span class="title"> RxJS Docs </span>
-  </md-toolbar>
-  <md-sidenav-container>
-    <md-sidenav #sidenav>
-      <md-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" md-list-item routerLinkActive="active"
-          [routerLinkActiveOptions]="menu.options"
-          [routerLink]="menu.link">
+  </mat-toolbar>
+  <mat-sidenav-container>
+    <mat-sidenav #sidenav>
+      <mat-nav-list (click)="sidenav.toggle()">
+        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
          {{menu.title}} 
         </a>
-      </md-nav-list>
-    </md-sidenav>
+      </mat-nav-list>
+    </mat-sidenav>
     <div class="body-margin">
       <router-outlet></router-outlet>
     </div>
-  </md-sidenav-container>
-</div>
+  </mat-sidenav-container>
+</div>

src/app/app.module.ts

@@ -1,34 +1,26 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule, MdListModule } from '@angular/material';
+import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
 import { RXJS_DOC_ROUTES } from './app.routing';
 
 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';
 
 @NgModule({
   declarations: [
     AppComponent,
-    OperatorsComponent,
-    CompaniesComponent,
-    TeamComponent,
-    RxjsComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     RouterModule.forRoot(RXJS_DOC_ROUTES),
-    MdToolbarModule,
-    MdSidenavModule,
-    MdIconModule,
-    MdButtonModule,
-    MdListModule
+    MatToolbarModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatButtonModule,
+    MatListModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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.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 { }