chore(Demo): demo pages are all lazy loading

demo/app/app-routing.module.ts

@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import { componentsList } from './components/components.constant';
 import { ComponentsComponent } from './components/components.component';
+import { componentsList } from './components/components.constant';
 
 
 const routes: Routes = [

demo/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { AppComponent } from './app.component';

demo/app/app.module.ts

@@ -1,32 +1,10 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import 'hammerjs';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { HttpClientModule } from '@angular/common/http';
-
-
-/**
- * Start amCharts config
- */
-import * as am4core from '@amcharts/amcharts4/core';
-import * as am4charts from '@amcharts/amcharts4/charts';
-import * as am4maps from '@amcharts/amcharts4/maps';
-import am4themes_animated from '@amcharts/amcharts4/themes/animated';
-import am4themes_material from '@amcharts/amcharts4/themes/animated';
-export function amChartsFactory(): TsAmChartsToken {
-  return {
-    core: am4core,
-    charts: am4charts,
-    maps: am4maps,
-    themes: [am4themes_animated, am4themes_material],
-  };
-}
-/**
- * End amCharts config
- */
-
 
 
 // Native Material modules only needed for demo shell
@@ -37,87 +15,19 @@ import {
   MatToolbarModule,
 } from '@angular/material';
 
-
-import { TsAutocompleteModule } from '@terminus/ui/autocomplete';
-import { TsAutofocusModule } from '@terminus/ui/autofocus';
-import { TsButtonModule } from '@terminus/ui/button';
-import { TsCardModule } from '@terminus/ui/card';
-import { TsChartModule, TS_AMCHARTS_TOKEN, TsAmChartsToken } from '@terminus/ui/chart';
-import { TsCheckboxModule } from '@terminus/ui/checkbox';
-import { TsConfirmationModule } from '@terminus/ui/confirmation';
-import { TsCopyModule } from '@terminus/ui/copy';
-import { TsCSVEntryModule } from '@terminus/ui/csv-entry';
-import { TsDateRangeModule } from '@terminus/ui/date-range';
-import { TsExpansionPanelModule } from '@terminus/ui/expansion-panel';
-import { TsFileUploadModule } from '@terminus/ui/file-upload';
-import { TsIconButtonModule } from '@terminus/ui/icon-button';
-import { TsIconModule } from '@terminus/ui/icon';
-import { TsInputModule } from '@terminus/ui/input';
-import { TsLinkModule } from '@terminus/ui/link';
-import { TsLoadingOverlayModule } from '@terminus/ui/loading-overlay';
-import { TsLoginFormModule } from '@terminus/ui/login-form';
-import { TsLogoModule } from '@terminus/ui/logo';
-import { TsMenuModule } from '@terminus/ui/menu';
-import { TsNavigationModule } from '@terminus/ui/navigation';
-import { TsPaginatorModule } from '@terminus/ui/paginator';
-import { TsPipesModule } from '@terminus/ui/pipes';
-import { TsRadioGroupModule } from '@terminus/ui/radio-group';
-import { TsScrollbarsModule } from '@terminus/ui/scrollbars';
-import { TsSearchModule } from '@terminus/ui/search';
-import { TsSelectModule } from '@terminus/ui/select';
-import { TsSortModule } from '@terminus/ui/sort';
-import { TsSpacingModule } from '@terminus/ui/spacing';
-import { TsTableModule } from '@terminus/ui/table';
-import { TsToggleModule } from '@terminus/ui/toggle';
-import { TsTooltipModule } from '@terminus/ui/tooltip';
 // INJECT: Add new UI component to demo UI imports
 // NB! The above line is required for our yeoman generator and should not be changed.
 
 import {
-  TsWindowService,
   TsDocumentService,
+  TsWindowService,
 } from '@terminus/ngx-tools';
 
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ComponentsComponent } from './components/components.component';
 
