Question

我想构建我的Angular 2前端并将其部署到Tomcat应用服务器。为了开始，我完全按照以下介绍的步骤进行操作：https://angular.io/docs/ts/latest/guide/webpack.html。

所以我有以下项目结构（所有文件都与上面提到的引言完全相同）：

angular2-的WebPack
---配置
------- helpers.js
------- karma.conf.js
-------卡玛 - 测试 - shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- DIST
--- node_modules
---公共
------- CSS
-------------- styles.css的
-------图像
-------------- angular.png
--- SRC
-------应用
-------------- app.component.css
-------------- app.component.html
-------------- app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------- index.html的
------- main.ts
------- polyfills.ts
------- vendor.ts
---分型
--- karma.conf.js
---的package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

控制台或Webstorm中的

npm start 分别为webpack-dev-server --inline --progress --port 3000→按预期工作

当我分别运行 npm build rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail时，它会构建应用程序而不会出现错误，并且输出包文件会按预期物理放置在dist文件夹中。

DIST
---资产
------- angular.png
--- app.css
---app.css.map
--- app.js
---app.js.map
--- index.html的
--- polyfills.js
---polyfills.js.map
--- vendor.js
---vendor.js.map

接下来，我将dist文件夹的内容复制到Tomcat 9.0的webapps目录中。当我尝试访问已安装的应用程序时，我收到.css-和.js文件（which can be seen in the attached picture）的404错误。它试图从错误的URL中获取文件→“/ obv /”丢失。

我真的被困在这里，我觉得我已经尝试过在互联网上找到的关于这个话题的所有内容。

有人可以告诉我我做错了什么吗？提前谢谢。

Answer 1

问题与标记<base href="/" />有关。使用像tomcat这样的网络服务器或尝试使用firefox index.html直接从文件系统加载应用程序时，这是错误的。必须将其更改为<base href="./" />。当应用程序仍有问题时，请检查脚本文件的导入方式。我尝试将angular2-webpack与tomcat一起使用，并且还需要将所有脚本标记更改为不在src属性中使用前导斜杠。

<script src="js/vendor.js" ></script>

使用webpack，行为由属性output.publicPath控制。在angular2 documentation和angular2-webpack中，此设置为

output.publicPath="/"

这导致链接中的绝对路径。删除webpack时将使用相对路径，脚本和图像的链接可以正常工作。

Answer 2

如果您没有使用HashLocationStrategy，那么刷新将为您提供404 for tomcat部署。在这种情况下，您必须使用web.xml作为解决方案，并提供指向index.html的所有路由。以下是您可以应用于路径的代码片段，然后Angular路由将处理此问题。

<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/home</url-pattern>
</servlet-mapping>

如前面其他人所建议的那样，配置你的index.html（by）加载应用程序。

Answer 3

我不得不使用@ alokstar答案的略微变化。我还必须添加“-d”或“--deploy”标志。这可能是由于版本的变化。

我正在运行angular-cli版本：1.0.0-beta.28.3

我在angular2项目文件夹中运行了命令：“ng build -prod -bh / my_app -d / my_app”。
将angular2项目文件夹中“dist”文件夹的内容复制到tomcat / webapp文件夹中的“my_app”文件夹。
启动tomcat服务器（如果没有运行）。

注意： * ng构建文档生产标志为“-prod”而不是“--prod”

我的tomcat在端口8080上运行，我可以使用：http://localhost:8080/my_app

Answer 4

将“dist”文件夹复制到tomcat中的“webapps”文件夹并链接localhost：8080 / dist即可。（您必须将“publicPath：'/'”更改为“publicPath：'/ dist /'”并运行“npm run build”
我的基础：href =“/”

Answer 5

我有类似的情况。使用angular-2和webpack准备好前端应用程序，我想在tomcat服务器上部署它。我按照以下步骤操作：

在Angular 2项目文件夹中运行命令“ng build --prod --bh / [要为生产扩展的URL]”。
它会在你的angular2应用程序中创建dist文件夹。步骤1中的'your-project-name'将用于tomcat服务器URL。
复制新创建的dist文件夹的所有文件。将它们粘贴到Java应用程序的webapps文件夹中。
创建战争文件。
在服务器上部署该战争。

希望它有所帮助！

Answer 6

这是我在tomcat上部署我的应用程序的方式。这完全取决于您在 index.html 中提供的 base href 。所有图片都应保存在'assets'文件夹下。并且项目中任何图像的路径必须是相对的，从此文件夹开始，即

SRC =的 “资产/ IMG / img1.jpg” 的

执行此操作时，将删除找不到文件的难度，这将在部署应用程序时出现。

现在，这些步骤将完成其余的工作。

ng build --prod - base-href / myApp - 此命令将添加 base-href ='/ myApp'指向index.html

在tomcat的webapps文件夹中创建文件夹myApp。

将dist文件夹的内容复制到此myApp文件夹。

运行服务器。

可以在http://localhost:8080/my_app
访问申请表
如果你不想为你的应用程序使用上下文'myApp'，那么尝试 base href ='。/'或者只使用命令 ng build --prod进行生成构建

这对我的情况有帮助。希望，它有所帮助。

使用Webpack将Angular 2 App部署到Tomcat - 404错误

6 个答案: