docs: lazy load components pages

site/package.json

@@ -58,6 +58,7 @@
     "@types/jasmine": "^2.8.7",
     "@types/node": "^10.0.8",
     "@types/selenium-webdriver": "^3.0.8",
+    "angular-router-loader": "^0.8.5",
     "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^8.4.1",
     "babel-core": "^6.26.3",

site/src/app/app.module.ts

@@ -1,60 +1,30 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { LocationStrategy, PathLocationStrategy } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { Angulartics2Module } from 'angulartics2';
 import { Angulartics2GoogleTagManager } from 'angulartics2/gtm';
-import { MaterialModule } from '@blox/material';
 import { AppComponent } from './app.component';
-import { OverviewComponent } from './overview.component';
 import { routing, appRoutingProviders } from './app.routes';
 import {
   IndexComponent,
   DocsComponent,
   GuidesComponent,
   GettingstartedComponent,
+  IE11Component,
 
   NotFoundComponent,
 
   CodeSampleComponent,
-  MDC_DIRECTIVE_DOC_COMPONENTS,
-
-  HighlightjsDirective, HighlightjsService,
-
-  SnippetButtonComponent,
-  SnippetCardComponent,
-  SnippetCheckboxComponent,
-  SnippetChipsComponent, SnippetChipsChoiceComponent, SnippetChipsFilterComponent, SnippetChipsInputComponent,
-  SnippetDialogComponent,
-  SnippetDrawerPermanentBelowComponent,
-  SnippetDrawerPermanentComponent,
-  SnippetDrawerSlidableComponent,
-  SnippetElevationComponent,
-  SnippetFabComponent,
-  SnippetFocusTrapComponent,
-  SnippetIconToggleComponent,
-  SnippetLinearProgressComponent,
-  SnippetListComponent, SnippetListTwolineComponent,
-  SnippetMenuComponent,
-  SnippetSnackbarComponent,
-  SnippetRadioComponent,
-  SnippetRippleComponent,
-  SnippetSelectComponent,
-  SnippetSliderComponent,
-  SnippetSwitchComponent,
-  SnippetTabSimpleComponent,
-  SnippetTabScrollerComponent,
-  SnippetTextFieldComponent, SnippetTextFieldIconComponent, SnippetTextFieldTextareaComponent,
-  SnippetToolbarComponent, SnippetToolbarFlexibleComponent, IE11Component } from './components';
-import { ThemeService } from './services';
+  HighlightjsDirective, HighlightjsService
+} from './components';
+import { SharedModule } from './shared.module';
 
 @NgModule({
   imports: [
     BrowserModule,
-    FormsModule,
-    MaterialModule,
     routing,
-    Angulartics2Module.forRoot([Angulartics2GoogleTagManager])
+    Angulartics2Module.forRoot([Angulartics2GoogleTagManager]),
+    SharedModule
   ],
   declarations: [
     AppComponent,
@@ -65,47 +35,11 @@ import { ThemeService } from './services';
     GettingstartedComponent,
     IE11Component,
 
-    OverviewComponent,
-
     NotFoundComponent,
-
-    CodeSampleComponent,
-
-    HighlightjsDirective,
-
-    ...MDC_DIRECTIVE_DOC_COMPONENTS,
-
-    SnippetButtonComponent,
-    SnippetCardComponent,
-    SnippetCheckboxComponent,
-    SnippetChipsComponent, SnippetChipsChoiceComponent, SnippetChipsFilterComponent, SnippetChipsInputComponent,
-    SnippetDialogComponent,
-    SnippetDrawerPermanentBelowComponent,
-    SnippetDrawerPermanentComponent,
-    SnippetDrawerSlidableComponent,
-    SnippetElevationComponent,
-    SnippetFabComponent,
-    SnippetFocusTrapComponent,
-    SnippetIconToggleComponent,
-    SnippetLinearProgressComponent,
-    SnippetListComponent, SnippetListTwolineComponent,
-    SnippetMenuComponent,
-    SnippetSnackbarComponent,
-    SnippetRadioComponent,
-    SnippetRippleComponent,
-    SnippetSelectComponent,
-    SnippetSliderComponent,
-    SnippetSwitchComponent,
-    SnippetTabSimpleComponent,
-    SnippetTabScrollerComponent,
-    SnippetTextFieldComponent, SnippetTextFieldIconComponent, SnippetTextFieldTextareaComponent,
-    SnippetToolbarComponent, SnippetToolbarFlexibleComponent
   ],
   providers: [
     appRoutingProviders,
-    {provide: LocationStrategy, useClass: PathLocationStrategy},
-    ThemeService,
-    HighlightjsService
+    {provide: LocationStrategy, useClass: PathLocationStrategy}
   ],
   bootstrap: [ AppComponent ]
 })

