Spring Boot与Angular(5)同项目最佳实践及结构选型咨询

Great question! Combining Spring Boot and Angular (v5) in a single project is super common, and each of the three approaches you listed has its own use cases. Let’s break down the pros, cons, and my recommended pick:

Option 1: Maven Multi-Module Project (Frontend + Backend Separate Modules) #

• Pros:
  • Complete separation of concerns: Frontend and backend teams can work independently without stepping on each other’s toes. You can run Angular’s dev server with hot reload separately, and test Spring Boot endpoints without touching frontend code.
  • Clean isolation of toolchains: Angular CLI works natively in its module, and Spring Boot’s Maven setup stays pure without any frontend-related clutter.
• Cons:
  • Adds configuration overhead: You need to maintain a parent POM and sync build phases between modules (e.g., ensuring frontend builds before backend packages).
  • Local development might require running two servers (or setting up a proxy in Angular to forward API calls to Spring Boot).

Best for: Large teams with dedicated frontend/backend roles, or projects where you might want to deploy frontend and backend separately later.

Option 2: Angular CLI Project Inside src/main/webapp #

• Pros:
  • Ultra-compact structure: Everything lives in one Maven module, so deployment is a single, straightforward step.
  • No extra configuration needed for basic packaging (Spring Boot automatically serves static content from webapp).
• Cons:
  • Messy toolchain mixing: Angular’s core config files (angular.json, tsconfig.json) end up buried in webapp, which breaks Angular CLI’s default assumptions and makes running commands like ng serve or ng generate cumbersome.
  • Poor scalability: As the project grows, untangling frontend and backend code becomes a major headache.

Best for: Tiny prototypes or throwaway projects where speed of setup is the top priority.

Option 3: JHipster-Style (Config Files at Root, Frontend Source in webapp) #

• Pros:
  • Balanced structure: Angular’s config files stay at the project root (matching Angular CLI’s default setup, so all ng commands work seamlessly), while frontend source code lives in src/main/webapp (or a subfolder like src/main/webapp/app).
  • Battle-tested: JHipster uses this pattern for a reason—it’s proven to work for both small and medium-sized projects, keeping toolchain compatibility and project organization intact.
  • Easy packaging: You can configure Angular to build directly into Spring Boot’s static resource directory, making JAR packaging straightforward.
• Cons:
  • Minor initial setup: You’ll need to adjust Angular’s outputPath in angular.json to point to a directory Spring Boot recognizes (like ../src/main/resources/static).

My Top Recommendation: This is the sweet spot for most projects. It gives you the best of both worlds—Angular CLI works as expected, and the project stays organized enough to scale without unnecessary complexity.

Can We Package Angular into a Deployable Spring Boot JAR? #

Absolutely—no matter which option you choose, you can configure the build to produce a single executable JAR with all frontend assets included. Here’s how for each approach:

For Option 1 (Multi-Module) #

• Use the frontend-maven-plugin in your backend module’s POM to trigger an Angular build in the frontend module, then copy the built assets into src/main/resources/static of the backend module. The Spring Boot Maven plugin will then package everything into a JAR. Example plugin config snippet:

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.0</version>
    <executions>
      <execution>
        <id>install node and npm</id>
        <goals>
          <goal>install-node-and-npm</goal>
        </goals>
        <configuration>
          <nodeVersion>v14.21.3</nodeVersion> <!-- Match Angular 5's compatible Node version -->
        </configuration>
      </execution>
      <execution>
        <id>npm install</id>
        <goals>
          <goal>npm</goal>
        </goals>
        <configuration>
          <arguments>install</arguments>
          <workingDirectory>../frontend-module</workingDirectory>
        </configuration>
      </execution>
      <execution>
        <id>npm run build</id>
        <goals>
          <goal>npm</goal>
        </goals>
        <configuration>
          <arguments>run build --prod</arguments>
          <workingDirectory>../frontend-module</workingDirectory>
        </configuration>
      </execution>
      <execution>
        <id>copy frontend assets</id>
        <goals>
          <goal>copy</goal>
        </goals>
        <configuration>
          <from>../frontend-module/dist</from>
          <to>src/main/resources/static</to>
        </configuration>
      </execution>
    </executions>
  </plugin>
  

For Options 2 & 3 #

• Update your angular.json to set outputPath to a directory Spring Boot serves as static content. For example:

  "architect": {
    "build": {
      "options": {
        "outputPath": "../src/main/resources/static",
        // ... other Angular build options
      }
    }
  }
  

• Run ng build --prod to compile Angular into the static directory, then run mvn clean package—the Spring Boot plugin will bundle everything into an executable JAR that serves both the frontend and backend.

内容的提问来源于stack exchange，提问作者Denis Stephanov