Re-define sub mining routes properly and use router outlet

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

@@ -29,6 +29,8 @@ import { AssetsComponent } from './components/assets/assets.component';
 import { PoolComponent } from './components/pool/pool.component';
 import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
 import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
+import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
+import { MiningStartComponent } from './components/mining-start/mining-start.component';
 
 let routes: Routes = [
   {
@@ -70,16 +72,35 @@ let routes: Routes = [
         component: LatestBlocksComponent,
       },
       {
-        path: 'mining/difficulty',
+        path: 'mining',
-        component: DifficultyChartComponent,
+        component: MiningStartComponent,
-      },
+        children: [
-      {
+          {
-        path: 'mining/pools',
+            path: 'difficulty',
-        component: PoolRankingComponent,
+            component: DifficultyChartComponent,
-      },
+          },
-      {
+          {
-        path: 'mining/pool/:poolId',
+            path: 'hashrate',
-        component: PoolComponent,
+            component: HashrateChartComponent,
+          },
+          {
+            path: 'pools',
+            component: PoolRankingComponent,
+          },
+          {
+            path: 'pool',
+            children: [
+              {
+                path: ':poolId',
+                component: PoolComponent,
+              },
+              {
+                path: ':poolId/hashrate',
+                component: HashrateChartComponent,
+              },
+            ]
+          },
+        ]
       },
       {
         path: 'graphs',
@@ -170,16 +191,35 @@ let routes: Routes = [
             component: LatestBlocksComponent,
           },
           {
-            path: 'mining/difficulty',
+            path: 'mining',
-            component: DifficultyChartComponent,
+            component: MiningStartComponent,
-          },
+            children: [
-          {
+              {
-            path: 'mining/pools',
+                path: 'difficulty',
-            component: PoolRankingComponent,
+                component: DifficultyChartComponent,
-          },
+              },
-          {
+              {
-            path: 'mining/pool/:poolId',
+                path: 'hashrate',
-            component: PoolComponent,
+                component: HashrateChartComponent,
+              },
+              {
+                path: 'pools',
+                component: PoolRankingComponent,
+              },
+              {
+                path: 'pool',
+                children: [
+                  {
+                    path: ':poolId',
+                    component: PoolComponent,
+                  },
+                  {
+                    path: ':poolId/hashrate',
+                    component: HashrateChartComponent,
+                  },
+                ]
+              },
+            ]
           },
           {
             path: 'graphs',
@@ -264,16 +304,35 @@ let routes: Routes = [
             component: LatestBlocksComponent,
           },
           {
-            path: 'mining/difficulty',
+            path: 'mining',
-            component: DifficultyChartComponent,
+            component: MiningStartComponent,
-          },
+            children: [
-          {
+              {
-            path: 'mining/pools',
+                path: 'difficulty',
-            component: PoolRankingComponent,
+                component: DifficultyChartComponent,
-          },
+              },
-          {
+              {
-            path: 'mining/pool/:poolId',
+                path: 'hashrate',
-            component: PoolComponent,
+                component: HashrateChartComponent,
+              },
+              {
+                path: 'pools',
+                component: PoolRankingComponent,
+              },
+              {
+                path: 'pool',
+                children: [
+                  {
+                    path: ':poolId',
+                    component: PoolComponent,
+                  },
+                  {
+                    path: ':poolId/hashrate',
+                    component: HashrateChartComponent,
+                  },
+                ]
+              },
+            ]
           },
           {
             path: 'graphs',

frontend/src/app/app.module.ts

@@ -71,6 +71,8 @@ import { AssetGroupComponent } from './components/assets/asset-group/asset-group
 import { AssetCirculationComponent } from './components/asset-circulation/asset-circulation.component';
 import { MiningDashboardComponent } from './components/mining-dashboard/mining-dashboard.component';
 import { DifficultyChartComponent } from './components/difficulty-chart/difficulty-chart.component';
+import { HashrateChartComponent } from './components/hashrate-chart/hashrate-chart.component';
+import { MiningStartComponent } from './components/mining-start/mining-start.component';
 
 @NgModule({
   declarations: [
@@ -124,6 +126,8 @@ import { DifficultyChartComponent } from './components/difficulty-chart/difficul
     AssetCirculationComponent,
     MiningDashboardComponent,
     DifficultyChartComponent,
+    HashrateChartComponent,
+    MiningStartComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -0,0 +1 @@
+<p>hashrate-chart works!</p>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hashrate-chart',
+  templateUrl: './hashrate-chart.component.html',
+  styleUrls: ['./hashrate-chart.component.scss']
+})
+export class HashrateChartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/mining-start/mining-start.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

frontend/src/app/components/mining-start/mining-start.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mining-start',
+  templateUrl: './mining-start.component.html',
+})
+export class MiningStartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}