带有弹簧mvc的角度答案

【问题标题】：Angular with spring mvc带有弹簧mvc的角度
【发布时间】：2018-07-27 14:34:34
【问题描述】：

我想使用 angular 4 和 spring mvc 制作一个简单的 Web 项目。我想知道如何将 angular 4 与在同一台服务器上运行的 spring mvc 集成。现在我在 localhost:8080 中运行 spring，在 localhost:4200 中运行 angular。

我对此做了很多研究，但还没有找到任何合适的解决方案。

Spring-项目结构

Angular - 项目结构

是否可以在同一台服务器上运行 angular 和 spring mvc 项目？？

【问题讨论】：

标签： angular spring-mvc

【解决方案1】：

我认为最好的做法是拥有两个独立的项目。也就是说，这就是我们将 Angular 项目合并到 Spring MVC 项目中的方式。

将 Angular 项目中的 src 文件夹重命名为 ng-src。
将 Angular 项目的内容，而不是文件夹本身，复制到我们的 Spring MVC 项目中。这会将e2e、node_modules 和ng-src 以及几个文件添加到我们的Spring MVC 项目的根目录中。
将ng-src 中的index.html 重命名为index.jsp

编辑.angular-cli.json中的一些内容

"root": "ng-src",
"outDir": "src/main/webapp/app",

和

"index": "index.jsp",

如果DispatcherServlet映射到/，则在spring config中添加资源映射在 XML 中：

<mvc:resources mapping="/app/**" location = "/app/"/>

Java 配置：

public void addResourceHandlers(ResourceHandlerRegistry registry) {
     registry.addResourceHandler("/app/**")
            .addResourceLocations("/app/")
}

随着我们的开发，我们有一个进程在后台运行构建angular：
```
ng build --bh "${pageContext.request.contextPath}/app/" --w
```
--bh 设置用于生成 index.jsp 的 baseHref。 --w 告诉 angular-cli 监视目录并在任何情况发生变化时构建。

对 Angular 项目所做的任何更改都在 ng-src 下进行。 Angular-cli 将看到这些更改并构建项目。您的 Angular 项目构建到 /your-context-path/app/

我们的 IDE 会监视项目的文件系统更改。根据您的 IDE，您可能需要将其配置为观看。我知道 eclipse 默认情况下不会。

您需要在浏览器中刷新页面以查看更改 (ctrl+F5)。

【讨论】：