[英]Angular 2 static page routing
i build a static page using angluar 2, when i run ng serve
and go to my page it run like i want. 我使用Angluar 2构建了一个静态页面,当我运行
ng serve
并转到我的页面时,它会按我的意愿运行。 what i mean with what i want is, it can go to specific page by typing in url, like www.mysite.com/resume
but when i uploaded it to my site after doing ng build --prod
i can't go to www.mysite.com/resume
by typing, it shows 404 page not found
. 我想要的意思是,它可以通过输入URL进入特定页面,例如
www.mysite.com/resume
但是当我在执行ng build --prod
后将其上传到我的网站时,我无法访问www.mysite.com/resume
键入www.mysite.com/resume
,它显示404 page not found
。
This is my app.module.ts 这是我的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 { }
this is my app.component.html 这是我的app.component.html
<app-navbar></app-navbar>
<div class='container'>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
in my navbar.component.html
i have button to specific component and it works well. 在我的
navbar.component.html
我有特定组件的按钮,并且效果很好。
this is my 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>
what i really want is i can go to specific address by typing like i did when i use ng serve
我真正想要的是我可以像输入
ng serve
时一样键入特定的地址
I faced this issue before and i think its the same case: 我之前遇到过这个问题,我认为情况相同:
If you are using Nginx web server, make sure you have a right rule to redirect any URL to the index.html for example: 如果您使用的是Nginx Web服务器,请确保您有正确的规则将任何URL重定向到index.html,例如:
location / {
# try_files $uri @rewrite;
try_files $uri /index.html?$query_string;
}
For Apache i do not really test it but i think its the same case. 对于Apache,我并没有真正测试过,但我认为情况相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.