Using CodeLive for Angular

CodeLive makes it simple to see which Angular components are being loaded on a web page and quickly jump from a component on the page to the source code.

CodeLive is available in MyEclipse, CodeMix, and Angular IDE.

1. Setting up CodeLive

CodeLive connects the browser to the IDE. You have the option to turn on CodeLive for each Angular project.

1.1 Turning CodeLive On/Off

You have the option to turn on CodeLive for each Angular project. There are two different methods to turn this feature on or off.

From the Servers View Toolbar

Expand the Angular CLI in the Servers view, select an Angular project and click the Enable CodeLive button. This button acts as a toggle, turning CodeLive on or off. The icon is highlighted when CodeLive is enabled.

CodeLive Button

From the Servers View Context-Menu

Expand the Angular CLI in the Servers view, right-click an Angular project and select CodeLive. This menu option acts as a toggle, turning CodeLive on or off.  The icon is highlighted when CodeLive is enabled.

CodeLive Menu Option

2. Viewing Source Code

When viewing a page in the browser, you have the option to view the source files loaded in the browser and open any file in the IDE or jump directly to the source file from an element on the page. 

2.1 Viewing Active Components and Opening Source Files

  1. View the web page in your browser.
  2. Click the CodeLive icon CodeLiveIcon to open the CodeLive Dashboard. The dashboard lists the active Angular components. Hover over a component and an icon appears next to the component for each file associated with the component: TypeScript tsfileicon, HTML template htmlfileicon or CSS cssfileicon.

    cfcodelivedashboardang

    CodeLive Dashboard
  3.  Click the icon for the file you want to open. The file opens in the editor. 

2.2 Jumping to Source Code from a Component

  1. View the web page in your browser.
  2. Click the Magic Wand icon 2016-07-26_9-43-29.
  3. Hover over a component on the page to view the component name.
  4. Click the component to view the dashboard list filtered for the selected component.
  5. Hover over the component and an icon appears next to the name for each file associated with the component: TypeScript tsfileicon, HTML template htmlfileicon or CSS cssfileicon.
  6.  Click the icon for the file you want to open. The file opens in the editor. 

3. Compatibility Matrix

Live Preview was successfully tested in the following environments.

ChromeFirefoxInternet ExplorerEdgeSafariInternal Browser
Win 7 64XXX
Windows 8.1 64XXX
Windows 10 64XXXXX
Linux Mint 16/17XX
OSX 10.13.6XX
Linux Fedora 23 x64XX