Angular 2 Proxy Configuration (CORS Headers Issue for local testing)


As part of integrating the WebSphere Commerce REST services in Angular2 application, created bunch of WCS MOCK REST Services for unit testing using SOAP UI. It helps to test multiple scenarios (different data and fail scenarios  ...etc).

You can use SOAPUI or other tools to mock the REST services during the development.

1.       Create and Start mock services (or you may backend services running on different port)
             



While creating the MOCK Service, I have given following port and host address.

       


Start the mock services by clicking “run” button, then you can access mock services on http://localhost:4646 



Problem : You will see the problem similar to below when you try to access these MOCK services from the Angular2 App because of cross domain (same origin) policy issues, We can mitigate this by adding Cross-Origin-Resource-Sharing  (CORS) headers in server level , if you backend (api server) supports.

     


Error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4646/wcs/resources/store/14321/cart/shipping_modes. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).


Solution:  As I am not using the any backend API server running in my local for adding CORS headers, thought to use the angular2 proxy configuration to bypass this errors.

1.       Create proxy.config.json file under project root directory
     


2.       Add following in proxy configuration file
{
  "/localapi/*": {
    "target": "http://localhost:4646",
    "pathRewrite": {
      "^/localapi": ""
    },   
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  }
}

3.       Then start the local angular dev server as shown below
a.       Using NPM START
Add “—proxy-config proxy.config.json” in package.json as shown below.
       



b.       Or Using NG SERVE
:/> ng serve –proxy-config proxy.config.json

4.       Use the “/localapi” context while making HTTP call from the angular 2
http.get("/localapi/wcs/resources/store/14321/cart/shipping_modes", options)


5.       Now when you access the application then browser makes call on 4200 port and get response from SOAP UI mock service that is running on 4646.

   
             

Debugging Angular 2 application in Visual Studio Code (Angular-Cli workspace)



1.       Go to debug view in the VSCode , and click on “gear” icon and select the “chrome”


2.       It will create “.vscode” folder and “launch.json” configuration file under it

3.       Start the Chrome in debug mode


Add “--remote-debugging-port=9222” while opening the chrome application (you can rename shortcut name also in “general” tab like “Google Chrome –Debug” then it will easy to find in start menu programs)




4.       Click “google chrome debug“ shortcut above, it will open chrome in debug mode. You can validate if the chrome is running in the debug mode or not by accessing the http://localhost:9222/
      
(Note: close all chrome instances before opening debug mode)

5.       Put breakpoint in the typescript file and launch the debug from debug view
                 


6.       Above default configuration works fine if you create angular 2 project without using the “Angular-CLI” or “webpack build”.  (Just need to make sure you have proper port numbers)
i.e
9222 àis the Chrome debug port
8080 àlocal server port number (where your angular app runs)

7.       But If you create the project using the Angular-Cli (which uses “WebPack” for application build), then control may not go to the our debug point at all .

Instead our debug point looks disabled with warning like “Breakpoint ignored because generated code not found (source map problem?). “   (Even though “SourceMap” configuration is set to “true” I was getting this problem.)



Problem


8.       To avoid this problem Add following to launch.json

9.       Following is full launch.json which worked for me (If you project is different path make sure to have proper path i.e. if you created project in D drive then “webpack:///D:*”).

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///C:*": "C:/*"
            },           
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///C:*": "C:/*"
            },           
            "webRoot": "${workspaceRoot}"
        }
    ]
}

10.   Now launch the debug configuration, control will go to our debug point
           




WebSphere Commerce Developer Enterprise(WCDE) v7- FEP6 to FEP8 upgrade - Part1


We need to execute the following steps to upgrade WebSphere Commerce Developer Enterprise(WCDE) v7- FEP6 to FEP8.

Step 1: Update WAS Fixpack (min required is 7.0.0.29)

a.       Install UpdateInstaller for WAS (latest WAS UpdateInstaller 7.0.0.39).
b.       Install WAS Fix using UpdateInstaller (min required is 7.0.0.29 for FEP8)

Step 2: Update WCDE with Feature Pack.