-import { AutocompleteComponent } from './components/autocomplete/autocomplete.component';
-import { AutofocusComponent } from './components/autofocus/autofocus.component';
-import { BreakpointsComponent } from './components/breakpoints/breakpoints.component';
-import { ButtonComponent } from './components/button/button.component';
-import { CardComponent } from './components/card/card.component';
-import { ChartComponent } from './components/chart/chart.component';
-import { CheckboxComponent } from './components/checkbox/checkbox.component';
-import { ConfirmationComponent } from './components/confirmation/confirmation.component';
-import { CopyComponent } from './components/copy/copy.component';
-import { CSVEntryComponent } from './components/csv-entry/csv-entry.component';
-import { DateRangeComponent } from './components/date-range/date-range.component';
-import { ExpansionPanelComponent } from './components/expansion-panel/expansion-panel.component';
-import { FileUploadComponent } from './components/file-upload/file-upload.component';
-import { IconButtonComponent } from './components/icon-button/icon-button.component';
-import { IconComponent } from './components/icon/icon.component';
-import { InputComponent } from './components/input/input.component';
-import { LinkComponent } from './components/link/link.component';
-import { LoadingOverlayComponent } from './components/loading-overlay/loading-overlay.component';
-import { LoginFormComponent } from './components/login-form/login-form.component';
-import { LogoComponent } from './components/logo/logo.component';
-import { MenuComponent } from './components/menu/menu.component';
-import { NavigationComponent } from './components/navigation/navigation.component';
-import { PaginatorComponent } from './components/paginator/paginator.component';
-import { PipesComponent } from './components/pipes/pipes.component';
-import { RadioComponent } from './components/radio/radio.component';
-import { ScrollbarsComponent } from './components/scrollbars/scrollbars.component';
-import { SearchComponent } from './components/search/search.component';
-import { SelectComponent } from './components/select/select.component';
-import { SpacingComponent } from './components/spacing/spacing.component';
-import { SpacingStylesComponent } from './components/spacing/spacing-styles.component';
-import { TableComponent } from './components/table/table.component';
-import { ToggleComponent } from './components/toggle/toggle.component';
-import { TooltipComponent } from './components/tooltip/tooltip.component';
-import { TypographyComponent } from './components/typography/typography.component';
-import { ValidationComponent } from './components/validation/validation.component';
 // INJECT: Import demo component file
 // NB! The above line is required for our yeoman generator and should not be changed.
 
@@ -137,89 +47,18 @@ import { ValidationComponent } from './components/validation/validation.componen
     MatMenuModule,
     MatToolbarModule,
 
-    TsAutocompleteModule,
-    TsAutofocusModule,
-    TsButtonModule,
-    TsCardModule,
-    TsChartModule,
-    TsCheckboxModule,
-    TsConfirmationModule,
-    TsCopyModule,
-    TsCSVEntryModule,
-    TsDateRangeModule,
-    TsExpansionPanelModule,
-    TsFileUploadModule,
-    TsIconButtonModule,
-    TsIconModule,
-    TsInputModule,
-    TsLinkModule,
-    TsLoadingOverlayModule,
-    TsLoginFormModule,
-    TsLogoModule,
-    TsMenuModule,
-    TsNavigationModule,
-    TsPaginatorModule,
-    TsPipesModule,
-    TsRadioGroupModule,
-    TsScrollbarsModule,
-    TsSearchModule,
-    TsSelectModule,
-    TsSortModule,
-    TsSpacingModule,
-    TsTableModule,
-    TsToggleModule,
-    TsTooltipModule,
     // INJECT: Add new UI component to demo module imports array
     // NB! The above line is required for our yeoman generator and should not be changed.
   ],
   providers: [
     TsDocumentService,
     TsWindowService,
-    // Use the factory function to overwrite the `TS_AMCHARTS_TOKEN` injectable:
-    {
-      provide: TS_AMCHARTS_TOKEN,
-      useFactory: amChartsFactory,
-    },
+
   ],
   declarations: [
     AppComponent,
     ComponentsComponent,
 
-    AutocompleteComponent,
-    AutofocusComponent,
-    BreakpointsComponent,
-    ButtonComponent,
-    CardComponent,
-    ChartComponent,
-    CheckboxComponent,
-    ConfirmationComponent,
-    CopyComponent,
-    CSVEntryComponent,
-    DateRangeComponent,
-    ExpansionPanelComponent,
-    FileUploadComponent,
-    IconButtonComponent,
-    IconComponent,
-    InputComponent,
-    LinkComponent,
-    LoadingOverlayComponent,
-    LoginFormComponent,
-    LogoComponent,
-    MenuComponent,
-    NavigationComponent,
-    PaginatorComponent,
-    PipesComponent,
-    RadioComponent,
-    ScrollbarsComponent,
-    SearchComponent,
-    SelectComponent,
-    SpacingComponent,
-    SpacingStylesComponent,
-    TableComponent,
-    ToggleComponent,
-    TooltipComponent,
-    TypographyComponent,
-    ValidationComponent,
     // INJECT: Add demo component to declarations
     // NB! The above line is required for our yeoman generator and should not be changed.
   ],

