使用maven和spring REST配置角度2项目

Question

我想将我的小应用程序从角度1升级到角度2.我对角度2和节点配置有些新意.我的Web应用程序使用eclipse和maven.问题是我无法使用角度2进行配置.

我应该使用什么目录结构？

有maven插件可用但我对我的角度2应用程序的目录结构有点困惑.

Answer 1

这是我做的: -

• 安装Nodejs v6.9 +
• 为Angular CLI 运行npm install @ angular/cli -g
• 安装Apache Maven或使用任何Maven友好的IDE
• 使用您所需的Maven配置,我使用简单的webapp(WAR).

目录结构(ngapp文件夹休息除外是标准的Maven结构.)

ngfirst
??? pom.xml
??? src
?   ??? main
?       ??? java
?       ??? resources
?       ??? webapp
?       ??? ngapp

角部

在终端打开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

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

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

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

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

Maven部分

打开pom.xml并配置以下三个maven插件: -

1. compiler-plugin:在/ 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的上下文路径加载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>  

构建Maven项目(以及Angular App)

在项目根文件夹ngfirst中打开终端并运行mvn package命令,这将在目标文件夹中生成WAR文件(ngfirst.war).

在容器中部署ngfirst.war,在浏览器中打开http:// localhost:8080/ngfirst/ng/index.html.(如果需要,调整主机名和端口)

如果一切顺利,你应该看到app工作!在浏览器中,这是Angular Application在工作!!

JSP预处理

我们可以利用Angular应用程序利用JSP技术的动态配置和页面呈现功能,Angular SPA作为常规HTML页面由Java容器提供服务,在这种情况下是index.html,如果我们配置JSP引擎来预处理html文件,那么所有JSP魔术都可以包含在Angular SPA页面中,只需在web.xml中包含以下内容即可

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

保存,重建maven项目,部署WAR和瞧!

Answer 2

这里从角度站点 显示了如何构建角度2项目的几个演示.在eclipse maven web应用程序中,我将客户端文件启动到与web-inf文件夹相同级别的src/main/resources文件夹中.

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在maven clean install之前将其添加到项目的根级别.

{
  "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"
  }
}