Question

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

我应该使用哪种目录结构？

有maven插件可用，但我对我的angular 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

此结构与Angven等效于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应用程序。

Maven Part

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

编译器插件：在/ src / main / ngapp 文件夹中没有要编译的Java东西，请将其排除。
war-plugin ：/ src / main / ngapp 是Angular项目文件夹，不应将其打包在WAR中，将其排除。
exec-plugin ：执行NPM Install和Angular-CLI Build命令，在webapp文件夹中生成Angular Application以进行最终打包。从webapp的上下文路径加载Angular资源需要参数 - base-href 。

以下是它的样子： -

<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。（如果需要，调整主机名和端口）

如果一切顺利，你应该在浏览器中看到应用程序工作！，即工作中的Angular应用程序!!

JSP预处理

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

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

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

Answer 2

Here from the angular site 展示了如何构建角度2项目的几个演示。在eclipse maven web应用程序中，我将客户端文件启动到与web-inf文件夹相同级别的src / main / resources文件夹中。

Maven pom.xml，将其包含在您的项目中。 Maven-fronted-plugin不应该用于生产。 Maven将使用此设置，node和node_modules在项目根级别安装两个文件夹。

library(stringr)
#pattern
ptrn1 <- str_extract(df1$long.name, paste(df2$country, collapse='|'))
#replacement
rpl <- df2$country.code[match(df2$country, ptrn1)]

df1$long.name <- str_replace_all(df1$long.name, ptrn1, rpl)
df1
#          long.name result
#1   REPUBLIC OF BLR    256
#2   REPUBLIC OF VNM    578
#3 GOVERNMENT OF JAM    467
#4     LBN REPLUBLIC    698

package.json在maven clean install之前将其添加到项目的根级别。

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

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

2 个答案: