eclipse 使用 maven 和 spring REST 配置 angular 2 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37512154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Configure angular 2 project with maven and spring REST
提问by RohanB
I wanted to upgrade my small application from angular 1 to angular 2. I am somewhat new to angular 2 and node configurations. My web application use eclipse and maven. The problem is i could not able to configure using angular 2.
我想将我的小应用程序从 angular 1 升级到 angular 2。我对 angular 2 和节点配置有点陌生。我的 Web 应用程序使用 eclipse 和 maven。问题是我无法使用 angular 2 进行配置。
What directory structure should I use?
我应该使用什么目录结构？
There are maven plugins available but i am bit confused about the directory structure of my angular 2 app.
有可用的 maven 插件，但我对 angular 2 应用程序的目录结构有些困惑。
采纳答案by Grim
Here from the angular siteshows several demonstrations of how to structure an angular 2 project. In an eclipse maven web app I would start my client side files into the src/main/resources folder at the same level as the web-inf folder.
这里从 angular 站点展示了如何构建 angular 2 项目的几个演示。在 eclipse maven web 应用程序中，我会将我的客户端文件启动到与 web-inf 文件夹相同级别的 src/main/resources 文件夹中。
Maven pom.xml, include this into your project. Maven-fronted-plugin shouldn't be used for production. Maven will install two folders at the project root level with this setup, node and node_modules.
Maven pom.xml，将其包含到您的项目中。Maven-fronted-plugin 不应用于生产。Maven 将使用此设置在项目根级别安装两个文件夹，node 和 node_modules。
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v5.3.0</nodeVersion>
<npmVersion>3.3.12</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<!-- Optional configuration which provides for running any npm command -->
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
package.json add this to the root level of the project before maven clean install.
package.json 在 maven 全新安装之前将其添加到项目的根级别。
{
"name": "budget_calculator",
"version": "1.0.0",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.10",
"bootstrap": "^3.3.6"
}
}
回答by J_Dev
Here is what I did:-
这是我所做的：-
- Install Nodejs v6.9+
- Run npm install @angular/cli –gfor Angular CLI
- Install Apache Maven or use any Maven friendly IDE
- Use your required Maven configuration, I used simple webapp (WAR).
- 安装 Nodejs v6.9+
- 为 Angular CLI运行npm install @angular/cli –g
- 安装 Apache Maven 或使用任何 Maven 友好的 IDE
- 使用您所需的 Maven 配置，我使用了简单的 webapp (WAR)。
Directory Stucture(Except for ngappfolder rest is standard Maven structure.)
目录结构（除了ngapp文件夹，其余是标准的 Maven 结构。）
ngfirst
├── pom.xml
├── src
│?? └── main
│?? ├── java
│?? ├── resources
│?? ├── webapp
│?? └── ngapp
Angular Part
角件
Open ngappfolder in terminal and type ng initcommand to initialize node and npm configuration, the result will be a simple Angular2 example application will the following directory structure inside ngapp folder:-
在终端中打开ngapp文件夹并输入ng init命令来初始化节点和 npm 配置，结果将是一个简单的 Angular2 示例应用程序，ngapp 文件夹中的目录结构如下：-
├── angular-cli.json
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── README.md
├── tslint.json
├── src
├── app
├── assets
├── environments
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── tsconfig.json
This structure is Angular equivalent of Maven project structure and srcdirectory is Angular Application's source, just like maven buildcommand generates its output in targetfolder, ng buildcommand generates its output in distfolder.
这个结构相当于 Angular 的 Maven 项目结构，src目录是 Angular 应用程序的源代码，就像maven build命令在target文件夹中生成它的输出一样，ng build命令在dist文件夹中生成它的输出。
In order to package the generated Angular application within Maven generated WAR modify the build configuration to change the output folder from distto webapp, open angular-cli.jsonfile and modify its outDir as below:-
为了在 Maven 生成的 WAR 中打包生成的 Angular 应用程序，修改构建配置将输出文件夹从dist更改为webapp，打开angular-cli.json文件并修改其 outDir 如下：-
"outDir": "../webapp/ng"
At this point ng buildcommand will generate built Angular Application inside ngdirectory of ngfirst/src/main/webappfolder.
此时ng build命令将在ngfirst/src/main/ webapp文件夹的ng目录中生成构建的 Angular 应用程序。
Maven Part
Maven 部分
Open pom.xml and configure following three maven plugins:-
打开 pom.xml 并配置以下三个 maven 插件：-
- compiler-plugin: No Java stuff to compile in /src/main/ngappfolder, exclude it.
- war-plugin: /src/main/ngappis Angular project folder and it should not be packaged in WAR, exclude it.
- exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Argument --base-hrefis required to load Angular resources from webapp's context path.
- 编译器插件：在 /src/main/ ngapp文件夹中没有要编译的 Java 内容，排除它。
- war-plugin: /src/main/ ngapp是 Angular 项目文件夹，不应打包在 WAR 中，排除它。
- exec-plugin: 执行 NPM Install 和 Angular-CLI Build 命令在 webapp 文件夹中生成 Angular 应用程序以进行最终打包。从 webapp 的上下文路径加载 Angular 资源需要参数--base-href。
Here is how it should look like:-
它应该是这样的：-
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-ng-build</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--base-href=/ngfirst/ng/</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
Building Maven Project(and Angular App too)
构建 Maven 项目（以及 Angular 应用程序）
Open Terminal in project root folder ngfirstand run mvn packagecommand, this will generate a WAR file (ngfirst.war) in targetfolder.
在项目根文件夹ngfirst 中打开终端并运行mvn package命令，这将在目标文件夹中生成一个 WAR 文件（ngfirst.war）。
Deploy ngfirst.warin a container, open http://localhost:8080/ngfirst/ng/index.htmlin Browser. (adjust your hostname and port if required)
在容器中部署ngfirst.war，在浏览器中打开http://localhost:8080/ngfirst/ng/index.html。（如果需要，调整您的主机名和端口）
If everything went right, you should see app works!in browser, that is Angular Application at work!!
如果一切顺利，您应该会看到应用程序正常运行！在浏览器中，这就是 Angular 应用程序在工作！！
JSP Pre-Processing
JSP 预处理
We can leverage dynamic configuration and page rendering capabilities of JSP technology with Angular application, Angular SPA is served by the Java container as regular HTML page, index.htmlin this case, if we configure JSP Engine to pre-process html files too, then all JSP magic can be included inside Angular SPA Page, just include the following inside web.xml
我们可以在 Angular 应用程序中利用 JSP 技术的动态配置和页面渲染能力，Angular SPA 由 Java 容器作为常规 HTML 页面提供，在这种情况下为index.html，如果我们也配置 JSP 引擎来预处理 html 文件，那么所有 JSP 魔法都可以包含在 Angular SPA 页面中，只需在web.xml 中包含以下内容
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
Save, rebuild maven project, deploy WAR and voila!!
保存，重建 maven 项目，部署 WAR，瞧！！
