Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

32 files changed, 1536 insertions, 672 deletions

diff --git a/catalog-ui/src/app/ng2/services/activity-log.service.ts b/catalog-ui/src/app/ng2/services/activity-log.service.ts
new file mode 100644
index 0000000000..deabbee0bd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/activity-log.service.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Activity } from '../../models/activity';
+import { ServerTypeUrl } from '../../utils/constants';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import { HttpHelperService } from './http-hepler.service';
+
+@Injectable()
+export class ActivityLogService {
+    url: string;
+
+    constructor(private httpClient: HttpClient, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+        this.url = this.sdcConfig.api.root + this.sdcConfig.api.GET_activity_log;
+    }
+
+    public getActivityLog(componentType: string, uid: string): Observable<Activity[]> {
+
+        // Compose URL: audit-records/services_or_resources/uid
+        const url = HttpHelperService.replaceUrlParams(this.url, {
+            type: ServerTypeUrl.toServerTypeUrl(componentType),
+            id: uid
+        });
+
+        return this.httpClient.get<Activity[]>(url);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/services/archive.service.ts b/catalog-ui/src/app/ng2/services/archive.service.ts
deleted file mode 100644
index 83f1c502c2..0000000000
--- a/catalog-ui/src/app/ng2/services/archive.service.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { Injectable, Inject } from "@angular/core";
-import { Observable } from "rxjs/Observable";
-import { HttpService } from "./http.service";
-import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
-import { Component } from "../../models";
-import { ComponentFactory } from 'app/utils/component-factory';
-
-
-@Injectable()
-export class ArchiveService {
-    protected baseUrl;
-
-    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig, private componentFactory:ComponentFactory/*, @Inject(ComponentFactory) componentFactory */) {
-        this.baseUrl = sdcConfig.api.root ;
-    }
-
-    public getArchiveCatalog() {
-        let archiveCatalogItems:Component[] = [];
-        let archiveCatalogResourceItems:Component[] = []; 
-        let archiveCatalogServiceItems:Component[] = [];
-
-        return this.http.get(this.baseUrl + '/v1/catalog/archive/', {}).map(res => {
-            let archiveCatalogObject = res.json();
-            if (archiveCatalogObject.resources) archiveCatalogResourceItems = this.getResourceItems(archiveCatalogObject.resources);
-            if (archiveCatalogObject.services) archiveCatalogServiceItems = this.getServiceItems(archiveCatalogObject.services);
-            archiveCatalogItems = [].concat(archiveCatalogResourceItems, archiveCatalogServiceItems);
-            
-            return archiveCatalogItems;
-        });
-    }
-
-    
-    private getResourceItems(resources){
-        let resourceItems = resources.map((resource)=>{
-            return this.componentFactory.createResource(resource)
-        })
-        return resourceItems;
-    }
-
-    private getServiceItems(services){
-        let serviceItems = services.map((service)=>{
-            return this.componentFactory.createService(service)
-        })
-        return serviceItems;
-    }
-
-}    
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/authentication.service.ts b/catalog-ui/src/app/ng2/services/authentication.service.ts
index 1c6502dd0d..52ca643833 100644
--- a/catalog-ui/src/app/ng2/services/authentication.service.ts
+++ b/catalog-ui/src/app/ng2/services/authentication.service.ts
@@ -20,38 +20,44 @@
 
 import {Injectable, Inject} from '@angular/core';
 import {IAppConfigurtaion, ICookie} from "../../models/app-config";
-import {Response, Headers, RequestOptions, Http} from '@angular/http';
 import {Cookie2Service} from "./cookie.service";
 import { Observable } from 'rxjs/Observable';
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
+import { IUserProperties } from "app/models";
+import { CacheService } from "app/ng2/services/cache.service";
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable()
 export class AuthenticationService {
 
-    constructor(private cookieService:Cookie2Service, private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+    private _loggedinUser:IUserProperties;
+    
+    constructor(private cookieService:Cookie2Service, private http: HttpClient, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig, private cacheService: CacheService) {
         this.cookieService = cookieService;
-        this.http = http;
     }
 
-    private getAuthHeaders():any {
+    private getAuthHeaders():HttpHeaders {
         let cookie:ICookie = this.sdcConfig.cookie;
-        let authHeaders:any = {};
-        authHeaders[cookie.userFirstName] = this.cookieService.getFirstName();
-        authHeaders[cookie.userLastName] = this.cookieService.getLastName();
-        authHeaders[cookie.userEmail] = this.cookieService.getEmail();
-        authHeaders[cookie.userIdSuffix] = this.cookieService.getUserId();
+        let authHeaders: HttpHeaders = new HttpHeaders();
+        authHeaders = authHeaders.set(cookie.userFirstName, this.cookieService.getFirstName())
+        .set(cookie.userLastName, this.cookieService.getLastName())
+        .set(cookie.userEmail, this.cookieService.getEmail())
+        .set(cookie.userIdSuffix, this.cookieService.getUserId())
         return authHeaders;
     }
 
-    public authenticate(): Observable<JSON> {
-        let options = new RequestOptions({
-            headers: new Headers(this.getAuthHeaders())
-        });
-
+    public authenticate(): Observable<IUserProperties> {
         let authUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize;
-        return this.http
-            .get(authUrl, options)
-            .map((res: Response) => res.json());
+        return this.http.get<IUserProperties>(authUrl, {headers: this.getAuthHeaders()});
+    }
+
+    public getLoggedinUser():IUserProperties {
+        return this._loggedinUser;
     }
 
+    public setLoggedinUser(loggedinUser:IUserProperties) {
+        this._loggedinUser = loggedinUser;
+        this.cacheService.set('user', loggedinUser);
+    };
+
 }
diff --git a/catalog-ui/src/app/ng2/services/cache.service.ts b/catalog-ui/src/app/ng2/services/cache.service.ts
new file mode 100644
index 0000000000..e876ec1098
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/cache.service.ts
@@ -0,0 +1,49 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Injectable} from "@angular/core";
+import {Dictionary} from "app/utils";
+
+@Injectable()
+export class CacheService {
+    private storage:Dictionary<string, any>;
+
+    constructor() {
+        this.storage = new Dictionary<string, any>();
+    };
+
+    public get(key:string): any {
+        return this.storage.getValue(key);
+    }
+
+    public set(key:string, value:any): void {
+        this.storage.setValue(key, value);
+    }
+
+    public remove(key:string): void {
+        if (this.storage.containsKey(key)) {
+            this.storage.remove(key);
+        }
+    }
+
+    public contains(key:string): boolean {
+        return this.storage.containsKey(key);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/catalog.service.ts b/catalog-ui/src/app/ng2/services/catalog.service.ts
new file mode 100644
index 0000000000..bbdfa1b420
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/catalog.service.ts
@@ -0,0 +1,85 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Injectable, Inject } from "@angular/core";
+import { Observable } from "rxjs/Observable";
+import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+import { Component, IApi, IComponentsArray } from "app/models";
+import { ComponentFactory } from 'app/utils/component-factory';
+import {ResourceType} from "../../utils/constants";
+import {SharingService} from "./sharing.service";
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+@Injectable()
+export class CatalogService {
+    protected api:IApi;
+    protected baseUrl:string;
+    protected baseMicroServiceUrl:string;
+
+    constructor(private http: HttpClient,
+                @Inject(SdcConfigToken) sdcConfig:ISdcConfig,
+                private componentFactory:ComponentFactory,
+                private sharingService:SharingService) {
+        this.api = sdcConfig.api;
+        this.baseUrl = sdcConfig.api.root ;
+        this.baseMicroServiceUrl = sdcConfig.api.uicache_root;
+    }
+
+    public getCatalog(): Observable<Array<Component>> {
+        let searchParams = new HttpParams();
+        searchParams = searchParams.append('excludeTypes', ResourceType.VFCMT).append('excludeTypes', ResourceType.CONFIGURATION);
+        return this.http.get<IComponentsArray>(this.baseMicroServiceUrl + this.api.GET_uicache_catalog, {params: searchParams})
+            .map(res => this.processComponentsResponse(res, true));
+    }
+
+    public getArchiveCatalog() {
+        return this.http.get<IComponentsArray>(this.baseUrl + '/v1/catalog/archive/', {})
+            .map(res => this.processComponentsResponse(res));
+    }
+
+    private processComponentsResponse(componentsArr: IComponentsArray, addSharing:boolean = false) {
+        const componentsList: Component[] = [];
+        if (componentsArr.resources) {
+            componentsList.push(...this.getResourceItems(componentsArr.resources));
+        }
+        if (componentsArr.services) {
+            componentsList.push(...this.getServiceItems(componentsArr.services));
+        }
+        if (addSharing) {
+            componentsList.forEach((item) => this.sharingService.addUuidValue(item.uniqueId, item.uuid));
+        }
+        return componentsList;
+    }
+    
+    private getResourceItems(resources){
+        let resourceItems = resources.map((resource)=>{
+            return this.componentFactory.createResource(resource)
+        })
+        return resourceItems;
+    }
+
+    private getServiceItems(services){
+        let serviceItems = services.map((service)=>{
+            return this.componentFactory.createService(service)
+        })
+        return serviceItems;
+    }
+
+}    
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
index 15750020dc..cc382a3df0 100644
--- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
@@ -19,62 +19,102 @@
  */
 
 import {Injectable, Inject} from '@angular/core';
-import {Response, RequestOptions, Headers} from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import {PropertyFEModel, PropertyBEModel} from "app/models";
-import {CommonUtils} from "app/utils";
-import {Component, ComponentInstance, Capability, PropertyModel} from "app/models";
-import { HttpService } from '../http.service';
+import {CommonUtils, ComponentType, ServerTypeUrl, ComponentInstanceFactory} from "app/utils";
+import {Component, ComponentInstance, Capability, PropertyModel, ArtifactGroupModel, ArtifactModel, AttributeModel, IFileDownload} from "app/models";
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { InputBEModel } from '../../../models/properties-inputs/input-be-model';
+import { HttpHelperService } from '../http-hepler.service';
 
 @Injectable()
 export class ComponentInstanceServiceNg2 {
 
     protected baseUrl;
 
-    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
+    private getServerTypeUrl = (componentType:string):string => {
+        switch (componentType) {
+            case ComponentType.SERVICE:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
     getComponentInstanceProperties(component: Component, componentInstanceId: string): Observable<Array<PropertyBEModel>> {
-
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/properties')
-            .map((res: Response) => {
-                return CommonUtils.initBeProperties(res.json());
+        return this.http.get<Array<PropertyBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/properties')
+            .map(res => {
+                return CommonUtils.initBeProperties(res);
         })
     }
 
     getComponentInstanceInputs(component: Component, componentInstance: ComponentInstance): Observable<Array<PropertyBEModel>> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
-            .map((res: Response) => {
-                return CommonUtils.initInputs(res.json());
+        return this.http.get<Array<InputBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstance.uniqueId + '/' + componentInstance.componentUid + '/inputs')
+            .map(res => {
+                return CommonUtils.initInputs(res);
             })
     }
 
-    updateInstanceProperties(component: Component, componentInstanceId: string, properties: PropertyBEModel[]) {
+    getComponentInstanceArtifactsByGroupType = (componentType:string, componentId:string, componentInstanceId:string, artifactGroupType:string):Observable<ArtifactGroupModel> => {
+
+        return this.http.get<ArtifactGroupModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstances/" + componentInstanceId + "/artifactsByType/" + artifactGroupType)
+            .map(res => {
+                return new ArtifactGroupModel(res);
+            });
+    };
+
+    getArtifactByGroupType = (componentType:string, componentId:string, artifactGroupType:string):Observable<ArtifactGroupModel> => {
+        
+        return this.http.get<ArtifactGroupModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/artifactsByType/" + artifactGroupType)
+            .map(response => new ArtifactGroupModel(response));
+    };
+
+    changeResourceInstanceVersion = (componentType:string, componentId:string, componentInstanceId:string, componentUid:string):Observable<ComponentInstance> => {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId + '/changeVersion', {'componentUid': componentUid})
+        .map((res) => {
+            return ComponentInstanceFactory.createComponentInstance(res);
+        })
+    };
 
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/properties', properties)
-            .map((res: Response) => {
-                return res.json().map((resProperty) => new PropertyBEModel(resProperty));
+    updateComponentInstance = (componentType:string, componentId:string, componentInstance:ComponentInstance):Observable<ComponentInstance> => {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance.toJSON())
+            .map((response) => {
+                return ComponentInstanceFactory.createComponentInstance(response);
+            });
+    };
+
+    updateInstanceProperties(componentType:string, componentId:string, componentInstanceId: string, properties: PropertyBEModel[]) {
+
+        return this.http.post<Array<PropertyModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId + '/properties', properties)
+            .map((res) => {
+                return res.map((resProperty) => {
+                    let newProp = new PropertyModel(resProperty);
+                    newProp.resourceInstanceUniqueId = componentInstanceId
+                    return newProp;
+                });
             });
     }
 
-    getInstanceCapabilityProperties(component: Component, componentInstanceId: string, capability: Capability): Observable<Array<PropertyModel>> {
+    getInstanceCapabilityProperties(componentType: string, componentId: string, componentInstanceId: string, capability: Capability): Observable<Array<PropertyModel>> {
 
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' + capability.type +
+        return this.http.get<Array<PropertyModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/componentInstances/' + componentInstanceId + '/capability/' + capability.type +
             '/capabilityName/' +  capability.name + '/ownerId/' + capability.ownerId + '/properties')
-            .map((res: Response) => {
-                capability.properties = res.json().map((capProp) => new PropertyModel(capProp));  // update capability properties
+            .map((res) => {
+                capability.properties = res.map((capProp) => new PropertyModel(capProp));  // update capability properties
                 return capability.properties;
             })
     }
 
     updateInstanceCapabilityProperties(component: Component, componentInstanceId: string, capability: Capability, properties: PropertyBEModel[]): Observable<Array<PropertyModel>> {
 
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' +  capability.type +
+        return this.http.put<Array<PropertyModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' +  capability.type +
             '/capabilityName/' +  capability.name + '/ownerId/' + capability.ownerId + '/properties', properties)
-            .map((res: Response) => {
-                const savedProperties: PropertyModel[] = res.json().map((resProperty) => new PropertyModel(resProperty));
+            .map((res) => {
+                const savedProperties: PropertyModel[] = res.map((resProperty) => new PropertyModel(resProperty));
                 savedProperties.forEach((savedProperty) => {
                     const propIdx = capability.properties.findIndex((p) => p.uniqueId === savedProperty.uniqueId);
                     if (propIdx !== -1) {
@@ -87,37 +127,87 @@ export class ComponentInstanceServiceNg2 {
 
     updateInstanceInputs(component: Component, componentInstanceId: string, inputs: PropertyBEModel[]): Observable<PropertyBEModel[]> {
 
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/inputs', inputs)
-            .map((res: Response) => {
-                return res.json().map((resInput) => new PropertyBEModel(resInput));
+        return this.http.post<Array<PropertyModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/inputs', inputs)
+            .map((res) => {
+                return res.map((resInput) => new PropertyBEModel(resInput));
             });
     }
 
     getComponentGroupInstanceProperties(component: Component, groupInstanceId: string): Observable<Array<PropertyBEModel>> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties')
-            .map((res: Response) => {
-                return CommonUtils.initBeProperties(res.json());
+        return this.http.get<Array<PropertyBEModel>>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties')
+            .map((res) => {
+                return CommonUtils.initBeProperties(res);
+            });
+    }
+
+    updateComponentGroupInstanceProperties(componentType:string, componentId:string, groupInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
+        return this.http.put<Array<PropertyBEModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/groups/' + groupInstanceId + '/properties', properties)
+            .map((res) => {
+                return res.map((resProperty) => new PropertyBEModel(resProperty));
             });
     }
 
-    updateComponentGroupInstanceProperties(component: Component, groupInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/groups/' + groupInstanceId + '/properties', properties)
-            .map((res: Response) => {
-                return res.json().map((resProperty) => new PropertyBEModel(resProperty));
+    getComponentPolicyInstanceProperties(componentType:string, componentId:string, policyInstanceId: string): Observable<Array<PropertyBEModel>> {
+        return this.http.get<Array<PropertyBEModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/policies/' + policyInstanceId + '/properties')
+            .map((res) => {
+                return CommonUtils.initBeProperties(res);
             });
     }
 
-    getComponentPolicyInstanceProperties(component: Component, policyInstanceId: string): Observable<Array<PropertyBEModel>> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policyInstanceId + '/properties')
-            .map((res: Response) => {
-                return CommonUtils.initBeProperties(res.json());
+    updateComponentPolicyInstanceProperties(componentType:string, componentId:string, policyInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
+        return this.http.put<Array<PropertyBEModel>>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/policies/' + policyInstanceId + '/properties', properties)
+            .map((res) => {
+                return res.map((resProperty) => new PropertyBEModel(resProperty));
             });
     }
 
-    updateComponentPolicyInstanceProperties(component: Component, policyInstanceId: string, properties: PropertyBEModel[]): Observable<Array<PropertyBEModel>> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policyInstanceId + '/properties', properties)
-            .map((res: Response) => {
-                return res.json().map((resProperty) => new PropertyBEModel(resProperty));
+    addInstanceArtifact = (componentType:string, componentId:string, instanceId:string, artifact:ArtifactModel):Observable<ArtifactModel> => {
+        // let deferred = this.$q.defer<ArtifactModel>();
+        let headerObj = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.set('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + instanceId + '/artifacts', JSON.stringify(artifact), {headers: headerObj})
+        .map((res) => {
+            return new ArtifactModel(res);
+        });
+    };
+
+    updateInstanceArtifact = (componentType:string, componentId:string, instanceId:string, artifact:ArtifactModel):Observable<ArtifactModel> => {
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + instanceId + '/artifacts/' + artifact.uniqueId, artifact).map((res) => {
+            return new ArtifactModel(res);
+        });;
+    };
+
+    deleteInstanceArtifact = (componentId:string, componentType:string, instanceId:string, artifactId:string, artifactLabel:string):Observable<ArtifactModel> => {
+        return this.http.delete<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstance/" + instanceId + '/artifacts/' + artifactId + '?operation=' + artifactLabel)
+            .map((res) => {
+                return new ArtifactModel(res);
             });
     }
+
+    downloadInstanceArtifact = (componentType:string, componentId:string, instanceId:string, artifactId:string):Observable<IFileDownload> => {
+        return this.http.get<IFileDownload>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstances/" + instanceId + "/artifacts/" + artifactId);
+    };
+
+    uploadInstanceEnvFile = (componentType:string, componentId:string, instanceId:string, artifact:ArtifactModel):Observable<ArtifactModel> => {
+        let headerObj = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.set('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + instanceId + '/artifacts/' + artifact.uniqueId, JSON.stringify(artifact), {headers: headerObj});
+    };
+
+
+    updateInstanceAttribute = (componentType:string, componentId:string, attribute:AttributeModel):Observable<AttributeModel> => {
+        let instanceId = attribute.resourceInstanceUniqueId;
+        return this.http.post<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + "/resourceInstance/" + instanceId + "/attribute", attribute)
+            .map((response) => {
+                let newAttribute = new AttributeModel(response);
+                newAttribute.readonly = true;
+                newAttribute.resourceInstanceUniqueId = instanceId;
+                return newAttribute;
+            });
+    };
+
 }
diff --git a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
index b0cc1b8f1a..9952b03c7c 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts
@@ -24,7 +24,7 @@
 import { Injectable } from '@angular/core';
 import {WorkspaceMode, ComponentState, Role} from "../../../utils/constants";
 import { Component as ComponentData } from "app/models";
-import { CacheService } from "app/services/cache-service"
+import { CacheService } from "app/services-ng2";
 
 @Injectable()
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
index 6e9d0e8031..15e5a7960a 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.factory.ts
@@ -20,15 +20,18 @@
 
 
 import {Injectable} from "@angular/core";
-import {Component} from "../../../models/components/component";
+import {Component} from "app/models";
 import {ComponentServiceNg2} from "./component.service";
 import {ServiceServiceNg2} from "./service.service";
+import {CacheService} from "app/services-ng2";
 
 @Injectable()
 export class ComponentServiceFactoryNg2 {
+
     componentService: ComponentServiceNg2;
     serviceService: ServiceServiceNg2;
-    constructor(componentService: ComponentServiceNg2, serviceService: ServiceServiceNg2) {
+
+    constructor(componentService: ComponentServiceNg2, serviceService: ServiceServiceNg2, private cacheService:CacheService) {
         this.serviceService = serviceService;
         this.componentService = componentService;
     }
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index 445e1231f9..760bfc591b 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -23,51 +23,52 @@ import {Injectable, Inject} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import {Response, URLSearchParams, Headers} from '@angular/http';
-import { Component, ComponentInstance, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData,
-    PropertyBEModel, InterfaceModel, OperationModel, BEOperationModel, Capability, Requirement, PolicyInstance} from "app/models";
-import {COMPONENT_FIELDS, CommonUtils, SERVICE_FIELDS} from "app/utils";
-import {downgradeInjectable} from '@angular/upgrade/static';
+import { Component, InputBEModel, InstancePropertiesAPIMap, FilterPropertiesAssignmentData, OperationModel, CreateOperationResponse, ArtifactModel} from "app/models";
+import {COMPONENT_FIELDS} from "app/utils";
 import {ComponentGenericResponse} from "../responses/component-generic-response";
 import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
 import {API_QUERY_PARAMS} from "app/utils";
-import { ComponentType, ServerTypeUrl } from "../../../utils/constants";
-import { HttpService } from '../http.service';
+import {ComponentType, ServerTypeUrl, SERVICE_FIELDS} from "../../../utils/constants";
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
-import {ConstraintObject} from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
 import {IDependenciesServerResponse} from "../responses/dependencies-server-response";
 import {AutomatedUpgradeGenericResponse} from "../responses/automated-upgrade-response";
 import {IAutomatedUpgradeRequestObj} from "../../pages/automated-upgrade/automated-upgrade.service";
-
-declare var angular:angular.IAngularStatic;
-
+import {ComponentInstance} from "../../../models/componentsInstances/componentInstance";
+import {CommonUtils} from "../../../utils/common-utils";
+import {RelationshipModel} from "../../../models/graph/relationship";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
+import { BEOperationModel, InterfaceModel } from "../../../models/operation";
+import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
+import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
+import { Requirement } from "../../../models/requirement";
+import { Capability } from "../../../models/capability";
+
+/*
+PLEASE DO NOT USE THIS SERVICE IN ANGULAR2! Use the topology-template.service instead
+ */
 @Injectable()
 export class ComponentServiceNg2 {
 
     protected baseUrl;
 
-    constructor(protected http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
-    protected getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array<string>):Observable<ComponentGenericResponse> {
+    protected getComponentDataByFieldsName(componentType:string, componentId:string, fields:Array<string>):Observable<ComponentGenericResponse> {
 
-        let params:URLSearchParams = new URLSearchParams();
+        let params: HttpParams = new HttpParams();
         _.forEach(fields, (field:string):void => {
-            params.append(API_QUERY_PARAMS.INCLUDE, field);
+            params = params.append(API_QUERY_PARAMS.INCLUDE, field);
         });
 
-        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params})
-            .map((res:Response) => {
-                return this.analyzeComponentDataResponse(res);
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {params: params})
+            .map((res) => {
+                return new ComponentGenericResponse().deserialize(res);
             });
     }
-
-    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
-        return new ComponentGenericResponse().deserialize(res.json());
-    }
-
-    private getServerTypeUrl = (componentType:string):string => {
+    protected getServerTypeUrl = (componentType:string):string => {
         switch (componentType) {
             case ComponentType.SERVICE:
                 return ServerTypeUrl.SERVICES;
@@ -76,15 +77,23 @@ export class ComponentServiceNg2 {
         }
     }
 
-    getComponentMetadata(component:Component):Observable<ComponentGenericResponse> {
-        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    getFullComponent(uniqueId:string):Observable<ComponentGenericResponse> {
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + uniqueId)
+            .map((res) => {
+                return new ComponentGenericResponse().deserialize(res);
+            });
     }
 
+    getComponentMetadata(uniqueId:string, type:string):Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+
     getComponentInstanceAttributesAndProperties(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
     }
 
-    getComponentInstanceProperties(component:Component):Observable<ComponentGenericResponse> {
+    getComponentInstanceProperties(component:Component): Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES]);
     }
 
@@ -132,17 +141,15 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
     }
 
-    getInterfaces(component:Component):Observable<ComponentGenericResponse> {
+    getInterfaceOperations(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INTERFACE_OPERATIONS]);
     }
 
     getInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.get<OperationModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations/' + operation.uniqueId);
     }
 
+    // tslint:disable-next-line:member-ordering
     createInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
         const operationList = {
             'interfaces': {
@@ -154,9 +161,9 @@ export class ComponentServiceNg2 {
                 }
             }
         };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
-            .map((res:Response) => {
-                const interf:InterfaceModel = _.find(res.json().interfaces, interf => interf.type === operation.interfaceType);
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res:any) => {
+                const interf:InterfaceModel = _.find(res.interfaces, interf => interf.type === operation.interfaceType);
                 const newOperation:OperationModel = _.find(interf.operations, op => op.name === operation.name);
                 return new OperationModel({
                     ...newOperation,
@@ -167,21 +174,22 @@ export class ComponentServiceNg2 {
             });
     }
 
+    // tslint:disable-next-line:member-ordering
     updateInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
         const operationList = {
-            'interfaces': {
+            interfaces: {
                 [operation.interfaceType]: {
-                    'type': operation.interfaceType,
-                    'operations': {
+                    type: operation.interfaceType,
+                    operations: {
                         [operation.name]: new BEOperationModel(operation)
                     }
                 }
             }
         };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
-            .map((res:Response) => {
-                const interf:InterfaceModel = _.find(res.json().interfaces, interf => interf.type === operation.interfaceType);
-                const newOperation:OperationModel = _.find(interf.operations, op => op.name === operation.name);
+        return this.http.put<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaceOperations', operationList)
+            .map((res: any) => {
+                const interf: InterfaceModel = _.find(res.interfaces, interf => interf.type === operation.interfaceType);
+                const newOperation: OperationModel = _.find(interf.operations, op => op.name === operation.name);
                 return new OperationModel({
                     ...newOperation,
                     interfaceType: interf.type,
@@ -191,18 +199,16 @@ export class ComponentServiceNg2 {
             });
     }
 
-    deleteInterfaceOperation(component:Component, operation:OperationModel):Observable<OperationModel> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId)
-            .map((res:Response) => {
-                return res.json();
-            });
+
+    deleteInterfaceOperation(component: Component, operation:OperationModel):Observable<OperationModel> {
+        return this.http.delete<OperationModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId);
     }
 
     getInterfaceTypes(component:Component):Observable<{[id:string]: Array<string>}> {
-        return this.http.get(this.baseUrl + 'interfaceLifecycleTypes')
-            .map((res:Response) => {
+        return this.http.get<any>(this.baseUrl + 'interfaceLifecycleTypes')
+            .map((res: any) => {
                 const interfaceMap = {};
-                _.forEach(res.json(), (interf:any) => {
+                _.forEach(res, (interf: any) => {
                     interfaceMap[interf.toscaPresentation.type] = _.keys(interf.toscaPresentation.operations);
                 });
                 return interfaceMap;
@@ -217,19 +223,18 @@ export class ComponentServiceNg2 {
             payloadData: oldOperation.artifactData
         };
 
-        const headers = new Headers();
+        const headers = new HttpHeaders();
         JSON.stringify(payload);
         const payloadString = JSON.stringify(payload, null, '  ');
         const md5Result = md5(payloadString).toLowerCase();
         headers.append('Content-MD5', btoa(md5Result));
 
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uuid + '/interfaces/' + newOperation.interfaceId + '/operations/' + newOperation.uniqueId + '/artifacts/' + newOperation.implementation.artifactUUID,
-                payload,
-                {headers}
-            ).map((res: Response) => {
-                const fileName = res.json().artifactDisplayName || res.json().artifactName;
+                payload, {headers}
+            ).map((res: any) => {
+                const fileName = res.artifactDisplayName || res.artifactName;
                 newOperation.artifactFileName = fileName;
-                return res.json();
+                return res;
             });
     }
 
@@ -237,78 +242,17 @@ export class ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
     }
 
-    createCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
-        let capBEObj = {
-            'capabilities': {
-                [capabilityData.type]: [capabilityData]
-            }
-        };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    updateCapability(component: Component, capabilityData: Capability): Observable<Array<Capability>> {
-        let capBEObj = {
-            'capabilities': {
-                [capabilityData.type]: [capabilityData]
-            }
-        };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities', capBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    deleteCapability(component: Component, capId: string): Observable<Capability> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
-    createRequirement(component: Component, requirementData: Requirement): Observable<any> {
-        let reqBEObj = {
-            'requirements': {
-                [requirementData.capability]: [requirementData]
-            }
-        };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    updateRequirement(component: Component, requirementData: Requirement): Observable<any> {
-        let reqBEObj = {
-            'requirements': {
-                [requirementData.capability]: [requirementData]
-            }
-        };
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements', reqBEObj)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId)
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
 
     getDeploymentGraphData(component:Component):Observable<ComponentGenericResponse> {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
     }
 
     createInput(component:Component, inputsToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
-        let inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs)
-            .map(res => {
-                return res.json();
-            })
+        const inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
     }
 
     createListInput(component:Component, input:any, isSelf:boolean):Observable<any> {
@@ -324,10 +268,7 @@ export class ComponentServiceNg2 {
         } else {
             inputs = input;
         }
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/listInput', inputs)
-            .map(res => {
-                return res.json();
-            })
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/listInput', inputs);
     }
 
     createPolicy(component:Component, policiesToCreate:InstancePropertiesAPIMap, isSelf:boolean):Observable<any> {
@@ -341,78 +282,71 @@ export class ComponentServiceNg2 {
                         ...policiesToCreate.componentInstanceProperties
                     }
                 };
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList)
-            .map(res => {
-                return res.json();
-            });
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList);
     }
 
     deletePolicy(component:Component, policy: PolicyInstance) {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy)
-            .map(res => {
-                return res.json();
-            });
+        return this.http.put<PolicyInstance>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy);
     }
 
-    restoreComponent(componentType:string, componentId:string){
+    restoreComponent(componentType:string, componentId:string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {})
     }
 
-    archiveComponent(componentType:string, componentId:string){
+    archiveComponent(componentType:string, componentId:string) {
         return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {})
     }
 
 
     deleteInput(component:Component, input:InputBEModel):Observable<InputBEModel> {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
-            .map((res:Response) => {
-                return new InputBEModel(res.json());
-            });
+
+        return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res) => {
+                return new InputBEModel(res);
+            })
     }
 
     updateComponentInputs(component:Component, inputs:InputBEModel[]):Observable<InputBEModel[]> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
-            .map((res:Response) => {
-                return res.json().map((input) => new InputBEModel(input));
+
+        return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
+            .map((res) => {
+                return res.map((input) => new InputBEModel(input));
             })
     }
 
-    filterComponentInstanceProperties(component: Component, filterData:FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {//instance-property-be-map
-        let params: URLSearchParams = new URLSearchParams();
+    filterComponentInstanceProperties(component:Component, filterData:FilterPropertiesAssignmentData):Observable<InstanceBePropertiesMap> {//instance-property-be-map
+        let params: HttpParams = new HttpParams();
         _.forEach(filterData.selectedTypes, (type:string) => {
-            params.append('resourceType', type);
+            params = params.append('resourceType', type);
         });
 
-        return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {search: params})
-            .map((res: Response) => {
-                return res.json();
-            });
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
     }
 
     createServiceProperty(component: Component, propertyModel:PropertyBEModel): Observable<PropertyBEModel> {
         let serverObject = {};
         serverObject[propertyModel.name] = propertyModel;
         return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', serverObject)
-            .map(res => {
-                let property:PropertyBEModel = new PropertyBEModel(res.json());
+            .map((res: PropertyBEModel) => {
+                const property: PropertyBEModel = new PropertyBEModel(res);
                 return property;
             })
     }
 
-    getServiceProperties(component: Component): Observable<Array<PropertyBEModel>> {
+    getServiceProperties(component: Component): Observable<PropertyBEModel[]> {
         return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties')
-            .map((res: Response) => {
-                if (!res.text()){
+            .map((res: PropertyBEModel[]) => {
+                if (!res) {
                     return new Array<PropertyBEModel>();
                 }
-                return CommonUtils.initBeProperties(res.json());
+                return CommonUtils.initBeProperties(res);
             });
     }
 
     updateServiceProperties(component: Component, properties: PropertyBEModel[]) {
-        return this.http.put( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
-            .map((res: Response) => {
-                const resJson = res.json();
+        return this.http.put<PropertyBEModel[]>( this.baseUrl + component.getTypeUrl() + component.uniqueId + '/properties', properties)
+            .map((res) => {
+                const resJson = res;
                 return _.map(resJson,
                     (resValue:PropertyBEModel) => new PropertyBEModel(resValue));
             });
@@ -425,25 +359,16 @@ export class ComponentServiceNg2 {
             })
     }
 
-    getDependencies(componentType:string, componentId: string):Observable<Array<IDependenciesServerResponse>> {
-        return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies')
-            .map((res:Response) => {
-                return res.json();
-            });
+    getDependencies(componentType:string, componentId: string):Observable<IDependenciesServerResponse[]> {
+        return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
     }
 
-    automatedUpgrade(componentType:string, componentId: string, componentsIdsToUpgrade:Array<IAutomatedUpgradeRequestObj>):Observable<AutomatedUpgradeGenericResponse> {
-        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade)
-            .map((res:Response) => {
-                return res.json();
-            });
+    automatedUpgrade(componentType:string, componentId:string, componentsIdsToUpgrade:IAutomatedUpgradeRequestObj[]):Observable<AutomatedUpgradeGenericResponse> {
+        return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade);
     }
 
-    updateComponentInstance(component:Component, componentInstance:ComponentInstance):Observable<ComponentInstance> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance)
-            .map((res:Response) => {
-                return res.json();
-            });
+    updateMultipleComponentInstances(componentId:string, instances:ComponentInstance[]):Observable<ComponentInstance[]> {
+        return this.http.post<ComponentInstance[]>(this.baseUrl + componentId + '/resourceInstance/multipleComponentInstance', instances);
     }
 
     getServiceFilterConstraints(component:Component):Observable<ComponentGenericResponse> {
@@ -451,24 +376,18 @@ export class ComponentServiceNg2 {
     }
 
     createServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraint:ConstraintObject):Observable<any> {
-        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter', constraint)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.post<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter', constraint);
     }
 
-    updateServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraints:Array<ConstraintObject>):Observable<any> {
-        return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/', constraints)
-            .map((res:Response) => {
-                return res.json();
-            });
+    updateServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraints:ConstraintObject[]):Observable<any> {
+        return this.http.put<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/', constraints);
     }
 
     deleteServiceFilterConstraints(component:Component, componentInstance:ComponentInstance, constraintIndex:number) {
-        return this.http.delete(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/' + constraintIndex)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.delete<any>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstances/' + componentInstance.uniqueId + '/nodeFilter/' + constraintIndex);
     }
-}
 
+    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
+        return new ComponentGenericResponse().deserialize(res);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
index 699e762a60..d20f5415bc 100644
--- a/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/resource.service.ts
@@ -21,14 +21,14 @@
 import { Injectable } from '@angular/core';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import { Http, Response, Headers, RequestOptions } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class ResourceServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(private http: Http) {
+    constructor(private http: HttpClient) {
 
     }
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
index dce4e814ec..9460a32323 100644
--- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -22,9 +22,7 @@ import { Injectable, Inject } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
-import { Response, URLSearchParams } from '@angular/http';
-import {Service, OperationModel} from "app/models";
-import { HttpService } from '../http.service';
+import {Service} from "app/models";
 
 import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
 import {ForwardingPath} from "app/models/forwarding-path";
@@ -34,77 +32,53 @@ import {Component} from "app/models/components/component";
 import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response";
 import {COMPONENT_FIELDS, SERVICE_FIELDS} from "app/utils/constants";
 import {ComponentServiceNg2} from "./component.service";
-import {ServiceGenericResponse} from "app/ng2/services/responses/service-generic-response";
 import {ServicePathMapItem} from "app/models/graph/nodes-and-links-map";
-import {ConsumptionInput} from 'app/ng2/components/logic/service-consumption/service-consumption.component';
-
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { OperationModel } from '../../../models/operation';
+import { ConsumptionInput } from '../../components/logic/service-consumption/service-consumption.component';
 
 @Injectable()
 export class ServiceServiceNg2 extends ComponentServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(protected http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         super(http, sdcConfig);
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
     validateConformanceLevel(service: Service): Observable<boolean> {
 
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation')
-            .map((res: Response) => {
-                return res.json();
-            });
-    }
-
-    getNodesAndLinksMap(service: Service):Observable<Array<ServicePathMapItem>> {
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/linksMap').map(res => {
-            return <Array<ServicePathMapItem>>res.json();
-        });
-    }
-
-    getServicePath(service: Service, id: string):Observable<any> {
-        return this.http.get(this.baseUrl  + service.getTypeUrl() + service.uniqueId +  '/paths/' + id)
-            .map(res => {
-                return res.json();
-            })
+        return this.http.get<boolean>(this.baseUrl + service.getTypeUrl() + service.uuid + '/conformanceLevelValidation');
     }
 
-    getServicePaths(service: Service):Observable<any> {
-        return this.http.get(this.baseUrl  + service.getTypeUrl() + service.uniqueId +  '/paths')
-            .map(res => {
-                return res.json();
-            })
+    getNodesAndLinksMap(serviceId: string):Observable<Array<ServicePathMapItem>> {
+        return this.http.get<Array<ServicePathMapItem>>(this.baseUrl + 'services/' + serviceId + '/linksMap');
     }
 
-    createOrUpdateServicePath(service: Service, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
+    createOrUpdateServicePath(serviceId: string, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
         if (inputsToCreate.uniqueId) {
-            return this.updateServicePath(service, inputsToCreate);
+            return this.updateServicePath(serviceId, inputsToCreate);
         } else {
-            return this.createServicePath(service, inputsToCreate);
+            return this.createServicePath(serviceId, inputsToCreate);
         }
     }
 
-    createServicePath(service: Service, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
+    createServicePath(serviceId: string, inputsToCreate: ForwardingPath):Observable<ForwardingPath> {
         let input = new ServicePathRequestData(inputsToCreate);
-
-        return this.http.post(this.baseUrl  + service.getTypeUrl() + service.uniqueId +   '/paths', input)
-            .map(res => {
-                return this.parseServicePathResponse(res);
-            });
+        return this.http.post<ForwardingPath>(this.baseUrl  + 'services/' + serviceId +   '/paths', input).map((res:any) => {
+            return this.parseServicePathResponse(res);
+        });
     }
 
-    deleteServicePath(service: Service, id: string):Observable<any> {
-        return this.http.delete(this.baseUrl  + service.getTypeUrl() + service.uniqueId + '/paths/' + id )
-            .map((res) => {
-                return res.json();
-            });
+    deleteServicePath(serviceId: string, id: string):Observable<any> {
+        return this.http.delete<any>(this.baseUrl  + 'services/' + serviceId + '/paths/' + id);
     }
 
-    updateServicePath(service: Service, inputsToUpdate:ForwardingPath):Observable<ForwardingPath> {
+    updateServicePath(serviceId: string, inputsToUpdate:ForwardingPath):Observable<ForwardingPath> {
         let input = new ServicePathRequestData(inputsToUpdate);
 
-        return this.http.put(this.baseUrl  + service.getTypeUrl() + service.uniqueId + '/paths', input)
+        return this.http.put<{[key:string]:ForwardingPath}>(this.baseUrl  + 'services/' + serviceId + '/paths', input)
             .map((res) => {
                 return this.parseServicePathResponse(res);
             });
@@ -122,28 +96,25 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
     }
 
     getServiceConsumptionInputs(service: Service, serviceInstanceId: String, interfaceId: string, operation: OperationModel): Observable<any> {
-        return this.http.get(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId + '/operations/' + operation.uniqueId + '/inputs')
-            .map(res => {
-                return res.json();
-            });
+        return this.http.get<any>(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId +
+            '/operations/' + operation.uniqueId + '/inputs');
     }
 
     createOrUpdateServiceConsumptionInputs(service: Service, serviceInstanceId: String, consumptionInputsList: Array<{[id: string]: Array<ConsumptionInput>}>): Observable<any> {
         return this.http.post(this.baseUrl + service.getTypeUrl() + service.uniqueId + '/consumption/' + serviceInstanceId, consumptionInputsList);
     }
 
-    checkComponentInstanceVersionChange(service: Service, newVersionId: string):Observable<Array<string>> {
-        let instanceId = service.selectedInstance.uniqueId;
-        let queries = {componentInstanceId: instanceId, newComponentInstanceId: newVersionId};
+    checkComponentInstanceVersionChange(componentType:string, componentId:string, instanceId:string, newInstanceId:string):Observable<Array<string>> {
+        let queries = {componentInstanceId: instanceId, newComponentInstanceId: newInstanceId};
 
-        let params:URLSearchParams = new URLSearchParams();
+        let params:HttpParams = new HttpParams();
         _.map(_.keys(queries), (key:string):void => {
-            params.append(key, queries[key]);
+            params = params.append(key, queries[key]);
         });
 
-        let url = this.baseUrl + service.getTypeUrl() + service.uniqueId + '/paths-to-delete';
-        return this.http.get(url, {search: params}).map((res: Response) => {
-            return res.json().forwardingPathToDelete;
+        let url = this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/paths-to-delete';
+        return this.http.get<any>(url, {params: params}).map((res) => {
+            return res.forwardingPathToDelete;
         });
     }
 
@@ -151,12 +122,8 @@ export class ServiceServiceNg2 extends ComponentServiceNg2 {
         return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, SERVICE_FIELDS.FORWARDING_PATHS, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
     }
 
-    protected analyzeComponentDataResponse(res: Response):ComponentGenericResponse {
-        return new ServiceGenericResponse().deserialize(res.json());
-    }
-
-    private parseServicePathResponse(res: Response):ForwardingPath {
-        let resJSON = res.json();
+    private parseServicePathResponse(res: { [key:string]:ForwardingPath }):ForwardingPath {
+        let resJSON = res;
         let pathId = Object.keys(resJSON.forwardingPaths)[0];
         let forwardingPath = resJSON.forwardingPaths[pathId];
         let path:ForwardingPath = new ForwardingPath();
diff --git a/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
new file mode 100644
index 0000000000..0abb163404
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/component-services/topology-template.service.ts
@@ -0,0 +1,515 @@
+/**
+ * Created by ob0695 on 6/26/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import * as _ from "lodash";
+import {Injectable, Inject} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import {
+    Component,
+    InputBEModel,
+    InstancePropertiesAPIMap,
+    FilterPropertiesAssignmentData,
+    ArtifactModel,
+    PropertyModel,
+    IFileDownload,
+    AttributeModel,
+    IAttributeModel, Capability, Requirement
+} from "app/models";
+import {ArtifactGroupType, COMPONENT_FIELDS} from "app/utils";
+import {ComponentGenericResponse} from "../responses/component-generic-response";
+import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
+import {API_QUERY_PARAMS} from "app/utils";
+import {ComponentType, ServerTypeUrl, SERVICE_FIELDS} from "../../../utils/constants";
+import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config";
+import {IDependenciesServerResponse} from "../responses/dependencies-server-response";
+import {AutomatedUpgradeGenericResponse} from "../responses/automated-upgrade-response";
+import {IAutomatedUpgradeRequestObj} from "../../pages/automated-upgrade/automated-upgrade.service";
+import {ComponentInstance} from "../../../models/componentsInstances/componentInstance";
+import {CommonUtils} from "../../../utils/common-utils";
+import {RelationshipModel} from "../../../models/graph/relationship";
+import {ServiceGenericResponse} from "../responses/service-generic-response";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
+import { HttpHelperService } from "../http-hepler.service";
+import {
+    Component as TopologyTemplate,
+    FullComponentInstance,
+    Service,
+    OperationModel,
+} from 'app/models';
+import { ConsumptionInput } from "../../components/logic/service-consumption/service-consumption.component";
+import { ConstraintObject } from "../../components/logic/service-dependencies/service-dependencies.component";
+import { ComponentMetadata } from "../../../models/component-metadata";
+import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
+import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
+
+/* we need to use this service from now, we will remove component.service when we finish remove the angular1.
+ The service is duplicated since we can not use downgrades service with NGXS*/
+
+@Injectable()
+export class TopologyTemplateService {
+
+    protected baseUrl;
+
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    getFullComponent(componentType: string, uniqueId: string): Observable<Component> {
+        return this.http.get<Component>(this.baseUrl + this.getServerTypeUrl(componentType) + uniqueId);
+    }
+
+    getComponentMetadata(uniqueId: string, type: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_METADATA]);
+    }
+
+    getComponentInstanceAttributesAndProperties(uniqueId: string, type: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(type, uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_INSTANCES_ATTRIBUTES]);
+    }
+
+    async getComponentAttributes(componentType: string, componentId: string): Promise<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_ATTRIBUTES]).toPromise();
+    }
+
+    getComponentCompositionData(componentUniqueId: string, componentType: string): Observable<ComponentGenericResponse> {
+        const params: string[] = [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES,
+            COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS];
+        if (componentType === ComponentType.SERVICE) {
+            params.push(COMPONENT_FIELDS.FORWARDING_PATHS);
+        }
+        return this.getComponentDataByFieldsName(componentType, componentUniqueId, params);
+    }
+
+    getComponentResourcePropertiesData(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId,
+            [COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_POLICIES, COMPONENT_FIELDS.COMPONENT_NON_EXCLUDED_GROUPS]);
+    }
+
+    getComponentResourceInstances(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentInputs(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INPUTS]);
+    }
+
+    getComponentInputsWithProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_INPUTS, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES, COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getComponentDeploymentArtifacts(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifacts(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS]);
+    }
+
+    getComponentInformationalArtifactsAndInstances(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS, COMPONENT_FIELDS.COMPONENT_INSTANCES]);
+    }
+
+    getComponentToscaArtifacts(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS]);
+    }
+
+    getComponentProperties(component: Component): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(component.componentType, component.uniqueId, [COMPONENT_FIELDS.COMPONENT_PROPERTIES]);
+    }
+
+    getCapabilitiesAndRequirements(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES]);
+    }
+
+    getRequirementsAndCapabilitiesWithProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId,
+            [COMPONENT_FIELDS.COMPONENT_REQUIREMENTS, COMPONENT_FIELDS.COMPONENT_CAPABILITIES, COMPONENT_FIELDS.COMPONENT_CAPABILITIES_PROPERTIES]);
+    }
+
+    getDeploymentGraphData(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_RELATION, COMPONENT_FIELDS.COMPONENT_INSTANCES, COMPONENT_FIELDS.COMPONENT_GROUPS]);
+    }
+
+    createInput(component: Component, inputsToCreate: InstancePropertiesAPIMap, isSelf: boolean): Observable<any> {
+        const inputs = isSelf ? { serviceProperties: inputsToCreate.componentInstanceProperties } : inputsToCreate;
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/inputs', inputs);
+    }
+
+    restoreComponent(componentType: string, componentId: string) {
+        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/restore', {});
+    }
+
+    archiveComponent(componentType: string, componentId: string) {
+        return this.http.post(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/archive', {});
+    }
+
+    deleteInput(component: Component, input: InputBEModel): Observable<InputBEModel> {
+        return this.http.delete<InputBEModel>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/delete/' + input.uniqueId + '/input')
+            .map((res) => {
+                return new InputBEModel(res);
+            });
+    }
+
+    updateComponentInputs(component: Component, inputs: InputBEModel[]): Observable<InputBEModel[]> {
+        return this.http.post<InputBEModel[]>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/update/inputs', inputs)
+            .map((res) => {
+                return res.map((input) => new InputBEModel(input));
+            });
+    }
+
+    filterComponentInstanceProperties(component: Component, filterData: FilterPropertiesAssignmentData): Observable<InstanceBePropertiesMap> {// instance-property-be-map
+        let params: HttpParams = new HttpParams();
+        _.forEach(filterData.selectedTypes, (type: string) => {
+            params = params.append('resourceType', type);
+        });
+
+        // tslint:disable-next-line:object-literal-shorthand
+        return this.http.get<InstanceBePropertiesMap>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/filteredproperties/' + filterData.propertyName, {params: params});
+    }
+
+    createServiceProperty(componentId: string, propertyModel: PropertyBEModel): Observable<PropertyBEModel> {
+        const serverObject = {};
+        serverObject[propertyModel.name] = propertyModel;
+        return this.http.post<PropertyBEModel>(this.baseUrl + 'services/' + componentId + '/properties', serverObject)
+            .map((res) => {
+                const property: PropertyBEModel = new PropertyBEModel(res);
+                return property;
+            });
+    }
+
+    getServiceProperties(componentId: string): Observable<PropertyBEModel[]> {
+        return this.http.get<any>(this.baseUrl + 'services/' + componentId + '/properties')
+            .map((res) => {
+                if (!res) {
+                    return new Array<PropertyBEModel>();
+                }
+                return CommonUtils.initBeProperties(res);
+            });
+    }
+
+    updateServiceProperties(componentId: string, properties: PropertyBEModel[]) {
+        return this.http.put<any>( this.baseUrl + 'services/' + componentId + '/properties', properties)
+            .map((res) => {
+                const resJson = res;
+                return _.map(resJson,
+                    (resValue: PropertyBEModel) => new PropertyBEModel(resValue));
+            });
+    }
+
+    deleteServiceProperty(componentId: string, property: PropertyBEModel): Observable<string> {
+        return this.http.delete(this.baseUrl + 'services/' + componentId + '/properties/' + property.uniqueId )
+            .map((res: Response) => {
+                return property.uniqueId;
+            });
+    }
+
+    getDependencies(componentType: string, componentId: string): Observable<IDependenciesServerResponse[]> {
+        return this.http.get<IDependenciesServerResponse[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/dependencies');
+    }
+
+    automatedUpgrade(componentType: string, componentId: string, componentsIdsToUpgrade: IAutomatedUpgradeRequestObj[]): Observable<AutomatedUpgradeGenericResponse> {
+        return this.http.post<AutomatedUpgradeGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/automatedupgrade', componentsIdsToUpgrade);
+    }
+
+    updateComponentInstance(componentMetaDataId: string, componentInstance:ComponentInstance): Observable<ComponentInstance> {
+        return this.http.post<ComponentInstance>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstance/' + componentInstance.uniqueId, componentInstance);
+    }
+
+    updateMultipleComponentInstances(componentId: string, componentType: string, instances: ComponentInstance[]): Observable<ComponentInstance[]> {
+        return this.http.post<ComponentInstance[]>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/multipleComponentInstance', instances)
+            .map((res) => {
+                return CommonUtils.initComponentInstances(res);
+            });
+    }
+
+    createRelation(componentId: string, componentType: string, link: RelationshipModel): Observable<RelationshipModel> {
+        return this.http.post<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/associate', link)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    deleteRelation(componentId: string, componentType: string, link: RelationshipModel): Observable<RelationshipModel> {
+        return this.http.put<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/dissociate', link)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    createComponentInstance(componentType: string, componentId: string, componentInstance: ComponentInstance): Observable<ComponentInstance> {
+        return this.http.post<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance', componentInstance)
+            .map((res) => {
+                return new ComponentInstance(res);
+            });
+    }
+
+    deleteComponentInstance(componentType: string, componentId: string, componentInstanceId: string): Observable<ComponentInstance> {
+        return this.http.delete<ComponentInstance>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/resourceInstance/' + componentInstanceId)
+            .map((res) => {
+                return new ComponentInstance(res);
+            });
+    }
+
+    fetchRelation(componentType: string, componentId: string, linkId: string): Observable<RelationshipModel> {
+        return this.http.get<RelationshipModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/relationId/' + linkId)
+            .map((res) => {
+                return new RelationshipModel(res);
+            });
+    }
+
+    addOrUpdateArtifact = (componentType: string, componentId: string, artifact: ArtifactModel): Observable<ArtifactModel> => {
+        let headerObj: HttpHeaders = new HttpHeaders();
+        if (artifact.payloadData) {
+            headerObj = headerObj.append('Content-MD5', HttpHelperService.getHeaderMd5(artifact));
+        }
+
+        let artifactID: string = '';
+        if (artifact.uniqueId) {
+            artifactID = '/' + artifact.uniqueId;
+        }
+        return this.http.post<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts' + artifactID, JSON.stringify(artifact), {headers: headerObj}).map(
+            (res) => new ArtifactModel(res)
+        );
+    }
+
+    deleteArtifact = (componentId: string, componentType: string, artifactId: string, artifactLabel: string): Observable<ArtifactModel> => {
+        return this.http.delete<ArtifactModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts/' + artifactId + '?operation=' + artifactLabel)
+            .map((res) => new ArtifactModel(res));
+    }
+
+    downloadArtifact = (componentType: string, componentId: string, artifactId: string): Observable<IFileDownload> => {
+        return this.http.get<IFileDownload>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/artifacts/' + artifactId);
+    }
+
+    // ------------------------------------------------ Properties API --------------------------------------------------//
+    addProperty = (componentType: string, componentId: string, property: PropertyModel):Observable<PropertyModel> => {
+        return this.http.post<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties', property.convertToServerObject()).map((response) => {
+            return new PropertyModel(response[Object.keys(response)[0]]);
+        });
+    }
+
+    updateProperty = (componentType: string, componentId: string, property: PropertyModel): Observable<PropertyModel> => {
+        var propertiesList:PropertyBEModel[]  = [property];
+        return this.http.put<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties', propertiesList)
+        .map((response) => {
+            return new PropertyModel(response[Object.keys(response)[0]]);
+        });
+    }
+
+    deleteProperty = (componentType: string, componentId: string, propertyId: string): Observable<PropertyModel> => {
+        return this.http.delete<PropertyModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/properties/' + propertyId);
+    }
+
+    // ------------------------------------------------ Attributes API --------------------------------------------------//
+    addAttribute = (componentType: string, componentId: string, attribute: AttributeModel): Observable<AttributeModel> => {
+        return this.http.post<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes', attribute.convertToServerObject())
+            .map((response) => {
+                return new AttributeModel(response);
+            });
+    }
+
+    updateAttribute = (componentType: string, componentId: string, attribute: AttributeModel): Observable<AttributeModel> => {
+        const payload = attribute.convertToServerObject();
+
+        return this.http.put<AttributeModel>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes/' + attribute.uniqueId, payload)
+            .map((response) => {
+                return new AttributeModel(response);
+            });
+    }
+
+    // Async Methods
+    addAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<AttributeModel> => {
+        return this.addAttribute(componentType, componentId, attribute).toPromise();
+    }
+
+    updateAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<AttributeModel> => {
+        return this.updateAttribute(componentType, componentId, attribute).toPromise();
+    }
+
+    deleteAttributeAsync = async (componentType: string, componentId: string, attribute: AttributeModel): Promise<any> => {
+        return this.http.delete<any>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/attributes/' + attribute.uniqueId, {}).toPromise();
+    }
+
+    getArtifactsByType(componentType: string, componentId: string, artifactsType: ArtifactGroupType) {
+        return this.getComponentDataByFieldsName(componentType, componentId, [this.convertArtifactTypeToUrl(artifactsType)]);
+    }
+
+    getServiceConsumptionData(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [
+            // COMPONENT_FIELDS.COMPONENT_INSTANCES_INTERFACES,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES,
+            // COMPONENT_FIELDS.COMPONENT_INSTANCES_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INPUTS,
+            COMPONENT_FIELDS.COMPONENT_INSTANCES,
+            COMPONENT_FIELDS.COMPONENT_CAPABILITIES
+        ]);
+    }
+
+    getServiceConsumptionInputs(componentMetaDataId: string, serviceInstanceId: string, interfaceId: string, operation: OperationModel): Observable<ConsumptionInput[]> {
+        return this.http.get<ConsumptionInput[]>
+        (this.baseUrl + 'services/' + componentMetaDataId + '/consumption/' + serviceInstanceId + '/interfaces/' + interfaceId + '/operations/' + operation.uniqueId + '/inputs');
+    }
+
+    createOrUpdateServiceConsumptionInputs(componentMetaDataId: string, serviceInstanceId: string, consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}>): Observable<any> {
+        return this.http.post(this.baseUrl + 'services/' + componentMetaDataId + '/consumption/' + serviceInstanceId, consumptionInputsList);
+    }
+
+    getServiceFilterConstraints(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [SERVICE_FIELDS.NODE_FILTER]);
+    }
+
+    getComponentInstanceProperties(componentType: string, componentId: string): Observable<ComponentGenericResponse> {
+        return this.getComponentDataByFieldsName(componentType, componentId, [COMPONENT_FIELDS.COMPONENT_INSTANCES_PROPERTIES]);
+    }
+
+    createServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraint: ConstraintObject): Observable<any> {
+        return this.http.post<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter', constraint);
+    }
+
+    updateServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraints: ConstraintObject[]):Observable<any> {
+        return this.http.put<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter', constraints)
+    }
+
+    deleteServiceFilterConstraints(componentMetaDataId: string, componentInstanceId: string, constraintIndex: number): Observable<any>{
+        return this.http.delete<any>(this.baseUrl + 'services/' + componentMetaDataId + '/resourceInstances/' + componentInstanceId + '/nodeFilter/' + constraintIndex)
+    }
+
+    deletePolicy(component: Component, policy: PolicyInstance): Observable<PolicyInstance> {
+        return this.http.put<PolicyInstance>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/policies/' + policy.uniqueId + '/undeclare', policy)
+    }
+
+    createListInput(componentId: string, input: any, isSelf: boolean): Observable<any> {
+        let inputs: any;
+        if (isSelf) {
+            // change componentInstanceProperties -> serviceProperties
+            inputs = {
+                componentInstInputsMap: {
+                    serviceProperties: input.componentInstInputsMap.componentInstanceProperties
+                },
+                listInput: input.listInput
+            };
+        } else {
+            inputs = input;
+        }
+        return this.http.post<any>(this.baseUrl + 'services/' + componentId + '/create/listInput', inputs);
+    }
+
+    createPolicy(component: Component, policiesToCreate: InstancePropertiesAPIMap, isSelf: boolean): Observable<any> {
+        const policiesList =
+            isSelf ?
+                // tslint:disable-next-line:object-literal-key-quotes
+                {'componentPropertiesToPolicies': {
+                        ...policiesToCreate.componentInstanceProperties
+                    }
+                } :
+                // tslint:disable-next-line:object-literal-key-quotes
+                {'componentInstancePropertiesToPolicies': {
+                        ...policiesToCreate.componentInstanceProperties
+                    }
+                };
+        return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/create/policies', policiesList);
+    }
+
+    protected getComponentDataByFieldsName(componentType: string, componentId: string, fields: string[]): Observable<ComponentGenericResponse> {
+        let params: HttpParams = new HttpParams();
+        _.forEach(fields, (field: string): void => {
+            params = params.append(API_QUERY_PARAMS.INCLUDE, field);
+        });
+        // tslint:disable-next-line:object-literal-shorthand
+        return this.http.get<ComponentGenericResponse>(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {params: params})
+            .map((res) => {
+                return componentType === ComponentType.SERVICE ? new ServiceGenericResponse().deserialize(res) :
+                        new ComponentGenericResponse().deserialize(res);
+            });
+    }
+
+    private getServerTypeUrl = (componentType: string): string => {
+        switch (componentType) {
+            case ComponentType.SERVICE:
+            case ComponentType.SERVICE_PROXY:
+                return ServerTypeUrl.SERVICES;
+            default:
+                return ServerTypeUrl.RESOURCES;
+        }
+    }
+
+    private convertArtifactTypeToUrl = (artifactType: ArtifactGroupType): string => {
+        switch (artifactType) {
+            case ArtifactGroupType.TOSCA:
+                return COMPONENT_FIELDS.COMPONENT_TOSCA_ARTIFACTS;
+            case ArtifactGroupType.INFORMATION:
+                return COMPONENT_FIELDS.COMPONENT_INFORMATIONAL_ARTIFACTS;
+            case ArtifactGroupType.DEPLOYMENT:
+                return COMPONENT_FIELDS.COMPONENT_DEPLOYMENT_ARTIFACTS;
+            case ArtifactGroupType.SERVICE_API:
+                return COMPONENT_FIELDS.SERVICE_API_ARTIFACT;
+        }
+    }
+
+    // createCapability(component: Component, capabilityData: Capability): Observable<Capability[]> {
+    createCapability(type: string, uniqueId: string, capabilityData: Capability): Observable<Capability[]> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.post<any>(this.baseUrl + type + uniqueId + '/capabilities', capBEObj);
+    }
+
+    updateCapability(type: string, uniqueId: string, capabilityData: Capability): Observable<Capability[]> {
+        let capBEObj = {
+            'capabilities': {
+                [capabilityData.type]: [capabilityData]
+            }
+        };
+        return this.http.put<any>(this.baseUrl + type + uniqueId + '/capabilities', capBEObj);
+    }
+
+    deleteCapability(component: Component, capId: string): Observable<Capability> {
+        return this.http.delete<Capability>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/capabilities/' + capId);
+    }
+
+    createRequirement(type: string, uniqueId: string, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.post(this.baseUrl + type + uniqueId + '/requirements', reqBEObj);
+    }
+
+    updateRequirement(type: string, uniqueId: string, requirementData: Requirement): Observable<any> {
+        let reqBEObj = {
+            'requirements': {
+                [requirementData.capability]: [requirementData]
+            }
+        };
+        return this.http.put(this.baseUrl + type + uniqueId + '/requirements', reqBEObj);
+    }
+
+    deleteRequirement(component: Component, reqId: string): Observable<Requirement> {
+        return this.http.delete<Requirement>(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/requirements/' + reqId);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts
index 11fe395811..2b9b49cf62 100644
--- a/catalog-ui/src/app/ng2/services/config.service.ts
+++ b/catalog-ui/src/app/ng2/services/config.service.ts
@@ -16,62 +16,80 @@
  *
  */
 
-import { Injectable, Inject } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable, Injector } from '@angular/core';
+import { IAppConfigurtaion, Plugins, PluginsConfiguration, ValidationConfiguration, Validations } from 'app/models';
+import { IApi } from 'app/models/app-config';
 import 'rxjs/add/operator/toPromise';
-import {IAppConfigurtaion, ValidationConfiguration, Validations, Plugins, PluginsConfiguration} from "app/models";
-import {IApi} from "app/models/app-config";
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import { CacheService } from './cache.service';
 
 @Injectable()
 export class ConfigService {
 
-    private baseUrl;
     public configuration: IAppConfigurtaion;
-    public api:IApi;
+    public api: IApi;
+    private baseUrl;
+
+    constructor(
+                @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
+                private cacheService: CacheService,
+                private injector: Injector,
+                private http: HttpClient
+        ) {
+            this.api = this.sdcConfig.api;
+            this.baseUrl = this.api.root + this.sdcConfig.api.component_api_root;
+    }
 
-    constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
-    	this.api = this.sdcConfig.api;
-        this.baseUrl = this.api.root + this.sdcConfig.api.component_api_root;
+    loadSdcSetupData = (): Promise<void> =>  {
+        const url: string = this.api.root + this.api.GET_SDC_Setup_Data;
+        const promise: Promise<any> = this.http.get<any>(url).toPromise();
+        promise.then((response) => {
+            this.cacheService.set('version', response.version);
+            this.cacheService.set('serviceCategories', response.categories.serviceCategories);
+            this.cacheService.set('resourceCategories', response.categories.resourceCategories);
+            this.cacheService.set('UIConfiguration', response.configuration);
+        });
+        return promise;
     }
 
     loadValidationConfiguration(): Promise<ValidationConfiguration> {
-        let url: string = this.sdcConfig.validationConfigPath;
-        let promise: Promise<ValidationConfiguration> = this.http.get(url).map((res: Response) => res.json()).toPromise();
+        const url: string = this.sdcConfig.validationConfigPath;
+        const promise: Promise<ValidationConfiguration> = this.http.get<ValidationConfiguration>(url).toPromise();
         promise.then((validationData: Validations) => {
             ValidationConfiguration.validation = validationData;
+            this.cacheService.set('validation', validationData);
         }).catch((ex) => {
             console.error('Error loading validation.json configuration file, using fallback data', ex);
 
-            let fallback:Validations = {
-                "propertyValue": {
-                    "max": 2500,
-                    "min": 0
+            const fallback = {
+                propertyValue: {
+                    max: 2500,
+                    min: 0
                 },
-
-                "validationPatterns": {
-                    "string": "^[\\sa-zA-Z0-9+-]+$",
-                    "comment": "^[\\sa-zA-Z0-9+-_\\{\\}\"]+$",
-                    "integer": "^(([-+]?\\d+)|([-+]?0x[0-9a-fA-F]+))$"
+                validationPatterns: {
+                    string: '^[\\sa-zA-Z0-9+-]+$',
+                    stringOrEmpty: '^[\\sa-zA-Z0-9&-]*$',
+                    comment: '^[\\sa-zA-Z0-9+-_\\{\\}"]+$',
+                    integer: '^(([-+]?\\d+)|([-+]?0x[0-9a-fA-F]+))$'
                 }
             };
 
-            ValidationConfiguration.validation = fallback;
-
+            this.cacheService.set('validation', fallback);
         });
 
         return promise;
     }
 
-    loadPluginsConfiguration(): Promise<PluginsConfiguration> {
-        let url:string = this.api.no_proxy_root + this.api.GET_plugins_configuration;
-        let promise: Promise<any> = this.http.get(url).map((res: Response) => res.json()).toPromise();
+    loadPluginsConfiguration = (): Promise<PluginsConfiguration> =>  {
+        const url: string = this.api.no_proxy_root + this.api.GET_plugins_configuration;
+        const promise: Promise<any> = this.http.get<PluginsConfiguration>(url).toPromise();
         return new Promise<PluginsConfiguration>((resolve) => {
             promise.then((pluginsData: Plugins) => {
                 PluginsConfiguration.plugins = pluginsData;
                 resolve();
             }).catch((ex) => {
-                console.error("Error loading plugins configuration from FE", ex);
+                console.error('Error loading plugins configuration from FE', ex);
 
                 PluginsConfiguration.plugins = [] as Plugins;
                 resolve();
diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts
index 2a783fdd48..61d13186fa 100644
--- a/catalog-ui/src/app/ng2/services/cookie.service.ts
+++ b/catalog-ui/src/app/ng2/services/cookie.service.ts
@@ -19,7 +19,7 @@
  */
 
 import {Injectable, Inject} from '@angular/core';
-import {IAppConfigurtaion, ICookie} from "../../models/app-config";
+import {ICookie} from "../../models/app-config";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 
 @Injectable()
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index cabaccd1d5..0559f35ae2 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -20,9 +20,9 @@
 
 import * as _ from "lodash";
 import { Injectable } from '@angular/core';
-import { DataTypeModel, DataTypesMap, PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedFEPropertyMap } from "app/models";
+import { DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty} from "app/models";
 import { DataTypesService } from "app/services/data-types-service";
-import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
+import { PROPERTY_DATA } from "app/utils";
 
 /** This is a new service for NG2, to eventually replace app/services/data-types-service.ts
  *
@@ -32,13 +32,16 @@ import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils";
 
 @Injectable()
 export class DataTypeService {
-    private dataTypes: DataTypesMap;
+    public dataTypes: DataTypesMap;
 
     constructor(private dataTypeService: DataTypesService) {
         this.dataTypes = dataTypeService.getAllDataTypes(); //This should eventually be replaced by an NG2 call to the backend instead of utilizing Angular1 downgraded component.
     }
 
     public getDataTypeByTypeName(typeName: string): DataTypeModel {
+        if(!this.dataTypes){
+            this.dataTypes = this.dataTypeService.getAllDataTypes();
+        }
         if (!this.dataTypes[typeName]) console.log("MISSING Datatype: " + typeName);
         return this.dataTypes[typeName];
     }
@@ -47,6 +50,13 @@ export class DataTypeService {
         return this.dataTypes;
     }
 
+    public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName){
+        // const property = this.dataTypes[rootPropertyType].properties.filter(property =>
+        //     property.name == propertyName);
+        // return property[0] && property[0].constraints ? property[0].constraints[0].validValues : null;
+        return null;
+    }
+
 
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
diff --git a/catalog-ui/src/app/ng2/services/event-bus.service.ts b/catalog-ui/src/app/ng2/services/event-bus.service.ts
index cc53d7978b..2a15ca25db 100644
--- a/catalog-ui/src/app/ng2/services/event-bus.service.ts
+++ b/catalog-ui/src/app/ng2/services/event-bus.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {BasePubSub, IPubSubEvent} from 'sdc-pubsub';
+import {BasePubSub, IPubSubEvent} from "sdc-pubsub";
 
 @Injectable()
 export class EventBusService extends BasePubSub {
diff --git a/catalog-ui/src/app/ng2/services/file-utils.service.ts b/catalog-ui/src/app/ng2/services/file-utils.service.ts
new file mode 100644
index 0000000000..57897492b0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/file-utils.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from "@angular/core";
+import { WindowRef } from "./window.service";
+
+@Injectable()
+export class FileUtilsService {
+    constructor(private windowRef: WindowRef){}
+
+        public byteCharactersToBlob = (byteCharacters, contentType):any => {
+            contentType = contentType || '';
+            let sliceSize = 1024;
+            let bytesLength = byteCharacters.length;
+            let slicesCount = Math.ceil(bytesLength / sliceSize);
+            let byteArrays = new Array(slicesCount);
+
+            for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+                let begin = sliceIndex * sliceSize;
+                let end = Math.min(begin + sliceSize, bytesLength);
+
+                let bytes = new Array(end - begin);
+                for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+                    bytes[i] = byteCharacters[offset].charCodeAt(0);
+                }
+                byteArrays[sliceIndex] = new Uint8Array(bytes);
+            }
+            return new Blob(byteArrays, {type: contentType});
+        };
+
+        public base64toBlob = (base64Data, contentType):any => {
+            let byteCharacters = atob(base64Data);
+            return this.byteCharactersToBlob(byteCharacters, contentType);
+        };
+
+        public downloadFile = (blob, fileName):void=> {
+            let url = this.windowRef.nativeWindow.URL.createObjectURL(blob);
+            let downloadLink = document.createElement("a");
+
+            downloadLink.setAttribute('href', url);
+            downloadLink.setAttribute('download', fileName);
+            document.body.appendChild(downloadLink);
+
+            var clickEvent = new MouseEvent("click", {
+                "view": window,
+                "bubbles": true,
+                "cancelable": true
+            });
+            downloadLink.dispatchEvent(clickEvent);
+        }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/gab.service.ts b/catalog-ui/src/app/ng2/services/gab.service.ts
index d903d20ade..b62c566dd6 100644
--- a/catalog-ui/src/app/ng2/services/gab.service.ts
+++ b/catalog-ui/src/app/ng2/services/gab.service.ts
@@ -18,12 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Injectable, Inject} from "@angular/core";
-import {Response} from '@angular/http';
-import {HttpService} from "./http.service";
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-import {Observable} from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
 
+// tslint:disable-next-line:interface-name
 export interface IServerResponse {
   data: [{ [key: string]: string }];
 }
@@ -36,24 +37,25 @@ export class GabRequest {
   }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 @Injectable()
 export class GabService {
   baseUrl: string;
   gabUrl: string;
 
-  constructor(@Inject(SdcConfigToken) sdcConfig: ISdcConfig, private http: HttpService) {
+  constructor(@Inject(SdcConfigToken) sdcConfig: ISdcConfig, protected http: HttpClient) {
     this.baseUrl = sdcConfig.api.root;
     this.gabUrl = sdcConfig.api.POST_GAB_Search;
   }
 
   public getArtifact(artifactUniqueId: string, resourceId: string, columns: string[]): Observable<Response> {
-    let finalUrl: string = this.baseUrl + this.gabUrl;
-    let request: GabRequest = {
+    const finalUrl: string = this.baseUrl + this.gabUrl;
+    const request: GabRequest = {
       fields: columns,
       parentId: resourceId,
-      artifactUniqueId: artifactUniqueId
+      artifactUniqueId
     };
 
-    return this.http.post(finalUrl, request);
+    return this.http.post<Response>(finalUrl, request);
   }
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/groups.service.ts b/catalog-ui/src/app/ng2/services/groups.service.ts
index e3b3d85b50..8b2bcd3415 100644
--- a/catalog-ui/src/app/ng2/services/groups.service.ts
+++ b/catalog-ui/src/app/ng2/services/groups.service.ts
@@ -1,11 +1,11 @@
 import {IZoneInstanceAssignment} from '../../models/graph/zones/zone-instance';
 import {Injectable, Inject} from "@angular/core";
 import {Observable} from "rxjs/Observable";
-import {HttpService} from "./http.service";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 import {GroupInstance} from '../../models/graph/zones/group-instance';
 import {UiBaseObject} from "../../models/ui-models/ui-base-object";
 import {IZoneService} from "../../models/graph/zones/zone";
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class GroupsService implements IZoneService {
@@ -17,13 +17,13 @@ export class GroupsService implements IZoneService {
         'SERVICE': 'services'
     }
 
-    constructor(private http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root;
     }
 
-    public createGroupInstance(componentType:string, componentUniqueId:string, groupType:string) {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[componentType.toUpperCase()] + '/' + componentUniqueId + '/groups/' + groupType, {}).map(resp => {
-            return resp.json();
+    public createGroupInstance(componentType:string, componentUniqueId:string, groupType:string): Observable<GroupInstance>{
+        return this.http.post<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[componentType.toUpperCase()] + '/' + componentUniqueId + '/groups/' + groupType, {}).map(resp => {
+            return new GroupInstance(resp);
         });
     };
 
@@ -40,8 +40,7 @@ export class GroupsService implements IZoneService {
     }
 
     public updateGroupMembers(topologyTemplateType:string, topologyTemplateId:string, groupId:string, members:Array<string>):Observable<Array<string>> {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId + '/members', members)
-            .map(response => response.json());
+        return this.http.post<Array<string>>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId + '/members', members);
     }
 
     public updateMembers(topologyTemplateType:string, topologyTemplateId:string, groupId:string, members:Array<UiBaseObject>):Observable<Array<string>> {
@@ -50,22 +49,18 @@ export class GroupsService implements IZoneService {
     }
 
     public getSpecificGroup(topologyTemplateType:string, topologyTemplateId:string, groupId:string):Observable<GroupInstance> {
-        return this.http.get(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId)
+        return this.http.get<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId)
             .map(res => {
-                return new GroupInstance(res.json());
+                return new GroupInstance(res);
             });
     }
 
     public updateName(topologyTemplateType:string, topologyTemplateId:string, groupId:string, newName:string):Observable<GroupInstance> {
-        return this.http.put(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId, {name: newName}).map(resp => {
-            return resp.json();
-        });
+        return this.http.put<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId, {name: newName});
     };
 
     public deleteGroup(topologyTemplateType:string, topologyTemplateId:string, groupId:string) {
-        return this.http.delete(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId).map(resp => {
-            return resp.json();
-        });
+        return this.http.delete<GroupInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/groups/' + groupId);
     };
 
     public updateZoneInstanceAssignments(topologyTemplateType:string, topologyTemplateId:string, policyId:string, members:Array<IZoneInstanceAssignment>):Observable<any> {
@@ -75,4 +70,6 @@ export class GroupsService implements IZoneService {
     public deleteZoneInstance(topologyTemplateType:string, topologyTemplateId:string, policyId:string):Observable<any> {
         return this.deleteGroup(topologyTemplateType, topologyTemplateId, policyId);
     };
-}
\ No newline at end of file
+
+
+}
diff --git a/catalog-ui/src/app/ng2/services/home.service.ts b/catalog-ui/src/app/ng2/services/home.service.ts
new file mode 100644
index 0000000000..c472aa80c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/home.service.ts
@@ -0,0 +1,74 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Component, IApi, Resource, Service } from 'app/models';
+import { ComponentFactory } from 'app/utils/component-factory';
+import { Observable } from 'rxjs';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import { SharingService } from './sharing.service';
+
+// tslint:disable-next-line:interface-name
+interface IComponentsArray {
+    services: Service[];
+    resources: Resource[];
+}
+
+@Injectable()
+export class HomeService {
+    private api: IApi;
+    private smallObjectAttributes = [
+        'uniqueId', 'name', 'componentType', 'resourceType', 'lastUpdateDate', 'lifecycleState', 'distributionStatus',
+        'icon', 'version'
+    ];
+
+    constructor(private http: HttpClient,
+                @Inject(SdcConfigToken) private sdcConfig: ISdcConfig,
+                private sharingService: SharingService,
+                private componentFactory: ComponentFactory) {
+        this.api = sdcConfig.api;
+    }
+
+    public getAllComponents(smallObjects?: boolean): Observable<Component[]> {
+        return this.http.get<IComponentsArray>(this.api.root + this.api.GET_element)
+            .map((response) => {
+                const componentResponse: IComponentsArray = response;
+                let componentsList: Component[] = [];
+
+                componentResponse.services && componentResponse.services.forEach((serviceResponse: Service) => {
+                    serviceResponse = (smallObjects) ? _.pick(serviceResponse, this.smallObjectAttributes) : serviceResponse;
+                    const component: Service = this.componentFactory.createService(serviceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                componentResponse.resources && componentResponse.resources.forEach((resourceResponse: Resource) => {
+                    resourceResponse = (smallObjects) ? _.pick(resourceResponse, this.smallObjectAttributes) : resourceResponse;
+                    const component: Resource = this.componentFactory.createResource(resourceResponse);
+                    componentsList.push(component);
+                    this.sharingService.addUuidValue(component.uniqueId, component.uuid);
+                });
+
+                componentsList = _.orderBy(componentsList, ['lastUpdateDate'], ['desc']);
+
+                return componentsList;
+            });
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/http-hepler.service.ts b/catalog-ui/src/app/ng2/services/http-hepler.service.ts
new file mode 100644
index 0000000000..2b11067a24
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/http-hepler.service.ts
@@ -0,0 +1,31 @@
+import { Injectable, Inject } from "@angular/core";
+import { Dictionary } from "../../utils/dictionary/dictionary";
+import { SharingService } from "../services/sharing.service";
+import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+
+
+@Injectable()
+export class HttpHelperService {
+    constructor( private sharingService: SharingService,
+        @Inject(SdcConfigToken) private sdcConfig: ISdcConfig){}
+    
+    public getUuidValue = (url: string): string => {
+        let map: Dictionary<string, string> = this.sharingService.getUuidMap();
+        if (map && url.indexOf(this.sdcConfig.api.root) > 0) {
+            map.forEach((key: string) => {
+                if (url.indexOf(key) !== -1) {
+                    return this.sharingService.getUuidValue(key);
+                }
+            });
+        }
+        return '';
+    }
+    public static replaceUrlParams(url: string, urlParams: { [index: string]: any }): string {
+        return url.replace(/:(\w+)/g, (m, p1): string => urlParams[p1] || '');
+    }
+    public static getHeaderMd5 = (object:any):string => {
+        let componentString:string = JSON.stringify(object);
+        let md5Result = md5(componentString).toLowerCase();
+        return btoa(md5Result);
+    };
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts
deleted file mode 100644
index 2785688ace..0000000000
--- a/catalog-ui/src/app/ng2/services/http.service.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {Injectable, Inject} from '@angular/core';
-import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
-import {Observable} from 'rxjs/Observable';
-import {UUID} from 'angular2-uuid';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
-import {Dictionary} from "../../utils/dictionary/dictionary";
-import {SharingService, CookieService} from "app/services";
-import { ModalService } from "app/ng2/services/modal.service";
-import { ServerErrorResponse } from "app/models";
-import {ErrorMessageComponent} from "../components/ui/modal/error-message/error-message.component";
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-
-@Injectable()
-export class HttpService extends Http {
-
-    constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
-        super(backend, options);
-        this._defaultOptions.withCredentials = true;
-        this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId());
-    }
-
-    request(request:string|Request, options?:RequestOptionsArgs):Observable<Response> {
-        /**
-         * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
-         * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
-         */
-        if (typeof request === 'string') { // meaning we have to add the token to the options, not in url
-            if (!options) {
-                // make option object
-                options = {headers: new Headers()};
-            }
-
-            var uuidValue = this.getUuidValue(request);
-            if(uuidValue!= ''){
-                options.headers['X-ECOMP-ServiceID'] = uuidValue;
-
-            }
-            options.headers.set('X-ECOMP-RequestID', UUID.UUID());
-
-        } else {
-            // we have to add the token to the url object
-            var uuidValue = this.getUuidValue((<Request>request).url);
-            if(uuidValue!= ''){
-                 request.headers.set('X-ECOMP-ServiceID',uuidValue);
-
-            }
-            request.headers.set('X-ECOMP-RequestID', UUID.UUID());
-        }
-        return super.request(request, options).catch((err) => this.catchError(err));
-    }
-
-    private getUuidValue = (url: string) :string => {
-        let map:Dictionary<string, string> = this.sharingService.getUuidMap();
-        if (map && url.indexOf(this.sdcConfig.api.root) > 0) {
-            map.forEach((key:string) => {
-                if (url.indexOf(key) !== -1) {
-                    return this.sharingService.getUuidValue(key);
-                }
-            });
-        }
-        return '';
-    }
-
-    private catchError = (response: Response): Observable<any> => {
-        
-        let modalInstance = this.modalService.createErrorModal("OK");
-        let errorResponse: ServerErrorResponse = new ServerErrorResponse(response);
-        this.modalService.addDynamicContentToModal(modalInstance, ErrorMessageComponent, errorResponse);
-        modalInstance.instance.open();
-        
-        return Observable.throw(response);
-    };
-
-    public static replaceUrlParams(url:string, urlParams:{[index:string]:any}):string {
-        return url.replace(/:(\w+)/g, (m, p1):string => urlParams[p1] || '');
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/services/modules.service.ts b/catalog-ui/src/app/ng2/services/modules.service.ts
new file mode 100644
index 0000000000..857f0718d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/modules.service.ts
@@ -0,0 +1,34 @@
+import {Inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {ISdcConfig, SdcConfigToken} from "../config/sdc-config.config";
+import {DisplayModule, Module} from "../../models/modules/base-module";
+import {Observable} from "rxjs/Observable";
+import {ServerTypeUrl} from "../../utils/constants";
+
+@Injectable()
+export class ModulesService {
+
+    protected baseUrl;
+
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+        this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
+    }
+
+    getComponentInstanceModule = (topologyTemplateType: string, topologyTemplateId: string, componentInstanceId: string, moduleId: string):Observable<DisplayModule> => {
+        return this.http.get<DisplayModule>(this.baseUrl + ServerTypeUrl.toServerTypeUrl(topologyTemplateType) + "/" + topologyTemplateId + "/resourceInstance/" + componentInstanceId + "/groupInstance/" + moduleId)
+            .map((response) => {
+                return new DisplayModule(response);
+            })
+    };
+
+    getModuleForDisplay = (topologyTemplateType: string, topologyTemplateId: string, moduleId: string):Observable<DisplayModule> => {
+        return this.http.get<DisplayModule>(this.baseUrl + ServerTypeUrl.toServerTypeUrl(topologyTemplateType) + "/" + topologyTemplateId + "/groups/" + moduleId)
+            .map((response) => {
+                return new DisplayModule(response);
+            })
+    };
+
+    public updateModuleMetadata = (topologyTemplateType: string, topologyTemplateId: string, module: Module):Observable<Module> => {
+        return this.http.put<Module>(this.baseUrl + ServerTypeUrl.toServerTypeUrl(topologyTemplateType) + "/" + topologyTemplateId + "/groups/" + module.uniqueId + "/metadata", module)
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/onboarding.service.ts b/catalog-ui/src/app/ng2/services/onboarding.service.ts
new file mode 100644
index 0000000000..0ec4875d91
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/onboarding.service.ts
@@ -0,0 +1,151 @@
+/**
+ * Created by rc2122 on 6/4/2018.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+'use strict';
+import {Inject, Injectable} from "@angular/core";
+import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
+import {Observable} from "rxjs/Observable";
+import { HttpClient, HttpResponse } from "@angular/common/http";
+import { ComponentFactory } from "../../utils/component-factory";
+import { DEFAULT_ICON, ComponentType } from "../../utils/constants";
+import { ICsarComponent } from "../../models/csar-component";
+import { IApi } from "../../models/app-config";
+import { CacheService } from "./cache.service";
+import { IComponentMetadata, ComponentMetadata } from "../../models/component-metadata";
+import { IMainCategory, ISubCategory } from "../../models/category";
+import { Resource } from "../../models/components/resource";
+
+export interface OnboardingComponents {
+    listCount: number;
+    results: Array<ICsarComponent>
+} 
+
+@Injectable()
+export class OnboardingService {
+    private api:IApi;
+
+    constructor(protected http: HttpClient,
+                private cacheService:CacheService,
+                @Inject(SdcConfigToken) sdcConfig:ISdcConfig,
+                private componentFactory: ComponentFactory) {
+                this.api = sdcConfig.api;
+    }
+
+    getOnboardingVSPs = (): Observable<Array<ICsarComponent>> =>{
+        return this.http.get<OnboardingComponents>(this.api.GET_onboarding).map((onboardingVSPs) =>{
+            return onboardingVSPs.results
+        });
+    }
+
+    getOnboardingComponents = ():Observable<Array<IComponentMetadata>> => {
+        return this.getOnboardingVSPs().map((onboardingComponents) => {
+            let componentsMetadataList: Array<IComponentMetadata> = new Array();
+            onboardingComponents.forEach((obc:ICsarComponent) => {
+                let componentMetaData: ComponentMetadata = this.createFromCsarComponent(obc);
+                componentsMetadataList.push(componentMetaData);
+            });
+            return componentsMetadataList;
+        });
+    };
+    
+    public createFromCsarComponent = (csar:ICsarComponent): ComponentMetadata => {
+        let newMetadata = new ComponentMetadata();  
+        newMetadata.name = csar.vspName;
+
+        /**
+         * Onboarding CSAR contains category and sub category that are uniqueId.
+         * Need to find the category and sub category and extract the name from them.
+         * First concat all sub categories to one array.
+         * Then find the selected sub category and category.
+         * @type {any}
+         */
+        let availableCategories = angular.copy(this.cacheService.get('resourceCategories'));
+        let allSubs = [];
+        _.each(availableCategories, (main:IMainCategory)=> {
+            if (main.subcategories) {
+                allSubs = allSubs.concat(main.subcategories);
+            }
+        });
+
+        let selectedCategory:IMainCategory = _.find(availableCategories, function (main:IMainCategory) {
+            return main.uniqueId === csar.category;
+        });
+
+        let selectedSubCategory:ISubCategory = _.find(allSubs, (sub:ISubCategory)=> {
+            return sub.uniqueId === csar.subCategory;
+        });
+
+        // Build the categories and sub categories array (same format as component category)
+        let categories:Array<IMainCategory> = new Array();
+        let subcategories:Array<ISubCategory> = new Array();
+        if (selectedCategory && selectedSubCategory) {
+            subcategories.push(selectedSubCategory);
+            selectedCategory.subcategories = subcategories;
+            categories.push(selectedCategory);
+        }
+
+        // Fill the component with details from CSAR
+
+        newMetadata.categories = categories;
+        newMetadata.vendorName = csar.vendorName;
+        newMetadata.vendorRelease = csar.vendorRelease;
+        newMetadata.csarUUID = csar.packageId;
+        newMetadata.csarPackageType = csar.packageType;
+        newMetadata.csarVersion = csar.version;
+        newMetadata.packageId = csar.packageId;
+        newMetadata.description = csar.description;
+        newMetadata.selectedCategory = selectedCategory && selectedSubCategory ? selectedCategory.name + "_#_" + selectedSubCategory.name : '';
+        newMetadata.filterTerm = newMetadata.name +  ' '  + newMetadata.description + ' ' + newMetadata.vendorName + ' ' + newMetadata.csarVersion;
+        newMetadata.resourceType = "VF";
+        newMetadata.componentType = ComponentType.RESOURCE;
+        newMetadata.tags = [];
+        newMetadata.icon = DEFAULT_ICON;
+        newMetadata.iconSprite = "sprite-resource-icons";
+        return newMetadata;
+    };
+
+    downloadOnboardingCsar = (packageId:string):Observable<HttpResponse<Blob>> => {
+        return this.http.get(this.api.GET_onboarding + "/" + packageId, {observe: 'response', responseType: 'blob'});
+    };
+
+    getComponentFromCsarUuid = (csarUuid:string):Observable<ComponentMetadata> => {
+        return this.http.get<ComponentMetadata>(this.api.root + this.api.GET_component_from_csar_uuid.replace(':csar_uuid', csarUuid))
+            .map((response: any) => {
+                // If the status is 400, this means that the component not found.
+                // I do not want to return error from server, because a popup will appear in client with the error.
+                // So returning success (200) with status 400.
+                if (response.status !== 400) {
+                    let componentMetadata = new ComponentMetadata();
+                    componentMetadata = response;
+                    return componentMetadata;
+                }
+            });
+    };
+
+    //TODO remove when workspace page convert to angular5
+    convertMetaDataToComponent(componentMetadata: ComponentMetadata) {
+        let newResource: Resource = <Resource>this.componentFactory.createEmptyComponent(ComponentType.RESOURCE);
+        newResource.setComponentMetadata(componentMetadata);
+        return newResource;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/plugins.service.ts b/catalog-ui/src/app/ng2/services/plugins.service.ts
index 2a3b68fe25..0f71eee1f0 100644
--- a/catalog-ui/src/app/ng2/services/plugins.service.ts
+++ b/catalog-ui/src/app/ng2/services/plugins.service.ts
@@ -1,40 +1,40 @@
-import { Injectable, Inject } from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Http, Response} from '@angular/http';
-import {IApi, IAppConfigurtaion, Plugin, Plugins, PluginsConfiguration} from "app/models";
+import {IApi, IAppConfigurtaion, Plugin, PluginsConfiguration} from "app/models";
 import {ISdcConfig, SdcConfigToken} from "../config/sdc-config.config";
 
 @Injectable()
 export class PluginsService {
 
-    private baseUrl;
     public configuration: IAppConfigurtaion;
     public api: IApi;
+    private baseUrl;
 
-    constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
+    constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig: ISdcConfig) {
         this.api = this.sdcConfig.api;
         this.baseUrl = this.api.root + this.sdcConfig.api.component_api_root;
     }
 
     public getPluginByStateUrl = (stateUrl: string) => {
-        let pluginKey: any = _.findKey(PluginsConfiguration.plugins, (pluginConfig: Plugin) =>{
-            return pluginConfig.pluginStateUrl ===  stateUrl;
+        let pluginKey: any = _.findKey(PluginsConfiguration.plugins, (pluginConfig: Plugin) => {
+            return pluginConfig.pluginStateUrl === stateUrl;
         });
 
         return PluginsConfiguration.plugins[pluginKey];
     };
 
-    public isPluginDisplayedInContext = (plugin: Plugin ,userRole: string, contextType: string) => {
+    public isPluginDisplayedInContext = (plugin: Plugin, userRole: string, contextType: string) => {
         return plugin.pluginDisplayOptions["context"] &&
-               plugin.pluginDisplayOptions["context"].displayRoles.includes(userRole) &&
-               plugin.pluginDisplayOptions["context"].displayContext.indexOf(contextType) !== -1
+            plugin.pluginDisplayOptions["context"].displayRoles.includes(userRole) &&
+            plugin.pluginDisplayOptions["context"].displayContext.indexOf(contextType) !== -1
     };
 
     public isPluginOnline = (pluginId: string): Observable<boolean> => {
-        let url:string = this.api.no_proxy_root + this.api.GET_plugin_online_state.replace(':pluginId', pluginId);
+        let url: string = this.api.no_proxy_root + this.api.GET_plugin_online_state.replace(':pluginId', pluginId);
         return this.http.get(url).map((res: Response) => {
             return res.json()
         })
-        .catch(error => Observable.of(false));
+            .catch(error => Observable.of(false));
     }
 }
diff --git a/catalog-ui/src/app/ng2/services/policies.service.ts b/catalog-ui/src/app/ng2/services/policies.service.ts
index 3675a7b9ab..a1a9013303 100644
--- a/catalog-ui/src/app/ng2/services/policies.service.ts
+++ b/catalog-ui/src/app/ng2/services/policies.service.ts
@@ -20,13 +20,13 @@
 
 import {Injectable, Inject} from "@angular/core";
 import {Observable} from "rxjs/Observable";
-import {HttpService} from "./http.service";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 import {PolicyInstance, PolicyTargetsRequest} from '../../models/graph/zones/policy-instance';
 import {IZoneInstanceAssignment} from "../../models/graph/zones/zone-instance";
 import {IZoneService} from "../../models/graph/zones/zone";
 import {TargetUiObject} from "../../models/ui-models/ui-target-object";
 import {TargetOrMemberType} from "../../utils/constants";
+import { HttpClient } from "@angular/common/http";
 
 
 @Injectable()
@@ -38,14 +38,12 @@ export class PoliciesService implements IZoneService {
         'SERVICE': 'services'
     }
 
-    constructor(private http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.root;
     }
 
-    public createPolicyInstance(topologyTemplateType:string, topologyTemplateId:string, policyType:string) {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyType, {}).map(resp => {
-            return resp.json();
-        });
+    public createPolicyInstance(topologyTemplateType:string, topologyTemplateId:string, policyType:string): Observable<PolicyInstance> {
+        return this.http.post<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyType, {});
     }
 
     public addPolicyTarget(topologyTemplateType:string, topologyTemplateId:string, policy:PolicyInstance, targetId:string, targetType:TargetOrMemberType) {
@@ -76,8 +74,8 @@ export class PoliciesService implements IZoneService {
     }
 
     public updatePolicyTargets(topologyTemplateType:string, topologyTemplateId:string, policyId:string, targets:PolicyTargetsRequest): Observable<PolicyInstance> {
-        return this.http.post(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId + '/targets', targets.requestItems)
-            .map(response => new PolicyInstance(response.json()));
+        return this.http.post<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId + '/targets', targets.requestItems)
+            .map(response => new PolicyInstance(response));
     }
 
     public updateTargets(topologyTemplateType:string, topologyTemplateId:string, policyId:string, targets:Array<TargetUiObject>):Observable<PolicyInstance> {
@@ -94,22 +92,18 @@ export class PoliciesService implements IZoneService {
     }
 
     public getSpecificPolicy(topologyTemplateType:string, topologyTemplateId:string, policyId:string):Observable<PolicyInstance> {
-        return this.http.get(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId)
+        return this.http.get<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId)
             .map(res => {
-                return new PolicyInstance(res.json());
+                return new PolicyInstance(res);
             });
     }
 
     public updateName(topologyTemplateType:string, topologyTemplateId:string, policyId:string, newName:string):Observable<any> {
-        return this.http.put(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId, {name: newName}).map(res => {
-            return res.json();
-        });
+        return this.http.put<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId, {name: newName});
     };
 
     public deletePolicy(topologyTemplateType:string, topologyTemplateId:string, policyId:string) {
-        return this.http.delete(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId).map(resp => {
-            return resp.json();
-        });
+        return this.http.delete<PolicyInstance>(this.baseUrl + '/v1/catalog/' + this.mapApiDirections[topologyTemplateType.toUpperCase()] + '/' + topologyTemplateId + '/policies/' + policyId);
     };
 
     public updateZoneInstanceAssignments(topologyTemplateType:string, topologyTemplateId:string, policyId:string, targets:Array<IZoneInstanceAssignment>):Observable<PolicyInstance>{
diff --git a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
index d297ea0874..f161babfa6 100644
--- a/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
+++ b/catalog-ui/src/app/ng2/services/responses/component-generic-response.ts
@@ -22,12 +22,15 @@
  * Created by ob0695 on 4/18/2017.
  */
 
-import { ArtifactGroupModel, PropertyModel, PropertiesGroup, InputsGroup, AttributeModel, AttributesGroup, ComponentInstance, OperationModel,
-    InputBEModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup, InterfaceModel} from "app/models";
+import { ArtifactGroupModel, PropertyModel, PropertiesGroup, AttributeModel, AttributesGroup, ComponentInstance, OperationModel,
+    InputBEModel, Module, ComponentMetadata, RelationshipModel, RequirementsGroup, CapabilitiesGroup} from "app/models";
 import {CommonUtils} from "app/utils";
 import {Serializable} from "../utils/serializable";
+import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model";
 import { PolicyInstance } from "app/models/graph/zones/policy-instance";
 import { GroupInstance } from "../../../models/graph/zones/group-instance";
+import { InputsGroup } from "../../../models/inputs";
+import { InterfaceModel } from "../../../models/operation";
 
 export class ComponentGenericResponse  implements Serializable<ComponentGenericResponse> {
 
@@ -40,7 +43,7 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
     public componentInstancesAttributes:AttributesGroup;
     public componentInstancesRelations:Array<RelationshipModel>;
     public componentInstances:Array<ComponentInstance>;
-    public componentInstancesInterfaces:Map<string,Array<InterfaceModel>>;
+    public componentInstancesInterfaces: Map<string, Array<InterfaceModel>>;
     public inputs:Array<InputBEModel>;
     public capabilities:CapabilitiesGroup;
     public requirements:RequirementsGroup;
@@ -75,7 +78,7 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
         if(response.deploymentArtifacts) {
             this.deploymentArtifacts = new ArtifactGroupModel(response.deploymentArtifacts);
         }
-        if(response.inputs) {
+        if(response.inputs) { 
             this.inputs = CommonUtils.initInputs(response.inputs);
         }
         if(response.attributes) {
@@ -97,10 +100,9 @@ export class ComponentGenericResponse  implements Serializable<ComponentGenericR
             this.toscaArtifacts = new ArtifactGroupModel(response.toscaArtifacts);
         }
         if(response.interfaces) {
-            this.interfaces = CommonUtils.initInterfaces(response.interfaces);
             this.interfaceOperations = CommonUtils.initInterfaceOperations(response.interfaces);
         }
-        if(response.componentInstancesInterfaces) {
+        if (response.componentInstancesInterfaces) {
             this.componentInstancesInterfaces = new Map();
             for (let resourceId in response.componentInstancesInterfaces) {
                 this.componentInstancesInterfaces[resourceId] = CommonUtils.initInterfaces(response.componentInstancesInterfaces[resourceId]);
diff --git a/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts b/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts
index d32ed26bb2..0fe85715be 100644
--- a/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts
+++ b/catalog-ui/src/app/ng2/services/responses/service-generic-response.ts
@@ -2,12 +2,15 @@ import * as _ from "lodash";
 import {Serializable} from "../utils/serializable";
 import {ComponentGenericResponse} from "./component-generic-response";
 import {ForwardingPath} from "../../../models/forwarding-path";
+import {ArtifactGroupModel} from "../../../models/artifacts";
 
 export class ServiceGenericResponse extends ComponentGenericResponse implements Serializable<ServiceGenericResponse>  {
     public forwardingPaths: { [key:string]:ForwardingPath } = {};
+    public serviceApiArtifacts: ArtifactGroupModel;
 
     deserialize (response): ServiceGenericResponse {
         super.deserialize(response);
+        this.serviceApiArtifacts = new ArtifactGroupModel(response.serviceApiArtifacts);
         if(response.forwardingPaths) {
             _.forEach(response.forwardingPaths, (pathResponse, id) => {
                 let pathId = id;
diff --git a/catalog-ui/src/app/ng2/services/sharing.service.ts b/catalog-ui/src/app/ng2/services/sharing.service.ts
new file mode 100644
index 0000000000..0a6b8cb1af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/sharing.service.ts
@@ -0,0 +1,42 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Injectable} from "@angular/core";
+import {Dictionary} from "app/utils";
+
+@Injectable()
+export class SharingService {
+    private uuidMap:Dictionary<string, string> = new Dictionary<string,string>();
+
+    constructor() {
+    }
+
+    public getUuidValue(uniqueId:string): string {
+        return this.uuidMap.getValue(uniqueId);
+    }
+
+    public addUuidValue(uniqueId:string, uuid:string): void {
+        this.uuidMap.setValue(uniqueId, uuid);
+    }
+
+    public getUuidMap() :Dictionary<string, string> {
+        return this.uuidMap;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/tosca-types.service.ts b/catalog-ui/src/app/ng2/services/tosca-types.service.ts
index 66826c0fef..83b833b1ab 100644
--- a/catalog-ui/src/app/ng2/services/tosca-types.service.ts
+++ b/catalog-ui/src/app/ng2/services/tosca-types.service.ts
@@ -14,12 +14,19 @@
  * permissions and limitations under the License.
  */
 
-import {Injectable, Inject} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {HttpService} from './http.service';
-import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-import {CapabilityTypesMap, NodeTypesMap, RelationshipTypesMap} from "app/models";
-import {Response} from '@angular/http';
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import {
+    CapabilityTypeModel,
+    CapabilityTypesMap,
+    IComponentsArray,
+    NodeTypesMap,
+    RelationshipTypesMap
+} from 'app/models';
+import { Observable } from 'rxjs/Observable';
+import { ISdcConfig, SdcConfigToken } from '../config/sdc-config.config';
+import 'rxjs/add/operator/toPromise';
 
 declare var angular: angular.IAngularStatic;
 
@@ -28,28 +35,20 @@ export class ToscaTypesServiceNg2 {
 
     protected baseUrl;
 
-    constructor(protected http: HttpService, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+    constructor(protected http: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
         this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root;
     }
 
-    fetchRelationshipTypes(): Observable<RelationshipTypesMap> {
-        return this.http.get(this.baseUrl + 'relationshipTypes')
-            .map((res: Response) => {
-                return res.json();
-            });
+    async fetchRelationshipTypes(): Promise<RelationshipTypesMap> {
+        return this.http.get<RelationshipTypesMap>(this.baseUrl + 'relationshipTypes').toPromise();
     }
 
-    fetchNodeTypes(): Observable<NodeTypesMap> {
-        return this.http.get(this.baseUrl + 'nodeTypes')
-            .map((res: Response) => {
-                return res.json();
-            });
+    async fetchNodeTypes(): Promise<NodeTypesMap> {
+        return this.http.get<NodeTypesMap>(this.baseUrl + 'nodeTypes').toPromise();
     }
 
-    fetchCapabilityTypes(): Observable<CapabilityTypesMap> {
-        return this.http.get(this.baseUrl + 'capabilityTypes')
-            .map((res: Response) => {
-                return res.json();
-            });
+    async fetchCapabilityTypes(): Promise<CapabilityTypesMap>{
+        return this.http.get<CapabilityTypesMap>(this.baseUrl + 'capabilityTypes').toPromise();
     }
 }
+
diff --git a/catalog-ui/src/app/ng2/services/user.service.ts b/catalog-ui/src/app/ng2/services/user.service.ts
index 87e90432dc..f4186a1087 100644
--- a/catalog-ui/src/app/ng2/services/user.service.ts
+++ b/catalog-ui/src/app/ng2/services/user.service.ts
@@ -19,80 +19,34 @@
  */
 
 import { Injectable, Inject } from "@angular/core";
-import { Headers } from "@angular/http";
 import { Observable } from "rxjs/Observable";
-import { HttpService } from "./http.service";
-import { Cookie2Service } from "./cookie.service";
 import { IUserProperties } from "../../models/user";
 
-import {ICookie} from "../../models/app-config";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
-
+import { HttpClient } from "@angular/common/http";
+import { HttpHelperService } from "./http-hepler.service";
+/**
+ * User Service provides CRUD for Users. See authentication service for authentication/login.
+ */
 @Injectable()
-export class UserService {
+export class UserService { 
     private url:string;
-    private authorizeUrl:string;
 
-    private _loggedinUser:IUserProperties;
-
-    constructor(private httpService:HttpService,
-                private cookieService:Cookie2Service,
+    constructor(private http: HttpClient,
                 @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
         this.url = this.sdcConfig.api.root + this.sdcConfig.api.GET_user;
-        this.authorizeUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize;
     }
 
-    public authorize() :Observable<IUserProperties> {
-        let cookie:ICookie = this.sdcConfig.cookie;
-        let authorizeHeaders:Headers = new Headers();
-        authorizeHeaders.set(cookie.userFirstName, this.cookieService.getFirstName());
-        authorizeHeaders.set(cookie.userLastName, this.cookieService.getLastName());
-        authorizeHeaders.set(cookie.userEmail, this.cookieService.getEmail());
-        authorizeHeaders.set(cookie.userIdSuffix, this.cookieService.getUserId());
-
-        return this.httpService.get(
-            this.authorizeUrl,
-            { headers: authorizeHeaders }
-        ).map(resp => resp.json());
-    }
 
     public getAllUsers() :Observable<IUserProperties[]> {
-        return this.httpService.get(
+        return this.http.get(
             this.sdcConfig.api.root + this.sdcConfig.api.GET_all_users
-        ).map(resp => resp.json());
+        ).map(resp => <IUserProperties[]> resp) ;
     }
 
     public getUser(userId:string) :Observable<IUserProperties> {
-        return this.httpService.get(
-            HttpService.replaceUrlParams(this.url, { id: userId })
-        ).map(resp => resp.json());
-    }
-
-    public createUser(userData:{[index:string]: any}) :Observable<IUserProperties> {
-        return this.httpService.post(
-            this.sdcConfig.api.root + this.sdcConfig.api.POST_create_user,
-            userData
-        ).map(resp => resp.json());
+        return this.http.get(
+            HttpHelperService.replaceUrlParams(this.url, { id: userId })
+        ).map(resp => <IUserProperties> resp);
     }
-
-    public deleteUser(userId:string) :Observable<IUserProperties> {
-        return this.httpService.delete(
-            HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.DELETE_delete_user, { id: userId })
-        ).map(resp => resp.json());
-    }
-
-    public editUserRole(userId:string, role:string) :Observable<IUserProperties> {
-        return this.httpService.post(
-            HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.POST_edit_user_role, { id: userId }),
-            { role: role }
-        ).map(resp => resp.json());
-    }
-
-    public getLoggedinUser():IUserProperties {
-        return this._loggedinUser;
-    }
-
-    public setLoggedinUser(loggedinUser:IUserProperties) {
-        this._loggedinUser = loggedinUser;
-    };
 }
diff --git a/catalog-ui/src/app/ng2/services/workflow.service.ts b/catalog-ui/src/app/ng2/services/workflow.service.ts
index 81a2ea3b7f..044ca37266 100644
--- a/catalog-ui/src/app/ng2/services/workflow.service.ts
+++ b/catalog-ui/src/app/ng2/services/workflow.service.ts
@@ -1,14 +1,13 @@
 import { Injectable, Inject } from "@angular/core";
-import { Response } from "@angular/http";
 import { Observable } from "rxjs/Observable";
-import { HttpService } from "./http.service";
 import { SdcConfigToken, ISdcConfig } from "../config/sdc-config.config";
+import { HttpClient } from "@angular/common/http";
 import { Component, OperationModel } from "app/models";
 
 interface WorkflowOutputParameter {
-    name: string,
-    type: string,
-    mandatory: boolean
+    name: string;
+    type: string;
+    mandatory: boolean;
 }
 
 interface WorkflowInputParameter extends WorkflowOutputParameter {
@@ -25,40 +24,31 @@ export class WorkflowServiceNg2 {
     WF_STATE_ARCHIVED = 'ARCHIVED';
     VERSION_STATE_CERTIFIED = 'CERTIFIED';
 
-    constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) {
+    constructor(private http: HttpClient, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) {
         this.baseUrl = sdcConfig.api.workflow_root;
         this.catalogBaseUrl = sdcConfig.api.POST_workflow_artifact;
     }
 
     public associateWorkflowArtifact(component: Component, operation: OperationModel): Observable<any> {
-        return this.http.post(this.baseUrl + '/workflows/' + operation.workflowId + '/versions/' + operation.workflowVersionId + '/artifact-deliveries', {
-                endpoint: this.catalogBaseUrl + '/' + component.getTypeUrl() + component.uuid + '/interfaces/' + operation.interfaceId + '/operations/' + operation.uniqueId + '/artifacts/' + operation.implementation.artifactUUID,
-                method: 'POST'
-            })
-            .map((res:Response) => {
-                return res.json();
+        return this.http.post<any>(this.baseUrl + '/workflows/' + operation.workflowId + '/versions/' + operation.workflowVersionId + '/artifact-deliveries', {
+                endpoint: this.catalogBaseUrl + '/' + component.getTypeUrl() + component.uuid + '/interfaces/' + operation.interfaceId + '/operations/'
+                + operation.uniqueId + '/artifacts/' + operation.implementation.artifactUUID, method: 'POST'
             });
     }
 
     public getWorkflows(filterCertified: boolean = true): Observable<any> {
-        return this.http.get(this.baseUrl + '/workflows' + (filterCertified ? '?versionState=' + this.VERSION_STATE_CERTIFIED : ''))
-            .map((res:Response) => {
-                return res.json().items;
-            });
+        return this.http.get<any>(this.baseUrl + '/workflows' + (filterCertified ? '?versionState=' + this.VERSION_STATE_CERTIFIED : ''));
     }
 
     public getWorkflowVersions(workflowId: string, filterCertified: boolean = true): Observable<any> {
-        return this.http.get(this.baseUrl + '/workflows/' + workflowId + '/versions' + (filterCertified ? '?state=' + this.VERSION_STATE_CERTIFIED : ''))
-            .map((res:Response) => {
-                return _.map(res.json().items, version => version);
+        return this.http.get<any>(this.baseUrl + '/workflows/' + workflowId + '/versions' + (filterCertified ? '?state=' + this.VERSION_STATE_CERTIFIED : ''))
+            .map((res) => {
+                return res.items;
             });
     }
 
     public updateWorkflowVersion(workflowId: string, versionId: string, payload: any): Observable<any> {
-        return this.http.put(this.baseUrl + '/workflows/' + workflowId + '/versions/' + versionId, payload)
-            .map((res:Response) => {
-                return res.json();
-            });
+        return this.http.put<any>(this.baseUrl + '/workflows/' + workflowId + '/versions/' + versionId, payload);
     }
 
 }