Angular URL 初始加载路由映射

Question

我有一个 angular 项目，它有多个路由 /category/fruit/apple 所以完整的 url 是 http://myserver/category/fruit/apple 通过路由器 link 一切都很好但是如果我打开这个 link 直接输入 URL 然后它是 404 我的后端是带有 express 的 nodejs。 404 是有道理的，因为没有像这样配置的路由。

我的问题，遇到这种情况应该怎么处理？

我想我已经重定向到根 http://myserver?path=category-fruit-apple 并从根组件执行动态路由。这是正确的方法吗？

请推荐最佳方法。

Answer 1

因为只是 javascript，服务器不知道路由。
您必须在 .htaccess

中添加这些行

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

因此，如果服务器没有找到这条路线，您将重定向到您的 angular-root 并且 angular 可以处理这条路线。因此，您还可以将 "index.html" 替换为 angular-root 所在的路由。

Answer 2

您可以将简单的重定向应用到 index.html 以获取非资源的所有内容。我有一个 public 存储库，您可能会发现它很有用，它是一个非常简单的快速服务器，我用它来测试各种 Angular 应用程序的托管：

https://github.com/hevans90/node-ng-server/blob/master/server.js

tl;dr：列出资源文件类型及其目录，以服务于您的资产，否则将所有请求重定向到 index.html 并让 Angular 路由器完成其工作。

Answer 3

当然，您需要配置服务器以路由到正确的内容。

两个例子是apache http server or nginx.

以下是两者的一些最小配置示例。

Angular apache example (.htaccess):

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

Nginx example (nginx.conf):

server {
    listen 80;

    server_name your.app;

    location / {
        proxy_pass       http://localhost:4200;
        proxy_set_header Upgrade    $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Host       $host;
    }
}

Answer 4

正如其他人所写，这只是重定向到 index.html 而不是在服务器端抛出 404 的问题。

在 Angular 的网页上有一整篇 section 都在谈论这个。

Answer 5

这是因为你的服务器不知道路由。服务器只了解一条路线即 index.html

加载索引页后，客户端呈现就开始了。 Angular 确定要在客户端加载的组件并加载适当的组件。

当您使用页面中的链接进行导航时，跟踪您的网络调用，您会发现没有请求进入后端。当您重新加载路由时，整个路由都会转到服务器并抛出 404。

您可以使用 HashLocationStrategy。这将在您的路线中附加##/category/fruit/apple

所有服务器在加载主页面后将忽略该路由，这将允许客户端再次渲染。

如果您希望进行服务器端渲染，请查看 https://angular.io/guide/universal

Answer 6

在 nodejs 中 return 与 index.html

 // Redirect all the other requests
    this.app.get('*', (req: Request, res: Response) => {
        if (allowedExt.filter((ext) => req.url.indexOf(ext) > 0).length > 0) {
            res.sendFile(path.resolve(`dist/assets/${req.url.split('?')[0]}`));
        } else {
            res.sendFile(path.resolve('dist/app/index.html'));
        }
    });

Answer 7

还有一个仅前端解决方案（因此，零配置服务器端），即哈希路由。添加一行

useHash: true

在根路由器模块的配置中（然后，url 将类似于 http://myserver/#/category/fruit/apple）。

Angular URL 初始加载路由映射

Angular URL mapping with routes for initial load

angular

angular-router