!!! Following this approach does not seem to work well at the moment. Don't use !!!

Building the Angular front-end

Note: The following instructions are for an Eclipse environment. To see the instructions for Visual Studio Code, please see Developing Angular with Visual Studio Code.

Start Eclipse and install the Angular IDE.

Got to "Help→Eclispe Marketplace"

search for "Angular" and install the Angular IDE from Genuitec, LLC (the top result in the image below)

Press the "install" button and follow the installation wizard instructions. If Eclipse wants to restart, let it do so.

Angular IDE will replace the start-up screen with its own, best to select the option to get back to the default.

Right click on the Project Explorer and select "Import→Import ..."

Select Git→Projects from Git

Select "Clone URI"

Enter the details of your for of ngvl

Press Next

In the Branch Selection dialog, press Next

In the Local Destination dialog, navigate to the eclipse workspace. This should result in Directory pointing to folder ngvl in your Eclipse workspace.

Press Next

In the "Select a wizard to use for importing projects" dialog, select "Import using the New Project wizard"

Press "Finish"

Select "Angular→Angular Project"

Press "Next".

In the next panel fill in the following values:

Project name: ngvl

Unselect "Use default locarion" and browse to the ngvl folder in your workspace.

Angular CLI version: 1.6.5

Node.js version: 8.9.4

NPM version: 5.6.0

Press "Finish"

Switch to the Angular Perspective. There should be a tab called "Terminal+" and you should see npm being busy installing dependencies there.

After this has finished (or aborted with an error message regarding something wrong in portal-ui, if an error dialog pops up asking whether to delete the "failed" project, select "No"), select Terminal+ and enter:

npm install yarn

and then

yarn install 

(Note: this does not always seem to work. At times I had to shut down Eclipse and delete the folders ngvl/node_modules and / or the folders in ~/.webclipse/nodejs/)

After this finished, in the "Servers" tab select "AngularCLI->ngvl→Start Server"

Once this has finished starting up, you should be able to point a browser to http://localhost:4200

To connect the Angular front-end to the Java backend on your dev machine, edit the file environments.ts and set portalBaseUrl to 'http://localhost:8080/VGL-Portal/'

  • No labels