Angular 2 静态页面路由

Question

我使用 angluar 2 构建了一个静态页面，当我运行 ng serve 并转到我的页面时，它会按我想要的方式运行。我的意思是我想要的是，它可以通过输入 url 转到特定页面，例如 www.mysite.com/resume 但是当我在完成 ng build --prod 后将其上传到我的网站时，我无法通过输入转到 www.mysite.com/resume，它显示404 page not found。

这是我的 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 { RouterModule, Routes } from '@angular/router'
import { NgsRevealModule } from 'ng-scrollreveal';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { ResumeComponent } from './components/resume/resume.component';
import { FooterComponent } from './components/footer/footer.component';
import { PortofolioComponent } from './components/portofolio/portofolio.component';

const appRoutes: Routes = [
  {path:'', component: HomeComponent},
  {path:'resume', component: ResumeComponent},
  {path:'portofolio', component: PortofolioComponent},
  {path:'**', component: HomeComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavbarComponent,
    ResumeComponent,
    FooterComponent,
    PortofolioComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    NgsRevealModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 app.component.html

<app-navbar></app-navbar>
<div class='container'>
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

在我的navbar.component.html 中，我有特定组件的按钮，并且效果很好。

这是我的navbar.component.html

<div class="container">
  <nav class="nav nav-tabs">
        <div class="container" [ngsReveal]="{easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)', duration : 2000, origin: 'top', distance : '80px'}">
          <div class="navbar-header">
            <a class="navbar-brand" href="/">mysite</a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right item">
              <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/resume']">Resume</a></li>
              <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/portofolio']">Portofolio</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
  </nav>
</div>

我真正想要的是我可以像使用ng serve时那样通过键入来转到特定地址

Answer 1

我之前遇到过这个问题，我认为它是同样的情况：

如果您使用的是 Nginx 网络服务器，请确保您有正确的规则将任何 URL 重定向到 index.html，例如：

location / {
    # try_files $uri @rewrite;
    try_files $uri /index.html?$query_string;
}

对于 Apache，我并没有真正测试它，但我认为它是相同的情况。