a.       Install the Commerce Server Fix pack (min required is 7.0.0.9)
b.       Update the Feature Pack 8

Step 3: Installation Verification.

a.       Using versionInfo.bat/sh
b.       CheckEnablementStatus.bat/sh
c.       Using DB Query

Step 4: Issues during installation & Fixes.

a.       Missing MadisionMobile.sar and causes installation failures


References

1.       Migrating WebSphere Commerce Developer

2.       WAS update installer

3.       WAS Fix pack

4.       FEP 8 Announcement

WebSphere Commerce Developer Enterprise(WCDE) v7- FEP6 to FEP8 upgrade - Part2 (WAS Fixpack update)

Download and install the WAS UpdateInstaller software


1.       Downlowad the update installer from below url.


           NOTE: Have downloaded “7.0.0.39-WS-UPDI-WinIA32.zip” which is latest update installer.

2.       Extract and click on the “install.exe”

3.       It will ask location to install the updateinstaller, give path like

            C:\Program Files (x86)\IBM\SDP\runtimes\base_v7\updi
            i.e.
            /WAS Installed Location/updateInstaller

NOTE: Tried to give installation directory name as “C:\Program Files (x86)\IBM\SDP\runtimes\ base_v7\UpdateInstaller”, but as path is too long I had to give 
directory name as “updi”


Download and install the WebSphere Application Server Fix Pack


1.       Download WAS fixpack version 7.0.0.29 (min WAS Fix required for WCS7 FEP8)

2.       Place the 7.0.0-WS-WAS-WinX32-FP0000029.pak under following directory
                   C:\Program Files (x86)\IBM\SDP\runtimes\base_v7\updi\maintenance

       NOTE:    “C:\Program Files (x86)\IBM\SDP\runtimes\base_v7” is my local WAS server location.

3.       Click on the “update.exe” from the “C:\Program Files (x86)\IBM\SDP\runtimes\base_v7\updi” directory


4.       Select the WAS production location

            


5.       Select “install maintenance” option
            


6.       It will ask for the fix pack location point to “C:\Program Files (x86)\IBM\SDP\runtimes\base_v7\updi\maintenance”

             


7.       Click Next (by default it selects fixpack location)

            

            


8.       Confirm and click next and “finish” after installation.


            

WebSphere Commerce Developer Enterprise(WCDE) v7- FEP6 to FEP8 upgrade - Part3

Used installation manager to update following

a.       Commerce Developer with Fixpack ( 7.0.0.9)
b.       Commerce Developer with Feature Pack (FEP 8)

Add following repositories to Installation Manager

1.       Download “7.0.0-WS-WCDeveloperEnterprise-FP009.zip” file and extract zip.
2.       Download “WC_V7.0_-_FEP8_FOR_MP_ML” and extract.
3.       Open Installation manager (Run as Admin)
4.       Add following repository to Installation Manger (PreferencesàManage Repositories).
            WC_V7.0_-_FEP8_FOR_MP_ML\developer\repository.config
            7.0.0-WS-WCDeveloperEnterprise-FP009\repository.config

5.       Select “update” in Installation Manager and select WebSphere Commerce and click next.

            

            


            


            


            


            


WebSphere Commerce Developer Enterprise(WCDE) v7- FEP6 to FEP8 upgrade - Part4 (Check WCS VersionInfo)

Once the FEP 8 feature update is done , We can validate the version using any of following ways.

a.       Using versionInfo.bat

       /WCDE-install-direcotry/bin/versionInfo.bat
       


b.       CheckEnablementStatus.bat



Will generate the enableFeature.log with all details.
CheckEnablementStatus:
     [echo] component list file = W:\IBM\WCDE_E~1\properties\version\FEP8.componentlist
[forEachTask] featureName: foundation

CheckPrereqInDB:
[CheckFeaturePrerequisite] Feature foundation is enabled in EAR.
[CheckFeaturePrerequisite] Feature foundation is enabled in DB.

