用maven和spring RESTconfigurationangular 2项目

我想将我的小应用程序从angular度1升级到angular度2.我对angular度2和节点configuration有点新。 我的Web应用程序使用Eclipse和Maven。 问题是我无法使用angular2configuration。

任何人都可以请帮助我，如果有任何教程configuration目录结构？

有可用的Maven插件，但我有点困惑我的angular2应用程序的目录结构。

提前致谢。

这里从angular度网站显示了如何构build一个angular度2项目的几个示范。 在eclipse maven web应用程序中，我会将我的客户端文件放入与web-inf文件夹相同级别的src / main / resources文件夹中。

Maven pom.xml，将其包含到您的项目中。 Maven-front-plugin不应该用于生产。 Maven将使用此设置，节点和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在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" } }

这是我做的：

  • 安装Nodejs v6.9 +
  • 运行Angular CLI的npm install @ angular / cli -g
  • 安装Apache Maven或使用任何Maven友好的IDE
  • 使用你需要的Mavenconfiguration，我用了简单的webapp（WAR）。

目录结构 （除了ngapp文件夹rest是标准的Maven结构。） 

 ngfirst ├── pom.xml ├── src │  └── main │  ├── java │  ├── resources │  ├── webapp │  └── ngapp

angular部分

在terminal打开ngapp文件夹并键入ng init命令来初始化节点和npmconfiguration，结果将是一个简单的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

这个结构是Maven项目结构的Angular等价物，而src目录是Angular Application的源码，就像maven build命令在目标文件夹中生成它的输出一样， ng build命令在dist文件夹中生成它的输出。

为了在Maven生成的WAR中打包生成的Angular应用程序，请修改生成configuration以将输出文件夹从dist更改为webapp ，打开angular-cli.json文件并修改其outDir，如下所示： 

 "outDir": "../webapp/ng"

此时， ng命令将在ngfirst / src / main / webapp文件夹的ng目录内生成内置的Angular Application。

Maven部分

打开pom.xml并configuration以下三个maven插件：

  1. 编译器插件 ：不要在/ src / main / ngapp文件夹中编译Java的东西，排除它。
  2. war-plugin ：/ src / main / ngapp是Angular项目文件夹，它不应该被打包成WAR，而是排除它。
  3. exec-plugin ：执行NPM Install和Angular-CLI Build命令在webapp文件夹中生成Angular Application以进行最终打包。 参数–base-href需要从webapp的上下文path加载Angular资源。

以下是它应该是这样的： 

 <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>

构buildMaven项目 （还有Angular App）

打开项目根文件夹ngfirst中的Terminal并运行mvn package命令，这将在目标文件夹中生成一个WAR文件（ngfirst.war）。

在容器中部署ngfirst.war ，在浏览器中打开http：// localhost：8080 / ngfirst / ng / index.html 。 （如果需要，调整您的主机名和端口）

如果一切正常，你应该看到应用程序的作品！ 在浏览器中，这是在工作中的angular度应用程序！

JSP预处理

我们可以利用JSP技术的dynamicconfiguration和页面呈现function与Angular应用程序，Angular SPA由Java容器作为普通的HTML页面，在这种情况下是index.html ，如果我们configuration了JSP Engine来预处理html文件，那么所有的JSP魔术都可以包含在Angular SPA页面内，只需在web.xml中包含以下内容 

 <servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping>

保存，重buildmaven项目，部署WAR和瞧！

Interesting Posts