DEV Community

anand jaisy
anand jaisy

Posted on

Angular 20 + Micronaut

#angular #micronaut #java #javascript

In certain scenarios—particularly with smaller applications—it can be beneficial to serve both the frontend and backend from a single service. Instead of deploying the frontend (e.g., an Angular application) and the backend (e.g., a REST API) on separate servers, a more efficient approach may be to consolidate them into a single, lightweight deployment. This strategy helps reduce infrastructure complexity and minimizes the application’s footprint.

Micronaut, with its fast startup time and minimal resource usage, pairs well with Angular for such use cases.

In this blog post, we’ll explore how to serve an Angular application directly from a Micronaut backend, creating a unified deployment that is simple, efficient, and well-suited for small to medium-sized projects.

Step 1: Setting Up the Micronaut app

Head over to Micronaut launch, just create a basic application

Micronaut app start

If we look into the dependency, its a basic minimal Micronaut app

plugins {
    id("io.micronaut.application") version "4.5.4"
    id("com.gradleup.shadow") version "8.3.7"
    id("io.micronaut.aot") version "4.5.4"
}

version = "0.1"
group = "micronaut.angular"

repositories {
    mavenCentral()
}

dependencies {
    annotationProcessor("io.micronaut:micronaut-http-validation")
    annotationProcessor("io.micronaut.serde:micronaut-serde-processor")
    implementation("io.micronaut.serde:micronaut-serde-jackson")
    compileOnly("io.micronaut:micronaut-http-client")
    runtimeOnly("ch.qos.logback:logback-classic")
    testImplementation("io.micronaut:micronaut-http-client")
}


application {
    mainClass = "micronaut.angular.Application"
}
java {
    sourceCompatibility = JavaVersion.toVersion("21")
    targetCompatibility = JavaVersion.toVersion("21")
}


graalvmNative.toolchainDetection = false

micronaut {
    runtime("netty")
    testRuntime("junit5")
    processing {
        incremental(true)
        annotations("micronaut.angular.*")
    }
    aot {
        // Please review carefully the optimizations enabled below
        // Check https://micronaut-projects.github.io/micronaut-aot/latest/guide/ for more details
        optimizeServiceLoading = false
        convertYamlToJava = false
        precomputeOperations = true
        cacheEnvironment = true
        optimizeClassLoading = true
        deduceEnvironment = true
        optimizeNetty = true
        replaceLogbackXml = true
    }
}

tasks.named<io.micronaut.gradle.docker.NativeImageDockerfile>("dockerfileNative") {
    jdkVersion = "21"
}
Enter fullscreen mode Exit fullscreen mode

Now that our backend service is set up and ready, it's time to focus on the frontend. In this section, we'll set up an Angular application using the standard Angular CLI, which provides a streamlined and efficient way to scaffold and manage Angular projects.

Angular setup

  • Install the Angular CLI 
npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode
  • Create a workspace and initial application 
ng new ui
Enter fullscreen mode Exit fullscreen mode
  • We can select select any choice, however we will stick to SCSS.

css

We don't want SSR, our choice will be N

ssr

  • The angular CLI will install few dependencies

Dependencies

  • Once the dependencies are install, we can see the below project structure

UI project

cd new ui
Enter fullscreen mode Exit fullscreen mode
  • Run the application 
ng serve --open
Enter fullscreen mode Exit fullscreen mode

Enter the URL http://localhost:4200/ in the browser and we will the angular app is running

Development Workflow

During development, it's perfectly fine (and often preferable) to run Angular and Spring Boot as separate applications:

Angular CLI: Serves the frontend on http://localhost:4200 with hot-reload for fast development.

Micronaut: Runs the backend API on http://localhost:8080.

This separation allows for:
✔ Faster frontend iterations (thanks to Angular's live reload)
✔ Independent debugging of backend APIs
✔ Mock API responses during early development

The Production Challenge

In production, we typically want to serve both applications as a single unit for:
✔ Simplified deployment
✔ Reduced cross-origin issues (CORS)
✔ Better performance (serving static assets directly from the backend)

Configuring Angular to Deploy as Spring Boot Static Content for production

Understanding the Setup

By default, Angular builds to /dist/ui, but we need it to output directly to Spring Boot's static resources folder where it can be automatically served. Here's how to make this work seamlessly:

  • Step 1: Modify Angular's Output Path 
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "outputPath": "dist/ui",
    },
}
}
Enter fullscreen mode Exit fullscreen mode

