Hey there! Great question—let’s break this down step by step to make it clear.

Angular’s ng serve uses a dedicated development server (powered by Webpack under the hood, not Tomcat) that’s built specifically for frontend development workflows. Here’s why it’s essential:

• Live Reload & Hot Module Replacement: This is a game-changer for development. When you tweak an Angular component, template, or style, the dev server instantly refreshes your browser to show the changes. While Tomcat can do live reload with tools like Spring DevTools, it often requires a full app restart, which is way slower than the Angular server’s targeted module updates.
• Built-in Frontend Tooling: ng serve handles all the heavy lifting of Angular’s build pipeline on the fly: compiling TypeScript to JavaScript, bundling assets, processing CSS preprocessors (like SCSS), and injecting environment-specific variables. If you tried serving Angular directly from Tomcat during development, you’d have to manually run ng build every single time you make a change—super tedious.
• Easy Proxy for API Calls: The Angular dev server lets you set up a simple proxy to forward API requests to your SpringBoot backend. This eliminates CORS errors during development because the frontend and backend appear to be on the same origin. Configuring this in Tomcat is far more complex for a fast-paced dev workflow.
• Lightweight & Fast: The Angular dev server is stripped down for frontend work—it starts up quicker and uses fewer resources than Tomcat, which is ideal for rapid UI iteration.

Running both SpringBoot’s Tomcat and Angular’s dev server is straightforward—you just need separate terminal windows/tabs:

1. Start your SpringBoot app: Use your IDE to run the main method, or execute the build tool command in one terminal:
   • Maven: ./mvnw spring-boot:run
   • Gradle: ./gradlew bootRun
     By default, this will run on http://localhost:8080.
2. Start the Angular dev server: Open another terminal, navigate to your Angular project root, and run:

   ng serve
   

   This defaults to http://localhost:4200.
3. Fix CORS with a proxy: To let your Angular app call the SpringBoot API without cross-origin errors, create a proxy.conf.json file in your Angular project root with this content:

   {
     "/api/*": {
       "target": "http://localhost:8080",
       "secure": false,
       "changeOrigin": true
     }
   }
   

   Then update your angular.json to use this proxy when running ng serve:
   Find the serve section under architect, and add the proxyConfig option:

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "your-project-name:build",
       "proxyConfig": "proxy.conf.json"
     }
   }
   

   Now any request your Angular app makes to /api/your-endpoint will automatically be forwarded to http://localhost:8080/api/your-endpoint.

Bonus Production Tip #

For production, you don’t need ng serve at all. Run ng build --prod to generate optimized static Angular files, then copy those files into your SpringBoot app’s src/main/resources/static directory. Tomcat will serve these static files alongside your API, so no CORS issues or proxy setup is required—everything runs on the same server.

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