2

我有一个在 Liberty WebSphere Server 17.0.0.2 上使用 AngularJS + JSP 的项目，现在我必须对其进行升级。该项目需要升级到 Angular 4 + Liberty，我不知道如何正确地做到这一点。

我现在尝试的是：

使用 Angular-CLI 构建项目以生成dist文件夹。然后，我将dist放在WEB-INF > views上。我还对 spring-context.xml、web.xml 和 server.xml（在 Liberty 端）进行了引用，但在尝试访问 localhost:9090/AngularPoC/dist/index 时得到的只是 404 错误

先感谢您。

4

1 回答 1

5

我将概述如何设置我的 Angular 应用程序以通过 (Open)Liberty 提供服务：

  1. 将ng build命令的产品复制到 .war 文件的根目录。 这意味着根据您的构建方式将其放置在不同的位置。如果您使用的是 Eclipse/WDT，这可能意味着将输出设置为您的WebContent文件夹。如果您将 Gradle 与 war 插件一起使用，它会直接进入src/main/webapp. 虽然最初我设置了输出文件夹，ng build --output-dir=...但我发现这会删除该文件夹，所以我在每次构建时都丢失了我的 web.xml。我建议dist在构建的后续步骤中复制 的内容，除非您可以从上下文根的子文件夹中提供服务。

  2. 为深层链接设置错误重定向。 如果您使用 Angular Router 模块，则需要设置链接和刷新深层路由。默认情况下，Liberty 会为任何不存在的路径提供 404 错误页面。如果用户在 URL 栏包含进入您的应用程序的深层路由时刷新页面，他们将获得该错误页面。您需要对其进行设置，以便将所有 404 请求路由回您的index.html（location通常应该指向与 相同的位置base-href，见下文。）在 web.xml 中，我有

    <error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>

    另一种选择是使用HashLocationStrategy使用较旧的锚语法的 。路由放置在 URL 的散列片段中。这意味着您不必设置错误页面，但这也意味着您将来无法无缝地用单独的页面替换深层路由——如果人们有任何书签，他们将不得不更新.

    这是通过更新您的app-routing.module.ts文件以RouterModule.forRoot(routes, {useHash: true})在导入行上指定来完成的。

  3. 确保 base-href 匹配。 确保指向包含该 index.html 以及从构建中生成的 CSS 和 JS 文件的路径base-href。index.html否则你会发现什么都没有加载，你会在你的网络检查器中看到一堆 404。如果上下文根更改，则需要更新此值。我的 web 应用程序通常具有直接在其下的 index.html 的上下文根/，所以我base-href的是/.

于 2018-03-21T13:43:22.713 回答