demo/app/components/autocomplete/autocomplete-routing.module.ts

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

demo/app/components/autocomplete/autocomplete.component.ts

@@ -1,26 +1,26 @@
+import { HttpClient } from '@angular/common/http';
 import {
   Component,
   OnInit,
   ViewChild,
 } from '@angular/core';
 import {
   FormBuilder,
-  Validators,
   ValidationErrors,
+  Validators,
 } from '@angular/forms';
-import { HttpClient } from '@angular/common/http';
 import {
   Observable,
   of,
   Subscription,
 } from 'rxjs';
-import { map, delay, switchMap, startWith } from 'rxjs/operators';
+import { delay, map, startWith, switchMap } from 'rxjs/operators';
+
 import {
-  TsAutocompleteComponent,
   TsAutocompleteComparatorFn,
+  TsAutocompleteComponent,
 } from '@terminus/ui/autocomplete';
 
-
 interface GitHubUser {
   [key: string]: any;
 }

demo/app/components/autocomplete/autocomplete.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { TsAutocompleteModule } from '@terminus/ui/autocomplete';
+import { TsCardModule } from '@terminus/ui/card';
+import { TsCheckboxModule } from '@terminus/ui/checkbox';
+import { TsSpacingModule } from '@terminus/ui/spacing';
+
+import { AutocompleteRoutingModule } from './autocomplete-routing.module';
+import { AutocompleteComponent } from './autocomplete.component';
+
+@NgModule({
+  imports: [AutocompleteRoutingModule, CommonModule, FormsModule, TsAutocompleteModule, TsCheckboxModule, TsCardModule, TsSpacingModule],
+  declarations: [AutocompleteComponent],
+})
+export class AutocompleteModule {}

demo/app/components/autofocus/autofocus-routing.module.ts

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

demo/app/components/autofocus/autofocus.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { TsAutofocusModule } from '@terminus/ui/autofocus';
+import { TsCardModule } from '@terminus/ui/card';
+import { TsSelectModule } from '@terminus/ui/select';
+import { TsSpacingModule } from '@terminus/ui/spacing';
+
+import { AutofocusRoutingModule } from './autofocus-routing.module';
+import { AutofocusComponent } from './autofocus.component';
+
+@NgModule({
+  imports: [AutofocusRoutingModule, CommonModule, FormsModule, TsAutofocusModule, TsCardModule, TsSelectModule, TsSpacingModule],
+  declarations: [AutofocusComponent],
+})
+export class AutofocusModule {}

demo/app/components/breakpoints/breakpoints-routing.module.ts

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

demo/app/components/breakpoints/breakpoints.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TsCardModule } from '@terminus/ui/card';
+
+import { BreakpointsRoutingModule } from './breakpoints-routing.module';
+import { BreakpointsComponent } from './breakpoints.component';
+
+@NgModule({
+  imports: [BreakpointsRoutingModule, CommonModule, TsCardModule ],
+  declarations: [BreakpointsComponent],
+})
+export class BreakpointsModule {}

demo/app/components/button/button-routing.module.ts

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