site/src/app/app.routes.ts

@@ -6,32 +6,8 @@ import {
     GuidesComponent,
     GettingstartedComponent,
     IE11Component,
-
-    NotFoundComponent,
-
-    ButtonDirectivesComponent,
-    CardDirectivesComponent,
-    CheckboxDirectivesComponent,
-    ChipsDirectivesComponent,
-    DialogDirectivesComponent,
-    DrawerDirectivesComponent,
-    ElevationDirectivesComponent,
-    FabDirectivesComponent,
-    FocusTrapDirectivesComponent,
-    IconToggleDirectivesComponent,
-    LinearProgressDirectivesComponent,
-    ListDirectivesComponent,
-    MenuDirectivesComponent,
-    RadioDirectivesComponent,
-    RippleDirectivesComponent,
-    SelectDirectivesComponent,
-    SliderDirectivesComponent,
-    SnackbarDirectivesComponent,
-    SwitchDirectivesComponent,
-    TabDirectivesComponent,
-    TextFieldDirectivesComponent,
-    ToolbarDirectivesComponent,
-    UtilityDirectivesComponent} from './components';
+    NotFoundComponent
+} from './components';
 
 export const routes: Routes = [
     {path: '', component: IndexComponent},
@@ -40,33 +16,7 @@ export const routes: Routes = [
         {path: 'gettingstarted', component: GettingstartedComponent},
         {path: 'ie11', component: IE11Component}
     ]},
-    {path: 'directives', redirectTo: 'components'},
-    {path: 'components', children: [
-        {path: '', pathMatch: 'full', component: OverviewComponent},
-        {path: ButtonDirectivesComponent.DOC_HREF, component: ButtonDirectivesComponent},
-        {path: CardDirectivesComponent.DOC_HREF, component: CardDirectivesComponent},
-        {path: CheckboxDirectivesComponent.DOC_HREF, component: CheckboxDirectivesComponent},
-        {path: ChipsDirectivesComponent.DOC_HREF, component: ChipsDirectivesComponent},
-        {path: DialogDirectivesComponent.DOC_HREF, component: DialogDirectivesComponent},
-        {path: DrawerDirectivesComponent.DOC_HREF, component: DrawerDirectivesComponent},
-        {path: ElevationDirectivesComponent.DOC_HREF, component: ElevationDirectivesComponent},
-        {path: FabDirectivesComponent.DOC_HREF, component: FabDirectivesComponent},
-        {path: FocusTrapDirectivesComponent.DOC_HREF, component: FocusTrapDirectivesComponent},
-        {path: IconToggleDirectivesComponent.DOC_HREF, component: IconToggleDirectivesComponent},
-        {path: LinearProgressDirectivesComponent.DOC_HREF, component: LinearProgressDirectivesComponent},
-        {path: ListDirectivesComponent.DOC_HREF, component: ListDirectivesComponent},
-        {path: MenuDirectivesComponent.DOC_HREF, component: MenuDirectivesComponent},
-        {path: RadioDirectivesComponent.DOC_HREF, component: RadioDirectivesComponent},
-        {path: RippleDirectivesComponent.DOC_HREF, component: RippleDirectivesComponent},
-        {path: SelectDirectivesComponent.DOC_HREF, component: SelectDirectivesComponent},
-        {path: SliderDirectivesComponent.DOC_HREF, component: SliderDirectivesComponent},
-        {path: SnackbarDirectivesComponent.DOC_HREF, component: SnackbarDirectivesComponent},
-        {path: SwitchDirectivesComponent.DOC_HREF, component: SwitchDirectivesComponent},
-        {path: TabDirectivesComponent.DOC_HREF, component: TabDirectivesComponent},
-        {path: TextFieldDirectivesComponent.DOC_HREF, component: TextFieldDirectivesComponent},
-        {path: ToolbarDirectivesComponent.DOC_HREF, component: ToolbarDirectivesComponent},
-        {path: UtilityDirectivesComponent.DOC_HREF, component: UtilityDirectivesComponent},
-    ]},
+    {path: 'components', loadChildren: './components.module#ComponentsModule' },
     {path: '**', component: NotFoundComponent}
 ];
 

