Split transaction components into separate module

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

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AppPreloadingStrategy } from './app.preloading-strategy'
 import { StartComponent } from './components/start/start.component';
-import { TransactionComponent } from './components/transaction/transaction.component';
 import { BlockViewComponent } from './components/block-view/block-view.component';
 import { MempoolBlockViewComponent } from './components/mempool-block-view/mempool-block-view.component';
 import { ClockComponent } from './components/clock/clock.component';
@@ -88,13 +87,8 @@ let routes: Routes = [
           {
             path: 'tx',
             component: StartComponent,
-            data: { networkSpecific: true },
-            children: [
-              {
-                path: ':id',
-                component: TransactionComponent
-              },
-            ],
+            data: { preload: true, networkSpecific: true },
+            loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
           },
           {
             path: 'block',
@@ -189,14 +183,9 @@ let routes: Routes = [
           },
           {
             path: 'tx',
-            data: { networkSpecific: true },
             component: StartComponent,
-            children: [
-              {
-                path: ':id',
-                component: TransactionComponent
-              },
-            ],
+            data: { preload: true, networkSpecific: true },
+            loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
           },
           {
             path: 'block',
@@ -291,14 +280,9 @@ let routes: Routes = [
       },
       {
         path: 'tx',
-        data: { networkSpecific: true },
         component: StartComponent,
-        children: [
-          {
-            path: ':id',
-            component: TransactionComponent
-          },
-        ],
+        data: { preload: true, networkSpecific: true },
+        loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
       },
       {
         path: 'block',
@@ -430,14 +414,9 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
             },
             {
               path: 'tx',
-              data: { networkSpecific: true },
               component: StartComponent,
-              children: [
-                {
-                  path: ':id',
-                  component: TransactionComponent
-                },
-              ],
+              data: { preload: true, networkSpecific: true },
+              loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
             },
             {
               path: 'block',
@@ -540,14 +519,9 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
         },
         {
           path: 'tx',
-          data: { networkSpecific: true },
           component: StartComponent,
-          children: [
-            {
-              path: ':id',
-              component: TransactionComponent
-            },
-          ],
+          data: { preload: true, networkSpecific: true },
+          loadChildren: () => import('./components/transaction/transaction.module').then(m => m.TransactionModule),
         },
         {
           path: 'block',

frontend/src/app/components/transaction/transaction.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { TransactionComponent } from './transaction.component';
+import { SharedModule } from '../../shared/shared.module';
+import { TxBowtieModule } from '../tx-bowtie-graph/tx-bowtie.module';
+
+const routes: Routes = [
+  {
+    path: ':id',
+    component: TransactionComponent,
+    data: {
+      ogImage: true
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class TransactionRoutingModule { }
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TransactionRoutingModule,
+    SharedModule,
+    TxBowtieModule,
+  ],
+  declarations: [
+    TransactionComponent,
+  ]
+})
+export class TransactionModule { }
+
+
+
+
+
+

frontend/src/app/components/tx-bowtie-graph/tx-bowtie.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../shared/shared.module';
+import { TxBowtieGraphComponent } from '../tx-bowtie-graph/tx-bowtie-graph.component';
+import { TxBowtieGraphTooltipComponent } from '../tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+  ],
+  declarations: [
+    TxBowtieGraphComponent,
+    TxBowtieGraphTooltipComponent,
+  ],
+  exports: [
+    TxBowtieGraphComponent,
+    TxBowtieGraphTooltipComponent,
+  ]
+})
+export class TxBowtieModule { }
+
+
+
+
+
+

frontend/src/app/previews.module.ts

@@ -9,6 +9,7 @@ import { BlockPreviewComponent } from './components/block/block-preview.componen
 import { AddressPreviewComponent } from './components/address/address-preview.component';
 import { PoolPreviewComponent } from './components/pool/pool-preview.component';
 import { MasterPagePreviewComponent } from './components/master-page-preview/master-page-preview.component';
+import { TxBowtieModule } from './components/tx-bowtie-graph/tx-bowtie.module';
 @NgModule({
   declarations: [
     TransactionPreviewComponent,
@@ -23,6 +24,7 @@ import { MasterPagePreviewComponent } from './components/master-page-preview/mas
     RouterModule,
     PreviewsRoutingModule,
     GraphsModule,
+    TxBowtieModule,
   ],
 })
 export class PreviewsModule { }

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

@@ -45,7 +45,6 @@ import { AmountComponent } from '../components/amount/amount.component';
 import { RouterModule } from '@angular/router';
 import { CapAddressPipe } from './pipes/cap-address-pipe/cap-address-pipe';
 import { StartComponent } from '../components/start/start.component';
-import { TransactionComponent } from '../components/transaction/transaction.component';
 import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
 import { BlockOverviewGraphComponent } from '../components/block-overview-graph/block-overview-graph.component';
 import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
@@ -64,8 +63,6 @@ import { DifficultyMiningComponent } from '../components/difficulty-mining/diffi
 import { TermsOfServiceComponent } from '../components/terms-of-service/terms-of-service.component';
 import { RbfTimelineComponent } from '../components/rbf-timeline/rbf-timeline.component';
 import { RbfTimelineTooltipComponent } from '../components/rbf-timeline/rbf-timeline-tooltip.component';
-import { TxBowtieGraphComponent } from '../components/tx-bowtie-graph/tx-bowtie-graph.component';
-import { TxBowtieGraphTooltipComponent } from '../components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component';
 import { PrivacyPolicyComponent } from '../components/privacy-policy/privacy-policy.component';
 import { TrademarkPolicyComponent } from '../components/trademark-policy/trademark-policy.component';
 import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component';
@@ -147,7 +144,6 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     BisqMasterPageComponent,
     LiquidMasterPageComponent,
     StartComponent,
-    TransactionComponent,
     BlockOverviewGraphComponent,
     BlockOverviewTooltipComponent,
     TransactionsListComponent,
@@ -164,8 +160,6 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     DifficultyTooltipComponent,
     RbfTimelineComponent,
     RbfTimelineTooltipComponent,
-    TxBowtieGraphComponent,
-    TxBowtieGraphTooltipComponent,
     TermsOfServiceComponent,
     PrivacyPolicyComponent,
     TrademarkPolicyComponent,
@@ -273,7 +267,6 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     BlockchainBlocksComponent,
     AmountComponent,
     StartComponent,
-    TransactionComponent,
     BlockOverviewGraphComponent,
     BlockOverviewTooltipComponent,
     TransactionsListComponent,
@@ -290,8 +283,6 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     DifficultyTooltipComponent,
     RbfTimelineComponent,
     RbfTimelineTooltipComponent,
-    TxBowtieGraphComponent,
-    TxBowtieGraphTooltipComponent,
     TermsOfServiceComponent,
     PrivacyPolicyComponent,
     TrademarkPolicyComponent,