Angular 路由 - 直接路径访问在 URL 中不起作用

Question

我创建并托管 www.xinthose.com. This is the source code for the website. When you navigate to the website, it will take you to the path /home, but when you try to duplicate that tab or go directly to www.xinthose.com/home，我从 HostGater（我的网站托管商）收到 404 错误。这是app-routing.module.ts的内容：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent }   from './home/home.component';
import { BibleComponent }   from './bible/bible.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'bible', component: BibleComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

为什么会发生这种情况，我该如何解决？它与 pathMatch 有关系吗？我错过了一些 Route property 吗？

Answer 1

这不是因为网络应用路由角色。

Angular 应用程序必须安装并可用，angular 路由器才能使用，因此，当您尝试像这样 'domain/home' 访问路由时，您将得到404 错误。

我现在知道三个解决方案

第一'best'

Angular universal

第二

如果您的主机类似于 apache，使用 php 文件，请尝试像这样重写路由

搜索任何其他类型的主机服务器的重写 URL

.htaccess

RewriteEngine On
    RewriteCond %{HTTP_HOST} !^www.domain.com$ [NC]
    RewriteRule ^(.*)$ https://app.domain.com/ [L,R=301]

第三

使用PWA

这个很棒，但仍然必须在用户设备上安装应用程序，但首次启动后，直接路由将起作用

Answer 2

我花了将近一年的时间，但我发现您必须为 node.js 托管付费，AWS elastic beanstalk 是一个很好的选择。然后你必须使用像 express.js 这样的东西来为你的静态编译网站提供服务。这是我的工作示例 server.js:

"use strict";
const express = require("express");
const compression = require('compression');

// config
const port = process.env.PORT || 3000;
const app_folder = "./";
const options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['html', 'js', 'scss', 'css'],
  index: false,
  maxAge: '1y',
  redirect: true,
}

// create app
const app = express();
app.use(compression());
app.use(express.static(app_folder, options));

// serve angular paths
app.all('*', function (req, res) {
    res.status(200).sendFile(`/`, {root: app_folder});
});

// start listening
app.listen(port, function () {
    console.log("Node Express server for " + app.name + " listening on http://localhost:" + port);
});

然后在 package.json 你有一个启动命令，网站主机将运行:

{
    "name": "xinthose.com",
    "scripts": {
        "ng": "ng",
        "start": "node server.js",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "dependencies": {...},
    "devDependencies": {...}
}

这是在静态单页应用程序上动态提供页面的唯一方法。

Answer 3

备选方案，2022 年 5 月：

这可能是一个很晚的答案，我看到你已经解决了你的问题。然而，这里有一个替代方案（免费托管，但根据您使用的服务，可以付费）：

您可以使用 Firebase Hosting 免费托管您的 angular 应用程序。如果您不想使用从 Firebase 生成的默认 url，也可以使用您自己的域。我最初在其他地方托管我的应用程序，这导致了与您上面描述的相同的问题，但是使用 Firebase 托管应用程序为我解决了这个问题。

您可以简单地从 Firebase 文档（上面的link）在您的应用程序中实现 firebase，或者更简单的解决方案是使用 angular/angularfire 实现它，这是 [=26] 的 Firebase 官方实现=].请使用 ng add @angular/fire 安装库并按照终端中给出的说明进行操作。

Angular 路由 - 直接路径访问在 URL 中不起作用

Angular Routing - Direct path access not working from URL

angular-routing

angular8

第一'best'

第二

第三