部署单页应用程序Angular:找不到404 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:

1. cf push name-app --no-start
2. cf开始名称应用

该应用程序运行良好.我有一个导航栏，因此当我使用导航栏更改路径时，一切正常.但是，当我手动执行操作(我自己输入网址)时，出现此错误 404未找到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文件夹中
• 我打开了 Staticfile &我添加了这行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可以使提供多个路由的客户端JavaScript应用程序保持浏览器可见的URL干净.例如，pushstate路由允许单个JavaScript文件路由到看起来像/some/path1而不是/some#path1的多个带有锚标记的URL.

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 nginx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！