在 WAS 服务器中部署 Angular js 应用程序的问题答案

【问题标题】：Problem for deploying angular js app in WAS server在 WAS 服务器中部署 Angular js 应用程序的问题
【发布时间】：2018-11-29 02:44:21
【问题描述】：

我正在尝试将我的 spring boot webservice 和 angular 6 应用程序打包到一个战争中，以便它可以部署在 WAS 8.5 服务器中。我在 Angular 上制作了一个示例应用程序并做了“ng build --prod”。然后按照这个答案 Is it possible to deploy Angular app on IBM Websphere Application Server? 。我已将 Angular 应用程序的 /dist 文件夹的输出复制到 Web 模块并添加了 web.xml。

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>Spring Boot Liberty</display-name>

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

在我尝试部署战争并显示页面后，它给出了空白页面。后端休息服务工作正常。所以我可能缺少一些库或一些文件来运行 Angular js 部分，或者可能是其他一些步骤。

请帮忙。

【问题讨论】：

您是否在浏览器控制台或服务器的 SystemOut.log 中看到错误？
@lwestby no，我终于明白了问题，即 index.html 正在加载但没有任何资源。服务器找不到图像路径，css/js 路径。所以我所做的是编辑路径，如。这确实解决了这个虚拟应用程序的问题，但我想知道是否有任何其他方法可以自动化/编辑这个资源路径，可能是 web.xml 中的一些条目？因为对于实际项目，这肯定会让人头疼。

标签： angular websphere web-deployment was

【解决方案1】：

可能发生的情况是您的 Angular 应用程序不知道您的应用程序的上下文根——这就是为什么您可以通过手动编辑已构建的 html 文件中链接资源的路径来使事情正常工作的原因。

有两种处理方法：

在您的 Angular 项目中编辑 index.html 文件（不是由 Angular 编译器生成的文件。）查找标签 <base href="/">（或引号中的其他值）并编辑它以包含您的上下文根应用。在您的评论中，您提到了一条带有/HelloWorld 的路径，因此我认为该标签应该类似于<base href="/HelloWorld">。
更改应用程序的上下文根以匹配已为<base href> 提供的值。

一旦您进行了其中一项更改，构建的index.html 查找其链接的.js/.css 文件的路径应该与应用程序服务器实际为其提供服务的路径对齐，您应该会看到你的页面。

如果您仍然没有看到预期结果，请在浏览器中右键单击该页面，然后单击检查元素。转到可能名为 Console 的选项卡并在其中查找任何错误。这应该会给你一个线索，让你知道还有什么问题。

【讨论】：

谢谢@Iwestby。我对 Angular js 很陌生。我也进行了同样的调试，但不知道如何在 Angular js 中执行此操作。我会尝试这个并会更新。跨度>