首页 文章

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

提问于
浏览
1

我使用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是“/” . 有什么我做错了吗?提前致谢 .

1 回答

  • 0

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

    我假设's done on your development server, so you need to configure your production server with the same settings. It'与 base hreflocation strategy 无关(假设你've got them working with your development server), it'所有关于 生产环境 服务器的 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>
    

    Edit: 我假设您在根级域上提供应用程序(例如:www.yoursite.com,yourapp.somedomain.com) . 如果应用程序根URL类似于 www.somedomain.com/some-app ,那么您需要设置适当的 base href 绑定 .

相关问题