Moving Docs and Faq to separate lazy loaded module

frontend/src/app/app-routing.module.ts

@@ -14,7 +14,6 @@ import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.co
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
-import { DocsComponent } from './components/docs/docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@@ -138,25 +137,13 @@ let routes: Routes = [
         path: 'about',
         component: AboutComponent,
       },
-      {
-        path: 'docs/api/:type',
-        component: DocsComponent
-      },
-      {
-        path: 'docs/faq',
-        component: DocsComponent
-      },
-      {
-        path: 'docs/api',
-        redirectTo: 'docs/api/rest'
-      },
       {
         path: 'docs',
-        redirectTo: 'docs/faq'
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
       },
       {
         path: 'api',
-        redirectTo: 'docs/api/rest'
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
       },
       {
         path: 'terms-of-service',
@@ -281,25 +268,13 @@ let routes: Routes = [
             children: [],
             component: AddressComponent
           },
-          {
-            path: 'docs/api/:type',
-            component: DocsComponent
-          },
-          {
-            path: 'docs/faq',
-            component: DocsComponent
-          },
-          {
-            path: 'docs/api',
-            redirectTo: 'docs/api/rest'
-          },
           {
             path: 'docs',
-            redirectTo: 'docs/faq'
+            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
           {
             path: 'api',
-            redirectTo: 'docs/api/rest'
+            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
         ],
       },
@@ -421,25 +396,13 @@ let routes: Routes = [
             children: [],
             component: AddressComponent
           },
-          {
-            path: 'docs/api/:type',
-            component: DocsComponent
-          },
-          {
-            path: 'docs/faq',
-            component: DocsComponent
-          },
-          {
-            path: 'docs/api',
-            redirectTo: 'docs/api/rest'
-          },
           {
             path: 'docs',
-            redirectTo: 'docs/faq'
+            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
           {
             path: 'api',
-            redirectTo: 'docs/api/rest'
+            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
         ],
       },
@@ -567,21 +530,13 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
           }
         ]
       },
-      {
-        path: 'docs/api/:type',
-        component: DocsComponent
-      },
-      {
-        path: 'docs/api',
-        redirectTo: 'docs/api/rest'
-      },
       {
         path: 'docs',
-        redirectTo: 'docs/api/rest'
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
       },
       {
         path: 'api',
-        redirectTo: 'docs/api/rest'
+        loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
       },
       {
         path: 'about',
@@ -679,21 +634,13 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
               }
             ]
           },
-          {
-            path: 'docs/api/:type',
-            component: DocsComponent
-          },
-          {
-            path: 'docs/api',
-            redirectTo: 'docs/api/rest'
-          },
           {
             path: 'docs',
-            redirectTo: 'docs/api/rest'
+            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
           {
             path: 'api',
-            redirectTo: 'docs/api/rest'
+            loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
           },
           {
             path: 'about',
@@ -743,7 +690,6 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
     scrollPositionRestoration: 'enabled',
     anchorScrolling: 'enabled'
   })],
-  exports: [RouterModule]
 })
 export class AppRoutingModule { }
 

frontend/src/app/app.module.ts

@@ -12,7 +12,6 @@ import { StartComponent } from './components/start/start.component';
 import { ElectrsApiService } from './services/electrs-api.service';
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { TransactionsListComponent } from './components/transactions-list/transactions-list.component';
-import { AmountComponent } from './components/amount/amount.component';
 import { StateService } from './services/state.service';
 import { BlockComponent } from './components/block/block.component';
 import { AddressComponent } from './components/address/address.component';
@@ -20,15 +19,12 @@ import { SearchFormComponent } from './components/search-form/search-form.compon
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { WebsocketService } from './services/websocket.service';
 import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
-import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
 import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
-import { BlockchainBlocksComponent } from './components/blockchain-blocks/blockchain-blocks.component';
-import { BlockchainComponent } from './components/blockchain/blockchain.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { AudioService } from './services/audio.service';
 import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
