Question

我使用Angular 2建立了一个网站。我已经在生产的Linux服务器上部署了该网站。单击导航上的链接时，路径似乎工作正常，但刷新页面时显示404错误。一切似乎在localhost上工作正常，但在实时服务器上却没有。我甚至尝试使用 HashLocationStrategy ，但无济于事。

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { RulesComponent } from './rules/rules.component';
import { DownloadsComponent } from './downloads/downloads.component';
import { RegisterComponent } from './register/register.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'about', component: AboutComponent},
    {path: 'rules', component: RulesComponent},
    {path: 'downloads', component: DownloadsComponent},
    {path: 'register', component: RegisterComponent},
    {path: 'contact', component: ContactComponent}
];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { routing, appRoutingProviders } from './app.routing';
import { HeaderComponent } from './header.component';
import { FooterComponent } from './footer.component';
import { NavComponent } from './nav.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { RulesComponent } from './rules/rules.component';
import { DownloadsComponent } from './downloads/downloads.component';
import { RegisterComponent } from './register/register.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NavComponent,
    HomeComponent,
    AboutComponent,
    RulesComponent,
    DownloadsComponent,
    RegisterComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy} ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的基础href是“/”。有什么我做错了吗？提前谢谢。

Answer 1

您需要将服务器配置为将除文件（例如API）之外的所有请求重定向到根目录下的index.html，以便Angular Router可以处理路由。

我认为您已在开发服务器上完成了这项工作，因此您需要使用相同的设置配置生产服务器。它与base href或location strategy无关（假设您已经让他们使用了您的开发服务器），这完全与rewrite rules有关。生产服务器应该有。

如果你正在使用Apache，试试这个：

<Directory /var/www/html/yourproject>
    Options Indexes FollowSymLinks
    RewriteEngine On
    RewriteBase /yourproject
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /yourproject/index.html [L]
</Directory>

修改：我认为您在根级域上提供应用（例如：www.yoursite.com，yourapp.somedomain.com）。如果应用根网址与www.somedomain.com/some-app类似，那么您需要设置适当的base href绑定。

Angular 2站点页面刷新适用于localhost，但在活动服务器上刷新时显示404错误

1 个答案: