Skip to main content

· 2 min read

We’re excited to share that starting with WaveMaker 11.13, you can now use ng serve with WaveMaker exported Angular apps. This enhancement allows users to locally serve, test, and debug their generated Angular projects outside WaveMaker Studio with greater ease and flexibility.

How to Use ng serve with Your Exported App​

Follow these steps to get up and running:

1. Export your project​

  • In WaveMaker Studio, Click on Export Project -> Project as an Angular zip.
  • Download and extract the ZIP.

2. Install dependencies​

cd <exported-angular-app>

#Use Node.js version recommended by respective WaveMaker Studio Version

npm install

3. Run the app locally​

ng serve --open

The app runs locally at http://localhost:4200 similar to standard Angular app.

At this point, services/APIs will not load yet.

Configuring Backend Services​

The wavemaker application's backend server should be running/hosted either locally or in a remote server. That backend server url should be configured in the proxy configuration file.

  1. Open the proxy.conf.js file in the exported app.
  2. Update path targets with backend server URL.
  3. If required add the paths, based on the app use cases.

Sample proxy.conf.js entries:

module.exports = {
 "/services": {
     target: "https://<your-deployed-app-url>/",
     secure: true,
     changeOrigin: true
 },
 "/j_spring_security_check": {
     target: "https://<your-deployed-app-url>/",
     secure: true,
     changeOrigin: true,
     cookiePathRewrite: "/",
     cookieDomainRewrite: "localhost"
 }
};

Then re-run again with new proxy configuration.

ng serve --open

Now app will load APIs and services properly in the browser.

With ng serve working, we can now debug the WaveMaker Angular app locally like any standard Angular application.

note

Refer this documentation to extend WaveMaker generated Angular applications.

· 5 min read

Mobile design has come a long way from boxed-in layouts and padded screens. With modern devices offering bezel-less displays and immersive user experiences, it's become essential for apps to keep up with edge-to-edge UI standards. Until now, our mobile apps didn't fully embrace this capability—but that changes today.

We're excited to introduce full support for edge-to-edge mobile experiences in our platform. Whether you want a completely immersive layout or prefer to keep safe insets and margins, it's now up to you. With this release, we're giving developers complete control over how their apps appear—ensuring your product looks and feels modern, fluid, and native.

· 5 min read

WaveMaker Studio 11.11 brings smarter tools, cleaner workflows, and a more intuitive experience. This release focuses on performance and a future-ready architecture.

You’ll see major improvements to the Studio Canvas, a fully revamped Changes View for cleaner migrations, and a shift to standalone components in Angular for more modern, maintainable apps. On top of that, this release includes optimization tools, UI flexibility, and critical bug fixes—making 11.11 one of our most packed and purposeful updates yet.

Let’s walk through what’s new in 11.11.

· One min read

WaveMaker Studio now features dynamic browser titles, enhancing navigation and usability. Introduced in version 11.11.0, this update allows the browser tab title to reflect the current module, page, or action within the Studio, providing immediate context and making it easier to manage multiple open tabs.

This enhancement is to improve developer user experience by providing immediate context and making it easier to manage multiple open tabs.

· 4 min read

WaveMaker's Wizard widget now offers dynamic features for building flexible, multi-step forms.

WaveMaker Dynamic Wizard widget offers the following benefits.

  • Auto-generate wizard steps from a dataset
  • Load partial content into steps
  • Build forms dynamically based on user context
  • Set the default wizard step with index
  • Step management (Add, remove, and goto step)

· 3 min read

WaveMaker Studio v11.11 introduces significant enhancements to the Canvas, delivering a true What You See Is What You Get (WYSIWYG) experience. This update ensures that the design view in the Studio closely mirrors the live application.

Why This Matters​

The Canvas is the primary workspace where developers design and arrange UI components. Previously, inconsistencies between the Canvas and the live application led to confusion and additional adjustments.

With the latest improvements, the design-to-preview workflow becomes more seamless, allowing developers to build interfaces with greater confidence and efficiency.

· 4 min read

We have transitioned from Module-based architecture to Standalone components to shape the performance and maintainability of our application for years to come.

Module-based setup – A structure where code is organized into grouped modules.

Standalone components – Independent building blocks in Angular that don't require modules.

Why Shifting from Modules to Standalone Components​

In Angular's early stages, modules were introduced to manage growing application complexity. As Angular evolved, especially with the introduction of Standalone components, the need for explicit module declarations became less necessary, simplifying application architecture.

Now, with standalone components, you don’t need to group everything into modules. This makes the app setup simpler and more flexible.

· One min read

​WaveMaker has enhanced the app preview feature to make it more user-friendly. Previously, clicking Preview opened the app in a pop-up window, requiring extra steps like removing toolbars, copying URLs, and opening new tabs. Now, starting with version 11.11, clicking Preview opens the app directly in a new browser tab.

· 3 min read

Large Angular application bundles can slow down load times and degrade app performance, especially on slower networks. A common cause is unused localization files from libraries like Moment.js, @angular/global, and FullCalendar. These libraries often include support for multiple languages by default, but many applications only require a subset of them.

By removing these unused files, developers have achieved significant reductions in bundle size—up to 35% for Moment.js and 98% for @angular/global—resulting in faster load times and an improved user experience.