@@ -53,11 +49,6 @@ import { DifficultyComponent } from './components/difficulty/difficulty.componen
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl } from '@fortawesome/free-solid-svg-icons';
-import { ApiDocsComponent } from './components/docs/api-docs.component';
-import { DocsComponent } from './components/docs/docs.component';
-import { ApiDocsNavComponent } from './components/docs/api-docs-nav.component';
-import { NoSanitizePipe } from './shared/pipes/no-sanitize.pipe';
-import { CodeTemplateComponent } from './components/docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@@ -93,20 +84,16 @@ import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/
     BisqMasterPageComponent,
     LiquidMasterPageComponent,
     TelevisionComponent,
-    BlockchainComponent,
     StartComponent,
-    BlockchainBlocksComponent,
     StatisticsComponent,
     TransactionComponent,
     BlockComponent,
     TransactionsListComponent,
     AddressComponent,
-    AmountComponent,
     LatestBlocksComponent,
     SearchFormComponent,
     TimeSpanComponent,
     AddressLabelsComponent,
-    MempoolBlocksComponent,
     FooterComponent,
     MempoolBlockComponent,
     FeeDistributionGraphComponent,
@@ -122,16 +109,11 @@ import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/
     FeesBoxComponent,
     DashboardComponent,
     DifficultyComponent,
-    ApiDocsComponent,
-    NoSanitizePipe,
-    CodeTemplateComponent,
     TermsOfServiceComponent,
     PrivacyPolicyComponent,
     TrademarkPolicyComponent,
     SponsorComponent,
     PushTransactionComponent,
-    DocsComponent,
-    ApiDocsNavComponent,
     AssetsNavComponent,
     AssetsFeaturedComponent,
     AssetGroupComponent,

frontend/src/app/bisq/bisq.routing.module.ts

@@ -7,7 +7,6 @@ import { BisqBlockComponent } from './bisq-block/bisq-block.component';
 import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
 import { BisqAddressComponent } from './bisq-address/bisq-address.component';
 import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
-import { DocsComponent } from '../components/docs/docs.component';
 import { BisqDashboardComponent } from './bisq-dashboard/bisq-dashboard.component';
 import { BisqMarketComponent } from './bisq-market/bisq-market.component';
 import { BisqMainDashboardComponent } from './bisq-main-dashboard/bisq-main-dashboard.component';
@@ -60,21 +59,13 @@ const routes: Routes = [
       path: 'about',
       component: AboutComponent,
     },
-    {
-      path: 'docs/api/:type',
-      component: DocsComponent
-    },
-    {
-      path: 'docs/api',
-      redirectTo: 'docs/api/rest'
-    },
     {
       path: 'docs',
-      redirectTo: 'docs/api/rest'
+      loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
     },
     {
       path: 'api',
-      redirectTo: 'docs/api/rest'
+      loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
     },
     {
       path: 'terms-of-service',
@@ -88,6 +79,5 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
 })
 export class BisqRoutingModule { }

frontend/src/app/docs/api-docs/api-docs.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
-import { Env, StateService } from 'src/app/services/state.service';
+import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
-import { SeoService } from 'src/app/services/seo.service';
+import { SeoService } from '../../services/seo.service';
 import { tap } from 'rxjs/operators';
 import { ActivatedRoute } from "@angular/router";
 import { faqData, restApiDocsData, wsApiDocsData } from './api-docs-data';

