我如何构建一个指向我的Angular应用程序路由的链接？

Question

我有一个应用程序在“ www.example.com”上运行，它与一些静态html页面并排放置。我需要提供一个指向www.example.com/guest_register的“注册”链接。这在本地有效，但在服务器上无效。

背景：

在本地运行时，我可以创建指向http://localhost:4200/guest?token=asdf&user=username的链接，该链接可以很好地注册新用户。在服务器上，指向http://www.example.com/guest?token=asdf&user=username的链接给出404错误。...到http://www.example.com/#/guest?token=asdf&user=username的链接将我发送到我的index.html。我曾尝试在直觉上添加“＃”，但不确定真正的区别是什么。

服务器的public_html目录如下：

index.html //静态页面main.html //我实际的Angular应用样式.-----。js脚本.-----。js运行时polyfills .----。js主要.-----。js3rdpartylicenses.txt资产/

我为公众提供index.html，然后根据需要链接到main.html以登录注册用户。在本地，当我链接到我的应用程序时，浏览器地址栏从file：//..index.html切换到localhost：4200。在服务器上，地址栏从www.example.com重新加载到www.example.com。

这是我在app.module.ts中的路线图：

const appRoutes: Routes = [
  { path: '', component: WizardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'guest', component: GuestComponent },
  { path: 'admin', component: AdminComponent, canActivate: [AdminGuard] },
  { path: '**', redirectTo: '' }
];
.
.
@NgModule({
  declarations: [
.
.
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
.
.

没什么好想的。因此，是什么让我无法在服务器上而不是在本地直接将/ guest附加到URL的末尾？

编辑：当请求无法识别的URL时，似乎我的应用程序应回退到main.html（我的角度应用程序），回退到index.html，according to these official docs：

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

我的.htaccess中已经有一些神秘的词句，我只了解得足够清楚，知道他们在将maintenance.enable存在时可以将除我的IP之外的所有其他用户重定向到maintenance.html：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^MY\.IP\.ADD\.RESS
RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f
RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f
RewriteCond %{REQUEST_URI} !^/maintenance\.html$ [NC]
RewriteCond %{REQUEST_URI} !\.(jpe?g?|png|gif) [NC]
#RewriteCond %{SCRIPT_FILENAME} !maintenance.html
RewriteRule ^(.*)$ /maintenance.html [R=302,L]
</IfModule>

如何将官方文档中的建议整合到现有的.htaccess文件中？

Answer 1

我将进一步详细说明我的评论。编译Angular项目时，它会将所有内容折叠到一个文件中，通常这就是所谓的single page application。从历史上看，这与Web服务器的设置有很大不同。

第一个/后的部分通常会转换为文件。因此，在

的情况下

www.example.com/guest_register

现成的服务器在www文件夹中寻找guest_register.html。对于单页应用程序，不满足此先决条件。您没有名为guest_register.html的文件，因此服务器以404响应。

斜角路由器的作用是，接受原始请求并找出为您服务的“页面”。

在生产环境中，应用程序的唯一入口是index.html，因此您需要明确告诉服务器将任何404重定向到index.html（回退是技术术语）

通过本地运行时这不是问题

ng serve
因为此命令启动的是configured with this behavior的本地服务器>
如何配置的详细信息here

复制下面的要点，以防链接断开（最近似乎经常发生在角度页面上）

Apache：

添加到。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
Nginx：

try_files $uri $uri/ /index.html;
Firebase：
添加以重写规则

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]
希望有帮助