How to execute an app using Angular Generator

Unofficial Content

With Angular applications development, when you execute F5 in the KB, a window console is opened, the application is automatically installed, and the server is launched.

If this fails, you can execute it manually by following these steps:

Open a command line prompt, change directory to <KB Model Directory>\mobile\Angular\<main> (e.g.:LightCRM\CSharpModel\mobile\Angular\LightCRM) and run:

  • npm install

The npm install command installs all the necessary libraries to run the application under the  <KB Model Directory>\mobile\Angular\LightCRM\node_modules folder. This folder contains all the libraries needed to execute the application, such as Angular, the library of GeneXus controls, etc., and is handled by npm from packages.json file. The packages.json file contains the list of libraries that must be installed, which are necessary to run the application, and is created by the generator.

You only need to execute it once after installing a new GeneXus build.

  • ng serve -o


The ng serve command launches the server, watches the files, and rebuilds the app as GeneXus makes changes to those files.
The -o option automatically opens the browser to http://localhost:4200/.

Once these commands are executed, you should keep the cmd console open so the changes in GeneXus are automatically compiled and the browser is open to show the changes.

Note:

When using a .NET generator for the server side, the web.config file should be edited to avoid the error: 'Access-Control-Allow-Origin' header is present on the requested resource.

Under the <system.webServer> tag, add the following:

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>