如何将Angular与Spring Boot项目合并为单个WAR包进行部署

Got it, let's walk through exactly how to combine your existing Angular and Spring Boot projects into one deployable WAR file. This is a standard setup and works seamlessly once you get the pieces aligned.

Step 1: Build Your Angular Frontend for Production #

First, generate the optimized static files for your Angular app:

• Open your Angular project in the terminal
• Run the production build command:

  ng build --prod  # For Angular versions < 16
  # OR for Angular 16+
  ng build --configuration production
  

This will create a dist/your-angular-app-name folder with all minified CSS, JS, and static assets.

Step 2: Move Angular Assets to Spring Boot #

Spring Boot automatically serves static content from the src/main/resources/static directory. Copy everything from the Angular dist folder into this directory in your Spring Boot project.

Pro tip: If you're using Maven, you can automate this step with the maven-resources-plugin to avoid manual copying—just add a configuration to copy the Angular dist files during the build phase.

Step 3: Fix Angular SPA Routing in Spring Boot #

Angular uses client-side routing, so any non-API requests (like /dashboard or /profile) need to be forwarded to index.html to let Angular handle them. Create a simple controller in your Spring Boot project:

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

@Controller
public class SpaForwardController {

    // Forward all non-static, non-API requests to index.html
    @GetMapping(value = "/**/{path:[^\\.]*}")
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

This ensures that deep links and frontend routes work correctly without 404 errors.

Step 4: Configure Spring Boot for WAR Packaging #

Make sure your Spring Boot project is set up to build a WAR:

1. In your pom.xml, set the packaging type to WAR:

   <packaging>war</packaging>
   

2. If you're deploying to an external web server (like Tomcat), exclude the embedded Tomcat dependency to avoid conflicts:

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-tomcat</artifactId>
       <scope>provided</scope>
   </dependency>
   

3. Ensure your main application class extends SpringBootServletInitializer:

   import org.springframework.boot.SpringApplication;
   import org.springframework.boot.autoconfigure.SpringBootApplication;
   import org.springframework.boot.builder.SpringApplicationBuilder;
   import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
   
   @SpringBootApplication
   public class YourBackendApplication extends SpringBootServletInitializer {
   
       @Override
       protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
           return application.sources(YourBackendApplication.class);
       }
   
       public static void main(String[] args) {
           SpringApplication.run(YourBackendApplication.class, args);
       }
   }
   

This allows Spring Boot to work as a traditional WAR application in external servers.

Step 5: Build the Combined WAR #

Now, build the final WAR file from your Spring Boot project:

• If using Maven:

  mvn clean package
  

• If using Gradle:

  ./gradlew bootWar
  

The generated WAR file will be in the target/ (Maven) or build/libs/ (Gradle) directory. This single WAR contains both your Angular frontend and Spring Boot backend.

Key Notes to Avoid Issues #

• API Route Prefix: Make sure your Spring Boot API endpoints use a distinct prefix (like /api) so they don't get caught by the SPA forward controller. This keeps backend requests separate from frontend routes.
• Angular Base Href: If you're deploying the WAR under a specific context path (e.g., http://your-server/your-app), set the base href during Angular's build:

  ng build --prod --base-href /your-app/
  

• Environment Variables: Update your Angular environment.prod.ts to use relative paths for API calls (e.g., api/users instead of http://localhost:8080/api/users) so it works seamlessly with the deployed context path.

内容的提问来源于stack exchange，提问作者Nikhil Bukkitu