CheckFeature:
     [echo] ------------------------------------------------------
     [echo] Feature           - INSTALLED -        - DB -        - EAR -
     [echo] ------------------------------------------------------
     [echo] foundation        7.0.8.0        7.0.8.0        7.0.8.0
     [echo] ------------------------------------------------------
[forEachTask] featureName: management-center

CheckPrereqInDB:
[CheckFeaturePrerequisite] Feature management-center is enabled in EAR.
[CheckFeaturePrerequisite] Feature management-center is enabled in DB.

CheckFeature:
     [echo] ------------------------------------------------------
     [echo] Feature           - INSTALLED -        - DB -        - EAR -
     [echo] ------------------------------------------------------
     [echo] management-center        7.0.8.0        7.0.8.0        7.0.8.0
     [echo] ------------------------------------------------------
[forEachTask] featureName: store-enhancements

CheckPrereqInDB:
[CheckFeaturePrerequisite] Feature store-enhancements is enabled in EAR.
[CheckFeaturePrerequisite] Feature store-enhancements is enabled in DB.

CheckFeature:
     [echo] ------------------------------------------------------
     [echo] Feature           - INSTALLED -        - DB -        - EAR -
     [echo] ------------------------------------------------------
     [echo] store-enhancements        7.0.8.0        7.0.8.0        7.0.8.0
     [echo] ------------------------------------------------------
[forEachTask] featureName: content-version

CheckPrereqInDB:
[CheckFeaturePrerequisite] Feature content-version is enabled in EAR.
[CheckFeaturePrerequisite] Feature content-version is enabled in DB.

CheckFeature:
     [echo] ------------------------------------------------------
     [echo] Feature           - INSTALLED -        - DB -        - EAR -
     [echo] ------------------------------------------------------
     [echo] content-version        7.0.8.0        7.0.8.0        7.0.8.0
     [echo] ------------------------------------------------------
[forEachTask] featureName: social-commerce

CheckPrereqInDB:

CheckFeature:
     [echo] ------------------------------------------------------
     [echo] Feature           - INSTALLED -        - DB -        - EAR -
     [echo] ------------------------------------------------------
     [echo] social-commerce        7.0.8.0        N/A        N/A
     [echo] ------------------------------------------------------
[forEachTask] featureName: location-services

CheckPrereqInDB:
[CheckFeaturePrerequisite] Feature location-services is enabled in EAR.
[CheckFeaturePrerequisite] Feature location-services is enabled in DB.

CheckFeature:
     [echo] ------------------------------------------------------
     [echo] Feature           - INSTALLED -        - DB -        - EAR -
     [echo] ------------------------------------------------------
     [echo] location-services        7.0.8.0        7.0.8.0        7.0.8.0
     [echo] ------------------------------------------------------
BUILD SUCCESSFUL

BUILD SUCCESSFUL
Total time: 5 seconds

c.       Using DB query.

           Select * from site;
           

d.     NIFStack.xml

For complete details of fix pack, Feature Pack and a list of APARs installed for WebSphere Commerce

WebSphere Commerce Developer Enterprise(WCDE) v7- FEP6 to FEP8 upgrade - Part5

Problem:

Installation was keep failing because of the following error.

Exception Trace:

