feat(marketplace): extract common components (#1338)

* feat(marketplace): extract common components

* chore: fix service provide

* feat(markdown): allow Observable content

* chore: remove unnecessary module import

* minor styling for marketplacee list

* only show loading for marketplace show if version change

* chore: get rid of unnecessary server request

* chore: fix version switching

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/projects/diagnostic-ui/src/app/app.module.ts

@@ -8,9 +8,8 @@ import { HttpClientModule } from '@angular/common/http'
 import { ApiService } from './services/api/api.service'
 import { MockApiService } from './services/api/mock-api.service'
 import { LiveApiService } from './services/api/live-api.service'
-import { HttpService } from './services/http.service'
 import { GlobalErrorHandler } from './services/global-error-handler.service'
-import { WorkspaceConfig } from '@start9labs/shared'
+import { AbstractApiService, WorkspaceConfig } from '@start9labs/shared'
 
 const { useMocks } = require('../../../../config.json') as WorkspaceConfig
 
@@ -29,14 +28,11 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     {
       provide: ApiService,
-      useFactory: (http: HttpService) => {
-        if (useMocks) {
-          return new MockApiService()
-        } else {
-          return new LiveApiService(http)
-        }
-      },
-      deps: [HttpService],
+      useClass: useMocks ? MockApiService : LiveApiService,
+    },
+    {
+      provide: AbstractApiService,
+      useExisting: ApiService,
     },
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
   ],