Spring Boot Maven Angular 项目常见问题解决方案

Spring Boot Maven Angular 项目常见问题解决方案

项目基础介绍

spring-boot-maven-angular-starter 是一个多模块的 Maven 项目，旨在为使用 Spring Boot 和 Angular 构建单体应用提供一个高效的起点。该项目结合了 Spring Boot 2 和 Angular 9，通过 Maven 进行构建管理。主要编程语言包括 Java（用于后端）和 TypeScript（用于前端）。

新手使用注意事项及解决方案

1. 环境配置问题

问题描述：新手在配置开发环境时，可能会遇到 Node.js 或 Maven 版本不兼容的问题，导致项目无法正常运行。

解决步骤：

1. 检查 Node.js 版本：确保安装的 Node.js 版本与项目要求的版本一致（例如 v12.16.2）。可以通过运行 node -v 命令来检查当前版本。
2. 安装或更新 Node.js：如果版本不匹配，可以从 Node.js 官网 下载并安装正确版本。
3. 检查 Maven 版本：确保 Maven 版本与项目要求的版本一致。可以通过运行 mvn -v 命令来检查当前版本。
4. 安装或更新 Maven：如果版本不匹配，可以从 Maven 官网 下载并安装正确版本。

2. 前端资源打包问题

问题描述：在构建项目时，可能会遇到前端资源（如 Angular 代码）无法正确打包成 WebJar 的问题。

解决步骤：

1. 检查 Angular 配置：确保 Angular 项目的配置文件（如 angular.json）中正确配置了输出路径。
2. 运行 Angular 构建：在项目根目录下运行 ng build --prod 命令，确保 Angular 代码被正确编译并输出到指定目录。
3. 检查 Maven 配置：确保 Maven 的 pom.xml 文件中正确配置了前端资源的打包路径。
4. 重新构建项目：运行 ./mvnw clean install 命令，重新构建整个项目，确保前端资源被正确打包。

3. CORS 配置问题

问题描述：在开发过程中，可能会遇到跨域资源共享（CORS）问题，导致前端无法访问后端 API。

解决步骤：

1. 检查 Spring Boot 配置：确保 Spring Boot 的配置文件（如 application.properties 或 application.yml）中正确配置了 CORS 支持。
2. 添加 CORS 配置：在 Spring Boot 的配置文件中添加以下配置：

   spring:
     mvc:
       cors:
         allowed-origins: "http://localhost:4200"
         allowed-methods: "GET,POST,PUT,DELETE"
   

3. 验证 CORS 配置：启动 Spring Boot 应用，并确保前端应用（如 Angular）能够正常访问后端 API。

通过以上步骤，新手可以更好地理解和解决在使用 spring-boot-maven-angular-starter 项目时可能遇到的问题。