0

我有一个Angular应用程序。我运行命令ng build --prod --aot来生成dist文件夹。 在dist文件夹中,我创建了一个名为Staticfile文件,然后我上传dist文件夹到pivotal.io用下面的命令:404未找到nginx角度4路由

  1. CF推名称应用--no启动
  2. CF启动名称 - 应用程序

该应用程序运行良好。我有一个导航栏,所以当我用navbar改变路径时,一切正常。但当我手动(我自己输入网址)我有这个错误404 Not Found nginx。 这是我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'); 
    } 
} 

编辑

是静态编译不适合我的应用?角度应用程序准备就绪后应该做什么?你所有的回应都假设我已经有了后端。你能仔细阅读我的文章吗?

+0

按照此HTTPS发现某处:/ /stackoverflow.com/a/40833154更新你的nginx配置文件 – Brilliant

回答

1

我终于找到了答案: 我产生DIST文件夹后。

  • 我创建了一个名为Staticfile
  • 我打开Staticfile &我加入这一行启用pushstate: enabled

pushState的保持浏览器显示的网址干净的客户端JavaScript的应用程序,服务文件多条路线。例如,pushstate路由允许单个JavaScript文件路由到多个锚点标记的URL,它们看起来像/ some/path1而不是/ some#path1。

1

Angular应用程序是单页面应用程序。当您手动键入地址时,您尝试路由到应用程序未运行的位置。

您需要编辑nginx config才能路由到您的基本页面。

+0

我没有nginx配置,我做的唯一步骤就是我上面写的那些。我刚刚添加了一个Staticfile,然后推送了dist文件夹。 – Melchia

+0

https://stackoverflow.com/questions/39612339/how-can-i-deploy-my-angular-2-typescript-webpack-app – Carsten

+0

如何配置nginx的pivotal.io。我没有服务器端,我所做的只是在前端方面。 – Melchia

2

这是服务器端的问题,而不是Angular方面的问题。服务器负责为您的案例nginx中的每个请求返回索引或登录页面。

UPDATE

如果你以任何方式不具有后端或服务器,您可以配置这有两种解决方法。

  • 在角
  • 使用HashLocationStrategy在index.html文件link无-15制作一些好办法
+0

如果你不想通过nginx配置方式去解决这个问题,但是我想解决这个问题是一个严格的工作[https://rahulrsingh09.github.io/AngularConcepts/faq]检查问题15 [最后一个] –

+0

我已经告诉过你,先生,我所做的只是创建一个Angular应用程序。我在后台没有做任何工作 – Melchia

+0

这是一个只适用于前端的工作,请检查评论sir中的链接。您需要在index.html中进行更改。我会在回答中更新 –

1

对于那些不使用静态文件可能想试试这个。

我有与nginx服务角相同的问题。 以下是默认的配置文件,可能在/ etc/nginx的/网站可用/ yoursite

 location/{ 
      # First attempt to serve request as file, then 
      # as directory, then fall back to displaying a 404. 
      try_files $uri $uri/ /index.html; 
    } 

但我们acctually想要的是......

 location/{ 
      # First attempt to serve request as file, then 
      # as directory, then redirect to index(angular) if no file found. 
      try_files $uri $uri/ /index.html; 
    } 
+0

是的,您是对的。这种方法也适用。但在我的情况下,我使用的是PWS,它是一个PaaS,所以它无法工作。 +1虽然它可以帮助未来的人 – Melchia