Spring STS Eclipse创建AngularJS项目报错及前后端整合方案咨询

Hey there, sorry to hear you're hitting those frustrating NoClassDefFoundError issues with the Angular IDE plugin in Spring STS. Let's start with a quick note on why this might be happening: that 2017 CI 11b plugin is pretty outdated, and it's likely conflicting with your version of Spring STS or the newer Angular 5 dependencies you're trying to use. Instead of fighting with plugin compatibility, here are some solid alternative ways to build your Angular frontend separately and integrate it with Spring Boot smoothly:

1. Use Angular CLI to develop your frontend independently #

This is the most straightforward approach, and it's what most Angular developers use:

• First, install the Angular CLI version that matches Angular 5 (since you're working with Angular 5, go with CLI 1.7.4). Run this command in your terminal:

  npm install -g @angular/cli@1.7.4
  

• Create a new Angular project with:

  ng new angular-spring-crud
  

• Navigate into the project folder and start developing your CRUD features. You can test the frontend in isolation using:

  ng serve
  

• When you're ready to integrate with Spring Boot:
  • Build the frontend for production with:

    ng build --prod
    

  • This generates a dist folder with all your compiled static files. Copy everything inside dist into your Spring Boot project's src/main/resources/static or src/main/resources/public directory. Now when you start your Spring Boot app, it will serve the Angular frontend automatically.
  • For development (so you don't have to rebuild and copy files every time), set up a proxy in your Angular project. Create a proxy.conf.json file with:

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

    Then run the Angular dev server with:

    ng serve --proxy-config proxy.conf.json
    

    This will forward any API requests from your Angular app (like http://localhost:4200/api/users) to your Spring Boot backend running on port 8080.

2. Manually add Angular to your Spring Boot project (no IDE plugins needed) #

If you prefer to keep everything in one project structure:

• Create a new folder inside your Spring Boot project, e.g., src/main/frontend.
• Navigate to this folder in your terminal and initialize a npm project:

  npm init -y
  

• Install Angular 5 core dependencies and the local Angular CLI:

  npm install @angular/core@5.2.11 @angular/common@5.2.11 @angular/compiler@5.2.11 @angular/platform-browser@5.2.11 @angular/platform-browser-dynamic@5.2.11 @angular/router@5.2.11 --save
  npm install @angular/cli@1.7.4 --save-dev
  

• Set up your Angular project structure manually (or copy the src folder from an Angular CLI-generated project) and configure the angular.json file to build into src/main/resources/static.
• Use ng serve for development and ng build --prod to compile directly into your Spring Boot static directory.

3. Use VS Code for frontend development #

Spring STS is great for Java/Spring development, but VS Code has far better support for Angular out of the box (with extensions like Angular Language Service). You can:

• Develop your Angular project fully in VS Code using Angular CLI as described in option 1.
• Keep your Spring Boot project open in STS (or even in VS Code with the Spring Boot extension) and run both servers simultaneously during development.
• Once frontend development is done, package and integrate the static files into your Spring Boot project as before.

A quick tip: Make sure your Spring Boot version is compatible with the JDK you're using, and double-check that all Angular dependencies are pinned to version 5 to avoid unexpected compatibility issues.

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