部署单页应用程序 Angular: 404 Not Found nginx [英] Deploy single page application Angular: 404 Not Found nginx
问题描述
我有一个 Angular 应用程序.我运行命令 ng build --prod --aot
来生成 dist 文件夹.在 dist 文件夹中,我创建了一个名为 Staticfile 的文件,然后我将 dist 文件夹上传到了 pivotal.io 使用以下命令:
I Have an Angular application. I run the command ng build --prod --aot
to generate the dist folder.
In the dist folder I created a file named Staticfile then I uploaded the dist folder to pivotal.io with the following commands:
- cf push name-app --no-start
- cf start name-app
该应用运行良好.我有一个导航栏,所以当我用导航栏更改路径时,一切正常.但是,当我手动执行此操作时(我自己输入 url),出现此错误 404 Not Found nginx.这是我的 app.component.ts:
The app runs well. I have a nav bar, so when I change the path with navbar everything works fine. But when I do it manually (I enter the url myself) I have this error 404 Not Found nginx. This my app.component.ts:
const appRoutes: Routes = [
{ path: 'time-picker', component: TimePickerComponent },
{ path: 'material-picker', component: MaterialPickerComponent },
{ path: 'about', component: AboutComponent },
{ path: 'login', component: LoginComponent },
{ path: 'registration', component: RegistrationComponent },
{
path: '',
redirectTo: '/time-picker',
pathMatch: 'full'
}
];
@NgModule({
declarations: [
AppComponent,
TimePickerComponent,
MaterialPickerComponent,
DurationCardComponent,
AboutComponent,
LoginComponent,
RegistrationComponent,
],
imports: [RouterModule.forRoot(
appRoutes
// ,{ enableTracing: true } // <-- debugging purposes only
),
FormsModule,
BrowserAnimationsModule,
BrowserModule,
MdCardModule, MdDatepickerModule, MdNativeDateModule, MdInputModule
],
providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private dateAdapter: DateAdapter<Date>) {
this.dateAdapter.setLocale('fr-br');
}
}
推荐答案
我终于找到了答案:在我生成 dist 文件夹之后.
I finally found the answer: After I generated the dist folder.
- 我创建了一个名为 Staticfile 的文件并将其放在 dist 文件夹中
- 我打开了静态文件 &我添加了这一行
pushstate: enabled
- I created a file called Staticfile and put it in the dist folder
- I opened Staticfile & I added this line
pushstate: enabled
启用pushstate 可以使浏览器可见的URL 保持干净,以便为多个路由提供服务的客户端JavaScript 应用程序.例如,pushstate 路由允许单个 JavaScript 文件路由到多个带有锚标记的 URL,这些 URL 看起来像/some/path1 而不是/some#path1.
pushstate enabled keeps browser-visible URLs clean for client-side JavaScript apps that serve multiple routes. For example, pushstate routing allows a single JavaScript file route to multiple anchor-tagged URLs that look like /some/path1 instead of /some#path1.
这篇关于部署单页应用程序 Angular: 404 Not Found nginx的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!