diff --git a/.gitignore b/.gitignore
index 34972675d..0412c70ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,4 @@ src/ui_ng/aot/**/*.json
 **/*ngsummary.json
 **/*ngfactory.ts
 **/aot
+**/dist
diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json
index 9ef32002a..a9ccfcb16 100644
--- a/src/ui_ng/lib/package.json
+++ b/src/ui_ng/lib/package.json
@@ -35,7 +35,8 @@
         "core-js": "^2.4.1",
         "rxjs": "^5.0.1",
         "ts-helpers": "^1.1.1",
-        "zone.js": "^0.8.4"
+        "zone.js": "^0.8.4",
+        "mutationobserver-shim": "^0.3.2"
     },
     "devDependencies": {
         "@angular/cli": "^1.0.0",
diff --git a/src/ui_ng/lib/src/harbor-library.module.ts b/src/ui_ng/lib/src/harbor-library.module.ts
index adf42683e..673589f82 100644
--- a/src/ui_ng/lib/src/harbor-library.module.ts
+++ b/src/ui_ng/lib/src/harbor-library.module.ts
@@ -2,18 +2,55 @@ import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SYSTEMINFO_DIRECTIVES } from './system/index';
 import { SERVICE_CONFIG, IServiceConfig } from './service.config';
+import {
+  AccessLogService,
+  AccessLogDefaultService,
+  EndpointService,
+  EndpointDefaultService,
+  ReplicationService,
+  ReplicationDefaultService,
+  RepositoryService,
+  RepositoryDefaultService,
+  TagService,
+  TagDefaultService
+} from './service/index';
 
+/**
+ * Declare default service configuration
+ */
 export const DefaultServiceConfig: IServiceConfig = {
   systemInfoEndpoint: "/api/system",
   repositoryBaseEndpoint: "",
   logBaseEndpoint: "",
   targetBaseEndpoint: "",
-  replicationRuleEndpoint:"",
+  replicationRuleEndpoint: "",
   replicationJobEndpoint: ""
 };
 
+/**
+ * Define the configuration for harbor shareable module
+ * 
+ * @export
+ * @interface HarborModuleConfig
+ */
 export interface HarborModuleConfig {
-  config?: Provider
+  //Service endpoints
+  config?: Provider,
+
+  //Service implementation for log
+  logService?: Provider,
+
+  //Service implementation for endpoint
+  endpointService?: Provider,
+
+  //Service implementation for replication
+  replicationService?: Provider,
+
+  //Service implementation for repository
+  repositoryService?: Provider,
+
+  //Service implementation for tag
+  tagService?: Provider
 }
 
 @NgModule({
@@ -29,7 +66,12 @@ export class HarborLibraryModule {
     return {
       ngModule: HarborLibraryModule,
       providers: [
-        config.config || { provide: SERVICE_CONFIG, useValue: DefaultServiceConfig }
+        config.config || { provide: SERVICE_CONFIG, useValue: DefaultServiceConfig },
+        config.logService || { provide: AccessLogService, useClass: AccessLogDefaultService },
+        config.endpointService || { provide: EndpointService, useClass: EndpointDefaultService },
+        config.replicationService || { provide: ReplicationService, useClass: ReplicationDefaultService },
+        config.repositoryService || { provide: RepositoryService, useClass: RepositoryDefaultService },
+        config.tagService || { provide: TagService, useClass: TagDefaultService }
       ]
     };
   }
@@ -38,7 +80,12 @@ export class HarborLibraryModule {
     return {
       ngModule: HarborLibraryModule,
       providers: [
-        config.config || { provide: SERVICE_CONFIG, useValue: DefaultServiceConfig }
+        config.config || { provide: SERVICE_CONFIG, useValue: DefaultServiceConfig },
+        config.logService || { provide: AccessLogService, useClass: AccessLogDefaultService },
+        config.endpointService || { provide: EndpointService, useClass: EndpointDefaultService },
+        config.replicationService || { provide: ReplicationService, useClass: ReplicationDefaultService },
+        config.repositoryService || { provide: RepositoryService, useClass: RepositoryDefaultService },
+        config.tagService || { provide: TagService, useClass: TagDefaultService }
       ]
     };
   }