时间戳

首页 > 解决方案 > 子目录中的 Angular 8 路由器

angular8 - 子目录中的 Angular 8 路由器

问题描述

我正在研究 Angular 8 项目，我必须将它放在服务器上的子目录中。在 index.html 上我有<base href="/subdirectory/"> 并且在 app-routing 上

 {
       path: '',
       component: HomeComponent
       },
      {
        path: 'aaa/:id/:lang',
        component: FirstStoryComponent
      },
      {
        path: 'bbb/:id/:lang',
        component: SecondStoryComponent
      },

网址http://www.testurl.com/subdirectory/aaa/46/en

如果我首先从 HomeComponent 开始并使用按钮或<a></a>标签等内部链接，我可以在组件之间导航。但是，如果我从另一个网站创建一个链接以使用参数直接导航到 FirstStoryComponent。url，一模一样的url，会马上消失，页面加载不出来，好像url不正确或者页面没有接收到参数一样。这是激活路由

this.actRoute.params.subscribe(
        (params: Params) => {
          this.ID = +params['id'];
          this.lang = params['lang'];
        }
      );

我也试过

this.ID = +this.actRoute.snapshot.params['id'];

我需要能够从另一个网站链接。

有人可以给我一些指导吗？

谢谢你。

标签： angular8

解决方案

Angular 应用程序的基本规则（就像每个单页应用程序一样）是：

服务器必须配置为提供 index.html 而不是 404 页面，在每种情况下都会请求服务器不知道的 url，以便 Angular 的路由器可以处理正确的路由（请参阅下面的解释）。

具体如何实现取决于您的服务器类型，超出了本课程的范围。请查看官方文档的这篇文章（或为您的个人服务器获取有关 stackoverflow 的帮助）...

→ https://angular.io/guide/deployment#server-configuration

...以及此处的Academind文章...

→ https://academind.com/learn/angular/angular-qa/#how-to-fix-broken-routes-after-deployment

ng serve 自动执行此操作，对于本地测试，我已经全局安装了 http-server-spa (npm i -g http-server-spa)，以便通过运行 http-server-spa dist/ 轻松提供 dist 文件夹中的内容在项目内部（在根级别，如 ng serve）。

要在本地测试构建的项目，您可以使用 http-server-spa：

使用 npm i http-server-spa 安装它。

然后使用 http-server-spa dist/ 提供构建的应用程序

在单页应用程序中，服务器仅在开始时提供一些静态文件（几乎为空的 index.html 和一些 js 包）。一切，包括路由，都必须在浏览器中进行管理。

因此，如果服务器收到对 my-domain.com/something 的请求，它总是必须为 index.html 提供服务（因为服务器不知道任何其他 html 文件，并且重定向到 404 页面在在这种情况下，从那时起根本不会提供应用程序）。然后 Angular 路由器（加载了附加到 index.html 的包）可以修改 index.html 以使用户可以看到 /something 内容。被重定向到 Angular 应用程序的“未找到”组件。

这不是 Angular 特有的，但如果您使用 history.pushState 在 SPA 中手动实现路由，这将是相同的原理。

Udemy Angular The Complete Guide的Jost Schmithals给了我这个建议

在这个论坛上进行了一些搜索后，我找到了答案。

我必须把它放在我的 .htaccess 子目录中，现在它可以工作了。

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]

推荐阅读