如何在基于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
    • 应用
    • 资产
    • 环境
    • 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的
      • 资源
      • Web应用程序
        • WEB-INF
        • web.xml中
  • 角度项目( 将角度项目放在这里
  • node_installation
  • 的pom.xml

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

   angular-project node_installation   com.github.eirslett frontend-maven-plugin 1.0  ${angular.project.location} ${angular.project.nodeinstallation}     install node and npm  install-node-and-npm   v6.10.0 3.10.10     npm install  npm   install     npm build  npm   run build       org.apache.maven.plugins maven-resources-plugin 2.4.2   default-copy-resources process-resources  copy-resources   true  ${project.build.directory}/${project.artifactId}-${project.version}/   ${project.basedir}/${angular.project.location}/dist       

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

的package.json

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

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

web.xml –

  index.html   restservices /restservices/*  

如果您的应用程序没有任何上下文路径并且部署在服务器上的根路径上,则上述配置就足够了。 但是,如果您的应用程序有任何上下文路径,如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

      E2E        

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

我有一个类似的问题:我有一个名为Tourism-Services的maven Web应用程序模块,其中包含Web服务和包含angular项目的maven项目(我在src / main / angular5 / tourism文件夹中使用CLI创建了角度项目)

在此处输入图像描述

与这篇文章相反,并且相应于Parth Ghiya给出的以下链接( 如何集成Angular 2 + Java Maven Web应用程序 ),我认为角度项目应该放在Tourism-Services模块项目的webapp文件夹中。 考虑到这一点,我还有其他问题:

1)通常,dist文件夹中的所有编译结果都应该放在webapp文件夹下。 但是在dist文件夹中,并不是所有的Angular项目资源(作为图像,css应该存在于angular assets文件夹中,对吗?)

2)考虑到node_modules中的角度依赖关系,我们是否应该将它们集成到webapp文件夹中? 有一个障碍:首先是Typescript文件,并且还可以编译为由服务器进行交互,但是在自定义应用程序角度文件中导入时可能会编译和添加? 解决办法是什么 ?

3)我们是否应该包含来自webapp文件夹中的角度项目的其他类型的资源? (如上面链接帖中提到的Scrambo的打字文件夹)