Angular 20 + Micronaut

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

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"

}

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

• Create a workspace and initial application
  

ng new ui

• We can select select any choice, however we will stick to SCSS.

• The angular CLI will install few dependencies

cd new ui

• Run the application
  

ng serve --open

Enter the URL with hot-reload for fast development.

Micronaut: Runs the backend API on

Run the Micronaut app, and head over to the browser 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

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

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 },];

For local development we can reply on ng server. The routing will work on 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);

    }

}

Application.properties

micronaut.router.static-resources.default.enabled=true

micronaut.router.static-resources.default.mapping=/**

micronaut.router.static-resources.default.paths=classpath:public

Development vs Production Workflow

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

  }

}

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