将Angular2的文件与Spring Boot的项目文件集成到一起

3 年 ago
新, 韵
1 minute

我参考了这个Stack Overflow。

每个项目都有自己的前提条件创立。

Angular2: Angular命令行工具
Spring: Spring初始化器

这篇文章的主题是，首先分别创建，然后再合并文件夹。

整合性的原因

我认为可以直接将它们在各自的服务器上运行，或者使用Angular设置代理进行运维。但由于我们需要自主开发Web界面和Web API，所以我考虑将它们都放在一个Web服务器上，监控一个服务器进程（Tomcat），然后将其部署到AWS的弹性Beanstalk上会比较方便。

如果还有其他方便的操作方式，或许就不需要进行整合了。

文件夹架构

使用Spring Initializer或者Maven来生成Web应用程序项目的模板，然后将Angular 2的文件夹移动到该文件夹中。

階層1階層2階層3階層4説明main

src

java

angular2
★angular2のプロジェクトルートフォルダを置きます。この中にangular2プロジェクトの.gitignoreファイルも含んでいます。（後述）

resources

static★ここをangular2のコンパイルのoutput先に指定します

步骤

这是创建此配置的步骤。

    1. 创建每个项目文件夹

 

    1. 修改Angular2的编译目标文件夹

 

    1. 添加不需要提交到Git的文件到原始项目中，创建、追加或修改.gitignore文件

 

    在部署时，修改Angular2源代码→执行ng build命令，然后将SpringBoot打包成war文件。

修改Angular2编译目录的位置

  "apps": [
    {
      "root": "src",
      "// outDir": "dist",
      "outDir": "../resources/static",
      "assets": [

因为上述的json文件中的”outDir”是编译目标文件夹，所以将其指定为SpringBoot的Web应用程序的文档根文件夹，即resources/static。

当使用angular cli生成模板时，angular-cli.json文件位于angular2项目的根文件夹中。

在编译使用 ng build 进行操作时，请注意一点，那就是需要删除整个 static 文件夹并重新生成，所以请勿在 static 文件夹中放入任何内容。

在中国中文母语环境下进行重新短语：“对.gitignore进行添加或修改。”

如果在Angular2项目的根文件夹中存在.gitignore文件，则会将其与其他源文件一起复制并带过来。
然后，如果将.gitignore文件添加到SpringBoot项目的存储库中，则.gitignore将起作用。以下是应忽略的文件夹的.gitignore内容的引用。


# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings

# e2e
/e2e/*.js
/e2e/*.map

#System Files
.DS_Store
Thumbs.db

将Angular2项目的编译源代码输出到resources/static的目录也将从代码仓库中移除。

# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/static
/tmp

# dependencies

#System Files
.DS_Store
Thumbs.db

请按照下列步骤完成设置：在运行ng build后创建war文件，并部署并确认其功能。

bannerAds