site/src/app/components.module.ts

@@ -0,0 +1,75 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ComponentsRoutingModule } from './components.routing.module';
+import { SharedModule } from './shared.module';
+import { OverviewComponent } from './overview.component';
+import {
+  MDC_DIRECTIVE_DOC_COMPONENTS,
+
+  SnippetButtonComponent,
+  SnippetCardComponent,
+  SnippetCheckboxComponent,
+  SnippetChipsComponent, SnippetChipsChoiceComponent, SnippetChipsFilterComponent, SnippetChipsInputComponent,
+  SnippetDialogComponent,
+  SnippetDrawerPermanentBelowComponent,
+  SnippetDrawerPermanentComponent,
+  SnippetDrawerSlidableComponent,
+  SnippetElevationComponent,
+  SnippetFabComponent,
+  SnippetFocusTrapComponent,
+  SnippetIconToggleComponent,
+  SnippetLinearProgressComponent,
+  SnippetListComponent, SnippetListTwolineComponent,
+  SnippetMenuComponent,
+  SnippetSnackbarComponent,
+  SnippetRadioComponent,
+  SnippetRippleComponent,
+  SnippetSelectComponent,
+  SnippetSliderComponent,
+  SnippetSwitchComponent,
+  SnippetTabSimpleComponent,
+  SnippetTabScrollerComponent,
+  SnippetTextFieldComponent, SnippetTextFieldIconComponent, SnippetTextFieldTextareaComponent,
+  SnippetToolbarComponent, SnippetToolbarFlexibleComponent } from './components';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SharedModule,
+    ComponentsRoutingModule
+  ],
+  declarations: [
+    OverviewComponent,
+
+    ...MDC_DIRECTIVE_DOC_COMPONENTS,
+
+    SnippetButtonComponent,
+    SnippetCardComponent,
+    SnippetCheckboxComponent,
+    SnippetChipsComponent, SnippetChipsChoiceComponent, SnippetChipsFilterComponent, SnippetChipsInputComponent,
+    SnippetDialogComponent,
+    SnippetDrawerPermanentBelowComponent,
+    SnippetDrawerPermanentComponent,
+    SnippetDrawerSlidableComponent,
+    SnippetElevationComponent,
+    SnippetFabComponent,
+    SnippetFocusTrapComponent,
+    SnippetIconToggleComponent,
+    SnippetLinearProgressComponent,
+    SnippetListComponent, SnippetListTwolineComponent,
+    SnippetMenuComponent,
+    SnippetSnackbarComponent,
+    SnippetRadioComponent,
+    SnippetRippleComponent,
+    SnippetSelectComponent,
+    SnippetSliderComponent,
+    SnippetSwitchComponent,
+    SnippetTabSimpleComponent,
+    SnippetTabScrollerComponent,
+    SnippetTextFieldComponent, SnippetTextFieldIconComponent, SnippetTextFieldTextareaComponent,
+    SnippetToolbarComponent, SnippetToolbarFlexibleComponent
+  ]
+})
+export class ComponentsModule {}

site/src/app/components.routing.module.ts