Lets change the "outputPath": "dist/ui" to the Micronaut resource directory

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "outputPath": "../src/main/resources/static",  // Changed from "dist/ui"
      "index": "src/index.html",
      // ... rest of your config
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

"outputPath": "../src/main/resources/static"

Since now the outputPath is pointing to the Micronaut resources, we can run angular CLI command to build the files, we must point to the root directory of the angular app in our case ui

  • Step 2: Build and Verify 
ng build --configuration production
Enter fullscreen mode Exit fullscreen mode

We will see the below logs

 ng build --configuration production
Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-3BERZHFR.js      | main          | 208.01 kB |                56.74 kB
polyfills-FFHMD2TL.js | polyfills     |  34.52 kB |                11.28 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 242.53 kB |                68.02 kB

Application bundle generation complete. [2.279 seconds]

Output location: /Users/san/project/Sample/AngularTest/src/main/resources/static
Enter fullscreen mode Exit fullscreen mode

Notice the output location here Output location: /Users/san/project/Sample/AngularTest/src/main/resources/static. The files are been output the the Micronaut resources directory.

directory

Run the Micronaut app, and head over to the browser http://localhost:8080 we will see there is no angular app.

If you have looked closely to the resources >> static directory, there is browser directory is created by angular build command, and if we look into that directory we can see the index.html and .js file. For angular to work that needs to be on outside of the browser directory, because spring doesn't know anything about browser directory.

  • Solution 1 - We can move those files outside of the browser Now, if we run our Micronaut app, and navigate to http://localhost:8080 we will see angular application

Well this works right, hmmmm not that effective

The problem with this solution is that we need to manually move the files, lets see how we can fix this.

Better Solution

 "outputPath": {
              "base": "../src/main/resources/static",
              "browser": ""
            },
            "deleteOutputPath": false
Enter fullscreen mode Exit fullscreen mode

Include browser ="" to generate file inside the static directory and don't delete other files by including "deleteOutputPath": false,. Now if we run the command ng build --configuration production we can see all the files are generated within static

Add a new component

ng g c Home // This will generate new Home Component
Enter fullscreen mode Exit fullscreen mode

Include this component in the router section

import { Routes } from '@angular/router';
import {HomeComponent} from './home/home.component';

export const routes: Routes = [{ path: 'home', component: HomeComponent },];
Enter fullscreen mode Exit fullscreen mode

For local development we can reply on ng server. The routing will work on http://localhost:4200/home

For Micronaut to include the router we need to build again

ng build --configuration production
Enter fullscreen mode Exit fullscreen mode

If we navigate to http://localhost:8080/home we will face an issue as 404 not found

To fix this we have to do configuration SPA routing

@Controller("/")
public class SpaController {
    @Inject
    ResourceResolver res;

    @Get("/{path:(?!.*\\.).*}")
    @Produces(MediaType.TEXT_HTML)
    public HttpResponse<?> refresh(@PathVariable String path) {
        StreamedFile indexFile = new StreamedFile(res.getResource("classpath:public/index.html").get());
        return HttpResponse.ok(indexFile);
    }
}
Enter fullscreen mode Exit fullscreen mode

Application.properties

micronaut.router.static-resources.default.enabled=true
micronaut.router.static-resources.default.mapping=/**
micronaut.router.static-resources.default.paths=classpath:public
Enter fullscreen mode Exit fullscreen mode

Development vs Production Workflow

dev vs prod

Now if we run the spring boot app and navigate to http://localhost:8080/home we will see our home component.

For development, configure Angular's proxy to avoid CORS issues:

// src/proxy.conf.json
{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

The Best of Both Worlds
By configuring Angular to build directly into Micronaut static resources folder, we've created a powerful full-stack solution that:

✔ Simplifies Deployment - A single JAR contains both frontend and backend
✔ Improves Performance - Static assets are served efficiently by the embedded Tomcat server
✔ Maintains Flexibility - Keep separate dev servers during development while unifying for production

Top comments (0)