如何使用 SpringBoot 和 Angular2 设置结构？

Posted 2023-02-26

【中文标题】如何使用 SpringBoot 和 Angular2 设置结构？

【英文标题】：How to setup structure with SpringBoot and Angular2?

【发布时间】：2016-11-18 02:27:22

【问题描述】：

我正在尝试将 Angular2 与 Springboot 一起使用，但我无法将它们设置在一起。

我首先启动了一个 springboot 项目，然后尝试跟随 johnpapa 的 Angular 2 Tour of Heroes 并运行 npm install。

结构如下：

我有/app 文件夹，.js 编译为resources/static/app/js。

问题：

1) 文件夹resources/static/node_modules/ 有很多文件。所以当运行bootRun 时，它变得非常慢，有时甚至无法刷新文件。我相信我不应该把 node_modules 放在那里，但不确定..

2) npm install 将文件放入./node_modules 所以目前我将它们复制到static 文件夹。我应该将node_modules 构建为static 吗？

3) 我的结构看起来 hacky.. 最好的方法是什么？

如何设置这个结构？另外，请告诉我是否应该开始使用 grunt/gulp 或其他工具来简化此操作。

Ps.：如果有人对 johnpapa 的指南感兴趣：johnpapa's angular2 guide

【问题讨论】：

我的理解是整个 Angular 2 应用程序应该放在 src/main/resources/static or similar 下。你目前的方法真的有效吗？

按照我的方式，如果我将node_modules 复制到static，它就可以工作，但是bootRun 变得非常慢，并且如果静态内容发生变化，它不会刷新它。我想避免放置整个 Angular 2 应用程序，这样它就不会发布不必要的资源，但也许我应该按照你的建议这样做......

我很想回答你的问题，因为我也一直在走这条路，但还没有完全实现。

你的开发代码使用hot swapping吗？

考虑将客户端代码分离到一个名为“client”的目录中。所有客户端都进入该目录。它与“src”处于同一级别。然后使用您选择的 js 构建工具在 src/main/resources/static 中放置一个 dist 版本

【参考方案1】：

1) 从static 文件夹中删除node_modules。您的构建过程应该捆绑所有必要的模块。 node_modules 仅在构建期间使用。

2) 不要将node_modules 复制到静态文件夹中

3) 从static 文件夹中删除源。那个仅适用于生成的包 + 一些静态 PROD 文件，如 index.html

【讨论】：

有道理..我会花一些时间来学习一些js构建过程..谢谢！！

只要在这里添加，以防有人遇到同样的问题。这里有一个很好的链接，教所有这些！ :) blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html

【参考方案2】：

尝试非常酷的项目构建器 Jhipster ;)

【参考方案3】：

我在 github 上分享了一个将 Angular 2 与 springboot 集成的项目。你可以在这里查看Angular 2 with spring boot

【讨论】：

欢迎来到 SO，您确实应该为您在答案中提供的任何链接提供上下文，以便您的答案可以独立使用，就好像该链接不存在一样。