Angular 4+Spring Boot开发：无需ng build实现Angular代码热更新

Hey there! I’ve worked with this exact stack before, so let’s get your Angular changes showing up instantly without running ng build every single time. Here are two solid approaches depending on your workflow:

Approach 1: Angular Dev Server + Spring Boot Proxy (Highly Recommended) #

This method leverages Angular’s built-in dev server (which has automatic hot-reloading) and proxies API requests to your Spring Boot backend—no more manual builds, and no CORS issues.

• Step 1: Create an Angular proxy config
  In your Angular project root, make a file named proxy.conf.json with this content (adjust the target port to match your Spring Boot app’s port, usually 8080):

  {
    "/api/*": {
      "target": "http://localhost:8080",
      "secure": false,
      "logLevel": "debug"
    }
  }
  

  This tells Angular’s dev server to forward any request starting with /api to your Spring Boot backend.

• Step 2: Update your Angular start script
  Open your Angular project’s package.json and modify the start script to use the proxy config:

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",
    // Keep your other scripts like "build" as-is
  }
  

• Step 3: Run both servers

  1. Launch your Spring Boot app in STS (right-click the project → Run As → Spring Boot App).
  2. Open a terminal in your Angular project root and run npm start. This starts the Angular dev server at http://localhost:4200.

Now any change you make to Angular code will trigger an automatic browser refresh, and API calls will seamlessly hit your Spring Boot backend. No ng build required!

Approach 2: Auto-Reload Static Resources in Spring Boot #

If you prefer to run only the Spring Boot server (and not a separate Angular dev server), you can configure Spring Boot to watch for changes in Angular’s build output.

• Step 1: Run Angular in watch mode
  Open a terminal in your Angular project root and run:

  ng build --watch
  

  This command will automatically recompile your Angular code to the dist folder every time you make a change.

• Step 2: Configure Spring Boot to detect static changes
  Open your Spring Boot project’s application.properties (or application.yml) and add these settings (replace your-angular-app-name with the actual folder name inside your dist directory):

  # Point Spring Boot to your Angular build output
  spring.web.resources.static-locations=file:./src/main/resources/static/,file:./dist/your-angular-app-name/
  # Disable caching for static resources
  spring.web.resources.cache.period=0
  # Enable DevTools for auto-restart when static files change
  spring.devtools.restart.enabled=true
  spring.devtools.restart.additional-paths=./dist/your-angular-app-name/
  

• Step 3: Launch Spring Boot with DevTools
  Make sure your Spring Boot project has the spring-boot-devtools dependency in pom.xml (most setups include this by default, but if not, add it):

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
  </dependency>
  

  Then start your Spring Boot app in STS. Now when you modify Angular code, ng build --watch will update the dist folder, and Spring Boot’s DevTools will refresh the static resources—just hit refresh in your browser to see changes.

Bonus: Optimize Java Code Updates #

You mentioned running mvn clean install every time you modify Java code—you can make this faster with Spring Boot DevTools too! With the dependency above, DevTools will automatically restart your app (in just a few seconds) whenever you save Java changes. No need to run the full mvn clean install unless you need to rebuild the entire project.

内容的提问来源于stack exchange，提问作者SK.