404找不到nginx角度路由

Question

我有一个Angular应用程序.我运行命令ng build --prod --aot来生成dist文件夹.在dist文件夹中,我创建了一个名为Staticfile的文件,然后使用以下命令将dist文件夹上传到pivotal.io:

1. cf push name-app --no-start
2. cf start name-app

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

Answer 1

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

我有nginx服务角度相同的问题.以下是默认配置文件,可能位于/ etc/nginx/sites-available/yoursite中的某处

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

但我们实际想要的是......

     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;
    }

Answer 2

在您的nginx.conf文件中尝试使用:

try_files $uri $uri/ /index.html;

代替:

try_files $uri $uri/ =404;

这对Angular 5项目有用.

Answer 3

我假设您的/dist目录的所有数据现在都在 中/var/www/your-domain/，如果没有，请先粘贴到该目录中

现在您的网址仅被接受的主页或登陆页面，否则它们会显示 404 错误。

在这种情况下找到你的ngnix的/default文件，在Linux路径中这样/etc/nginx/sites-available/default，在这个文件中，你会看到这样的

try_files $uri $uri/ =404

用。。。来代替

try_files $uri $uri/ /index.html;

现在你在linux中使用命令重新启动你的ngnix服务器

sudo systemctl restart nginx

并查看 ngnix 的状态

sudo systemctl status nginx

Answer 4

我终于找到了答案：生成dist文件夹后。

• 我创建了一个名为Staticfile的文件，并将其放在dist文件夹中
• 我打开了Staticfile，并添加了这一行pushstate: enabled

启用pushstate可以使提供多个路由的客户端JavaScript应用程序保持浏览器可见的URL干净。例如，推状态路由允许将单个JavaScript文件路由到看起来像/ some / path1而不是/ some＃path1的多个带有锚标记的URL。