@@ -0,0 +1,60 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { OverviewComponent } from './overview.component';
+import {
+    ButtonDirectivesComponent,
+    CardDirectivesComponent,
+    CheckboxDirectivesComponent,
+    ChipsDirectivesComponent,
+    DialogDirectivesComponent,
+    DrawerDirectivesComponent,
+    ElevationDirectivesComponent,
+    FabDirectivesComponent,
+    FocusTrapDirectivesComponent,
+    IconToggleDirectivesComponent,
+    LinearProgressDirectivesComponent,
+    ListDirectivesComponent,
+    MenuDirectivesComponent,
+    RadioDirectivesComponent,
+    RippleDirectivesComponent,
+    SelectDirectivesComponent,
+    SliderDirectivesComponent,
+    SnackbarDirectivesComponent,
+    SwitchDirectivesComponent,
+    TabDirectivesComponent,
+    TextFieldDirectivesComponent,
+    ToolbarDirectivesComponent,
+    UtilityDirectivesComponent} from './components';
+
+const routes: Routes = [
+    {path: '', pathMatch: 'full', component: OverviewComponent},
+    {path: ButtonDirectivesComponent.DOC_HREF, component: ButtonDirectivesComponent},
+    {path: CardDirectivesComponent.DOC_HREF, component: CardDirectivesComponent},
+    {path: CheckboxDirectivesComponent.DOC_HREF, component: CheckboxDirectivesComponent},
+    {path: ChipsDirectivesComponent.DOC_HREF, component: ChipsDirectivesComponent},
+    {path: DialogDirectivesComponent.DOC_HREF, component: DialogDirectivesComponent},
+    {path: DrawerDirectivesComponent.DOC_HREF, component: DrawerDirectivesComponent},
+    {path: ElevationDirectivesComponent.DOC_HREF, component: ElevationDirectivesComponent},
+    {path: FabDirectivesComponent.DOC_HREF, component: FabDirectivesComponent},
+    {path: FocusTrapDirectivesComponent.DOC_HREF, component: FocusTrapDirectivesComponent},
+    {path: IconToggleDirectivesComponent.DOC_HREF, component: IconToggleDirectivesComponent},
+    {path: LinearProgressDirectivesComponent.DOC_HREF, component: LinearProgressDirectivesComponent},
+    {path: ListDirectivesComponent.DOC_HREF, component: ListDirectivesComponent},
+    {path: MenuDirectivesComponent.DOC_HREF, component: MenuDirectivesComponent},
+    {path: RadioDirectivesComponent.DOC_HREF, component: RadioDirectivesComponent},
+    {path: RippleDirectivesComponent.DOC_HREF, component: RippleDirectivesComponent},
+    {path: SelectDirectivesComponent.DOC_HREF, component: SelectDirectivesComponent},
+    {path: SliderDirectivesComponent.DOC_HREF, component: SliderDirectivesComponent},
+    {path: SnackbarDirectivesComponent.DOC_HREF, component: SnackbarDirectivesComponent},
+    {path: SwitchDirectivesComponent.DOC_HREF, component: SwitchDirectivesComponent},
+    {path: TabDirectivesComponent.DOC_HREF, component: TabDirectivesComponent},
+    {path: TextFieldDirectivesComponent.DOC_HREF, component: TextFieldDirectivesComponent},
+    {path: ToolbarDirectivesComponent.DOC_HREF, component: ToolbarDirectivesComponent},
+    {path: UtilityDirectivesComponent.DOC_HREF, component: UtilityDirectivesComponent}
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class ComponentsRoutingModule { }

site/src/app/components/highlightjs/highlightjs.directive.ts

@@ -1,7 +1,9 @@
 import { AfterViewInit, Directive, ElementRef, HostBinding, Injectable, Input, SimpleChanges } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class HighlightjsService {
     highlight(code: string, lang: string): Observable<string> {
         let result = new ReplaySubject<string>(1);

site/src/app/services/theme.service.ts

@@ -1,5 +1,9 @@
 import { Observable, ReplaySubject } from 'rxjs';
+import { Injectable } from '@angular/core';
 
+@Injectable({
+    providedIn: 'root'
+})
 export class ThemeService {
     theme: ReplaySubject<string> = new ReplaySubject<string>(1);
 

site/src/app/shared.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from '@blox/material';
+import {
+  CodeSampleComponent,
+  HighlightjsDirective
+} from './components';
+import { ThemeService } from './services';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+  ],
+  declarations: [
+    CodeSampleComponent,
+    HighlightjsDirective,
+  ],
+  exports: [
+    CommonModule,
+    MaterialModule,
+
+    CodeSampleComponent,
+    HighlightjsDirective,
+  ]
+})
+export class SharedModule {}