如何在基于maven的java war项目中设置angular 4

我变得有点疯狂,因为我找不到在使用maven构建的java war项目中设置角度4 app的指南.这是因为我想将它运行到wildfly服务器中.

有帮助吗?

谢谢

最佳答案
我有类似的要求,有一个源项目有java web服务项目和角项目(基于角度cli的项目)和maven构建应该创建一个包含所有角文件的战争.我使用maven-frontend-plugin,基本路径的配置更改很少.

目标是创建一个war文件,其中包含所有java代码以及war的根文件夹中所有已编译的角度代码,所有这些都使用单个命令mvn clean package.

所有这一切工作的另一件事是避免angular-app路由器URL和你的java应用程序URL之间的冲突,你需要使用HashLocationStrategy.一种方法在app.module.ts中设置它,如下所示

app.module.ts –

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },

]

Angular App的文件夹结构如下 –

角项目

> dist
> e2e
> node_modules
>公众
> src

> app
>资产
>环境
> favicon.ico
> index.html
> main.ts
> polyfills.ts
> style.css
> tsconfig.json
> typings.d.ts
>等等

> tmp
> .angular-cli.json
> .gitignore
> karma.conf.js
> package.json
> README.md
> tslint.json
>等 – 等等

Maven项目 –

> src

>主要

> java
>资源
> webapp

> WEB-INF
> web.xml

>角度项目(将角度项目放在这里)
> node_installation
> pom.xml

将maven-frontend-plugin配置添加到pom.xml

 <properties>
    <angular.project.location>angular-project</angular.project.location>
    <angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
</properties>

 <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.0</version>
            <configuration>
                <workingDirectory>${angular.project.location}</workingDirectory>
                <installDirectory>${angular.project.nodeinstallation}</installDirectory>
            </configuration>
            <executions>
                <!-- It will install nodejs and npm -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v6.10.0</nodeVersion>
                        <npmVersion>3.10.10</npmVersion>
                    </configuration>
                </execution>

                <!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <!-- It will execute command "npm build" inside "/e2e-angular2" directory 
                    to clean and create "/dist" directory -->
                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>

        <!-- Plugin to copy the content of /angular/dist/ directory to output 
            directory (ie/ /target/transactionManager-1.0/) -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.4.2</version>
            <executions>
                <execution>
                    <id>default-copy-resources</id>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <overwrite>true</overwrite>
                        <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${project.basedir}/${angular.project.location}/dist</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

如上面的插件在内部调用’npm run build’,请确保package.json应该在脚本中具有build命令,如下所示 –

的package.json

"scripts": {
    -----//-----,
    "build": "ng build --prod",
   -----//------
}

当有人从浏览器点击应用程序时,应始终加载index.html,这就是为什么要将它作为欢迎文件.对于Web服务,我们可以说我们有路径/ rest-services / *将在稍后解释.

web.xml –

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

<servlet-mapping>
    <servlet-name>restservices</servlet-name>
    <url-pattern>/restservices/*</url-pattern>
</servlet-mapping>

如果您的应用程序没有任何上下文路径并且部署在服务器上的根路径上,则上述配置就足够了.但是,如果您的应用程序有任何上下文路径,如http://localhost:8080/myapplication/,那么也要对index.html文件进行更改 –

angular-project / src / index.html – 这里document.location将是myapplication /(否则/应用程序的上下文路径/如果应用程序没有上下文路径)

使上下文路径成为angular-app的基本路径的目的是,无论何时从angular进行ajax http调用,它都会将基本路径添加到url之前.例如,如果我试着打电话给’restservices / persons’那么它实际上会调用’http://localhost:8080/myapplication/restservices/persons

的index.html

 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>E2E</title>
   <script>document.write('<base href="' + document.location + '" />');     </script>

   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root></app-root>
 </body>

完成上述所有更改后,一旦运行mvn clean包,它将创建所需的war.检查角度’dist’文件夹的所有内容是否都在war文件的根目录中.

转载注明原文:如何在基于maven的java war项目中设置angular 4 - 代码日志