• Extract the downloaded project ZIP file from WaveMaker Studio.
• Open the project in a code editor (e.g., VS Code).
• Navigate to the project directory:
  cd generated-angular-app
• Install dependencies:
  npm install
• Build the application:
  npm run build
• Serve the application:
  npx http-server dist

1. Acorn Issue:
   If you encounter an acorn-related issue, delete package-lock.json before running npm install:
   rm package-lock.json
npm install
2. ng-serve support:
   ng serve is not supported yet. We plan to enable it in an upcoming release. For now, build the project to run and debug it.

WaveMaker creates a standard Maven-compliant project, enabling developers to manage and extend the codebase independently. To modify the code without WaveMaker Studio, developers must grasp the project’s file structure. UI-related adjustments for a web application primarily occur within the src/app/pages/ folder, where each page functions as a component containing its associated files. Typical tasks include altering existing layouts, incorporating new components, making API calls, and implementing data and event binding, as well as creating pages and adding their routes. This comprehension ensures efficient maintenance and customization of the application outside the studio.

When developers modify the UI on existing pages, they primarily work with components and bind data to them. To implement specific functionalities, they must write business logic and handle event binding. Now, let’s explore how they can accomplish this.

Since it is generated by angular code, developers have full freedom to either to use the components provided by WaveMaker runtime (which is open-sourced) or use any other libraries like angular material.

Let's have a glance at what WaveMaker Angular transformed markup looks like. These are the Angular templates generated for each page or component. They include the markup for widgets and input bindings.

Data binding: WaveMaker relies on an abstraction called Variables which holds meta data for calling APIs and binding with components. We are not generating and exposing angular services code for as of today.

Attribute binding: As we see, it is important for developers to WaveMaker to follow WaveMaker defined way for attribute binding while working with its components

Event binding: The same pattern of binding applies to events as well. But all the developers must write js methods that are referred, in corresponding {compoents}.script.js file

Since it is now a free angular project, developers have flexibility to easily add other angular component libraries directly and work with them to take development forward. For example: Below is the sample that shows how they can add material components to existing pages and do data binding and event binding in a regular way.