frontend/src/app/docs/code-template/code-template.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Env, StateService } from 'src/app/services/state.service';
+import { Env, StateService } from '../../services/state.service';
 
 @Component({
   selector: 'app-code-template',

frontend/src/app/docs/docs.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { ApiDocsComponent } from './/api-docs/api-docs.component';
+import { DocsComponent } from './docs/docs.component';
+import { ApiDocsNavComponent } from './api-docs/api-docs-nav.component';
+import { CodeTemplateComponent } from './code-template/code-template.component';
+import { DocsRoutingModule } from './docs.routing.module';
+@NgModule({
+  declarations: [
+    ApiDocsComponent,
+    CodeTemplateComponent,
+    ApiDocsNavComponent,
+    DocsComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    DocsRoutingModule,
+  ]
+})
+export class DocsModule { }

frontend/src/app/docs/docs.routing.module.ts

@@ -0,0 +1,58 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DocsComponent } from './docs/docs.component';
+
+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+
+let routes: Routes = [];
+
+if (browserWindowEnv.BASE_MODULE && (browserWindowEnv.BASE_MODULE === 'bisq' || browserWindowEnv.BASE_MODULE === 'liquid')) {
+  routes = [
+    {
+      path: '',
+      redirectTo: 'api/rest'
+    },
+    {
+      path: 'api/:type',
+      component: DocsComponent
+    },
+    {
+      path: 'api',
+      redirectTo: 'api/rest'
+    },
+    {
+      path: '**',
+      redirectTo: 'api/rest'
+    }
+  ];
+} else {
+  routes = [
+    {
+      path: '',
+      redirectTo: 'faq'
+    },
+    {
+      path: 'api/:type',
+      component: DocsComponent
+    },
+    {
+      path: 'faq',
+      component: DocsComponent
+    },
+    {
+      path: 'api',
+      redirectTo: 'api/rest'
+    },
+    {
+      path: '**',
+      redirectTo: 'api/faq'
+    }
+  ];
+}
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class DocsRoutingModule { }

frontend/src/app/docs/docs/docs.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Env, StateService } from 'src/app/services/state.service';
-import { WebsocketService } from 'src/app/services/websocket.service';
+import { Env, StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 @Component({
   selector: 'app-docs',
@@ -26,9 +26,9 @@ export class DocsComponent implements OnInit {
   ngOnInit(): void {
     this.websocket.want(['blocks']);
     const url = this.route.snapshot.url;
-    if( url[1].path === "faq" ) {
+    if (url[0].path === "faq" ) {
         this.activeTab = 0;
-    } else if( url[2].path === "rest" ) {
+    } else if( url[1].path === "rest" ) {
         this.activeTab = 1;
     } else {
         this.activeTab = 2;

frontend/src/app/shared/shared.module.ts

@@ -12,6 +12,7 @@ import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
 import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
+import { BlockchainComponent } from '../components/blockchain/blockchain.component';
 import { TimeSinceComponent } from '../components/time-since/time-since.component';
 import { TimeUntilComponent } from '../components/time-until/time-until.component';
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
@@ -23,6 +24,11 @@ import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.
 import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
+import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
+import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
+import { BlockchainBlocksComponent } from '../components/blockchain-blocks/blockchain-blocks.component';
+import { AmountComponent } from '../components/amount/amount.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -36,6 +42,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     LanguageSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
+    NoSanitizePipe,
     Hex2asciiPipe,
     AsmStylerPipe,
     AbsolutePipe,
@@ -47,9 +54,14 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     Decimal2HexPipe,
     FeeRoundingPipe,
     ColoredPriceDirective,
+    BlockchainComponent,
+    MempoolBlocksComponent,
+    BlockchainBlocksComponent,
+    AmountComponent,
   ],
   imports: [
     CommonModule,
+    RouterModule,
     ReactiveFormsModule,
     NgbNavModule,
     NgbTooltipModule,
@@ -61,8 +73,10 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
   providers: [
     VbytesPipe,
     RelativeUrlPipe,
+    NoSanitizePipe,
   ],
   exports: [
+    RouterModule,
     NgbAccordionModule,
     NgbNavModule,
     CommonModule,
@@ -92,6 +106,11 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     Decimal2HexPipe,
     FeeRoundingPipe,
     ColoredPriceDirective,
+    NoSanitizePipe,
+    BlockchainComponent,
+    MempoolBlocksComponent,
+    BlockchainBlocksComponent,
+    AmountComponent,
   ]
 })
 export class SharedModule {}