如何将Angular 7应用集成到Spring Boot Jar包（Gradle构建）

Got it, let's walk through exactly how to package your Angular 7 app into a Spring Boot JAR so you can access it via http://localhost:8081/ just by running java -jar App.jar. We'll cover manual setup first, then automate the process with Gradle, plus fix the SPA routing issue you'll definitely run into.

Step 1: Build Your Angular 7 App for Production #

First, make sure your Angular app builds correctly. Navigate to your Angular project directory and run:

ng build --prod

This generates an optimized production build in the dist/[your-app-name] folder (replace [your-app-name] with the name defined in your Angular angular.json).

Step 2: Copy Angular Build Files to Spring Boot's Static Resources #

Spring Boot automatically serves static content from src/main/resources/static or src/main/resources/public.

• If the static folder doesn't exist in your Spring Boot project, create it at src/main/resources/static.
• Copy all files and folders from dist/[your-app-name] into src/main/resources/static.

At this point, if you build your Spring Boot JAR and run it, you could access the app at http://localhost:8081/—but direct links to Angular routes (like http://localhost:8081/dashboard) will throw a 404. Let's fix that next.

Step 3: Fix SPA Routing with a Spring Controller #

Angular is a single-page app, so Spring Boot needs to forward all non-API requests to index.html. Create a new controller class in your Spring Boot project:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SpaForwardController {

    // Forward all non-API GET requests to index.html
    @GetMapping(value = {"/", "/{x:[\\w\\-]+}", "/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}"})
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

This ensures any request that doesn't start with /api gets sent to Angular's entry point, so your Angular routes work as expected.

Step 4: Automate the Process with Gradle #

Instead of manually copying files every time, let's configure Gradle to build the Angular app and copy its output automatically when building the Spring Boot JAR.

Add these tasks to your Spring Boot project's build.gradle file:

// Task to build the Angular app
task buildAngular(type: Exec) {
    // Update this path to point to your Angular project directory
    workingDir = file("frontend")
    // Handle Windows vs Unix-like systems
    commandLine = System.getProperty('os.name').toLowerCase().contains('windows') ? 
        ['cmd', '/c', 'ng', 'build', '--prod'] : 
        ['ng', 'build', '--prod']
}

// Task to copy Angular build files to Spring Boot's static folder
task copyAngularDist(type: Copy) {
    // Update this path to match your Angular build output directory
    from file("frontend/dist/frontend")
    into file("src/main/resources/static")
}

// Link tasks to the build process: build Angular first, then copy files, then build the JAR
processResources.dependsOn copyAngularDist
copyAngularDist.dependsOn buildAngular

• Adjust the workingDir and from paths to match your actual Angular project location (e.g., if your Angular app is in the root of your Spring Boot project, replace frontend with .).

Step 5: Test the Integrated JAR #

1. Build the Spring Boot JAR with Gradle:
   • On Linux/macOS: ./gradlew build
   • On Windows: gradlew.bat build
2. Navigate to the build/libs directory and run your JAR:

   java -jar App.jar
   

3. Open your browser and go to http://localhost:8081/—your Angular app should load, and all routes should work correctly.

Key Notes #

• Make sure your Spring Boot app is set to use port 8081: add server.port=8081 to src/main/resources/application.properties or application.yml.
• For Angular API calls, use relative paths like /api/your-endpoint to avoid cross-origin issues (since both the frontend and backend are served from the same port).

内容的提问来源于stack exchange，提问作者Pawan Patil