(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance, err, Invalid entry path: starterstores/AddOnFeatures/MadisonsMobile.sar/StoreAssetsDir/mobile/ShoppingArea/CatalogSection/SearchSubsection/CatalogSearchResultOnlyDisplay.jspf
(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance, err, Invalid entry path: starterstores/AddOnFeatures/MadisonsMobile.sar/StoreAssetsDir/mobile/ShoppingArea/CatalogSection/SearchSubsection/CatalogSearchResultOnlyDisplay.jspf
(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance, err, com.ibm.ws.install.ni.framework.NIFException: Invalid entry path: starterstores/AddOnFeatures/MadisonsMobile.sar/StoreAssetsDir/mobile/ShoppingArea/CatalogSection/SearchSubsection/CatalogSearchResultOnlyDisplay.jspf
                at com.ibm.ws.install.ni.ismp.utils.ISMPLogUtils.logException(ISMPLogUtils.java:46)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.execute(InstallNIFMaintenance.java:105)
                at com.installshield.wizard.RunnableWizardBeanContext.run(RunnableWizardBeanContext.java:20)
Caused by: java.io.IOException: Invalid entry path: starterstores/AddOnFeatures/MadisonsMobile.sar/StoreAssetsDir/mobile/ShoppingArea/CatalogSection/SearchSubsection/CatalogSearchResultOnlyDisplay.jspf
                at com.ibm.ws.install.ni.framework.fileactions.ZIPAddFileActionPlugin.getFSRelativePathStopPosition(ZIPAddFileActionPlugin.java:250)
                at com.ibm.ws.install.ni.framework.fileactions.ZIPAddFileActionPlugin.getTargetFileSystemEntry(ZIPAddFileActionPlugin.java:187)
                at com.ibm.ws.install.ni.framework.fileactions.ZIPAddFileActionPlugin.execute(ZIPAddFileActionPlugin.java:53)
                at com.ibm.ws.install.ni.framework.fileactions.FileActionPlugin.executeFileAction(FileActionPlugin.java:54)
                at com.ibm.ws.install.ni.updi.component.was.ComponentFileActions.execute(ComponentFileActions.java:95)
                at com.ibm.ws.install.ni.updi.component.was.ComponentDeployAction.execute(ComponentDeployAction.java:48)
                at com.ibm.commerce.install.updi.product.wc.WCUpdateComponent.execute(WCUpdateComponent.java:113)
                at com.ibm.ws.install.ni.framework.component.ComponentAction.executeComponentActions(ComponentAction.java:215)
                at com.ibm.ws.install.ni.framework.component.ComponentAction.executeBackupComponentActions(ComponentAction.java:52)
                at com.ibm.ws.install.ni.framework.install.NIFPackageApplicationPlugin.backupIfNecessary(NIFPackageApplicationPlugin.java:412)
                at com.ibm.ws.install.ni.framework.install.NIFPackageApplicationPlugin.executeInBackwardCompatibleMode(NIFPackageApplicationPlugin.java:221)
                at com.ibm.ws.install.ni.framework.install.NIFPackageApplicationPlugin.execute(NIFPackageApplicationPlugin.java:110)
                at com.ibm.ws.install.ni.framework.maintenanceplugins.FixpackApplicationPlugin.execute(FixpackApplicationPlugin.java:87)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.executeTheseInstallPackages(InstallNIFMaintenance.java:1043)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.executeThisInstallPackage(InstallNIFMaintenance.java:611)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.executeThisInstallPackage(InstallNIFMaintenance.java:994)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.executeThisInstallPackage(InstallNIFMaintenance.java:489)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.executeThisInstallPackage(InstallNIFMaintenance.java:429)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.performExecution(InstallNIFMaintenance.java:376)
                at com.ibm.ws.install.ni.ismp.actions.InstallNIFMaintenance.execute(InstallNIFMaintenance.java:74)
                ... 1 more

(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.SettleNIFRegistryAction, msg1, Current install/uninstall process failed.
(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.SetExitCodeAction, msg1, CWUPI0000I: EXITCODE=1
(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.ISMPLogFileAction, msg1, For more information on installing components, see the following trace file:
C:/IBM/WCDE_ENT70\logs\update\7.0.0-WS-WCDeveloperEnterprise-FP009.install\updatetrace.log.gz
(Feb 11, 2016 4:16:57 PM), Install, com.ibm.ws.install.ni.ismp.actions.ISMPLogFileAction, msg1, For more information on running configuration commands, see the following trace file:

Solution:

To mitigate this issue,
a.       from the extracted “WC_V7.0_-_FEP8_FOR_MP_ML” zip file, copy all sar files from \WC_V7.0_-_FEP8_FOR_MP_ML\developer\native\wc.toolkit.native.store-enhancements_7.0.8.20141114_0840\components\store-enhancements\starterstores to “/WCDE-Install-dir/starterstores”.
b.       And run the update using installation manager again.


NOTE: if “starterstores” directory is not there under /WCDE-install-Dir/ , create that directory