Question

鉴于Angular2是一个单页网站，我们需要使用Nginx将所有网址请求重定向到index.html。这是我的Nginx服务器块：

server {
    listen 8901;
    server_name my_server_ip;
    root /projects/my_site/dist;

    location /.+\..+ { # files (assuming they always have a dot)
        # use eg alias to serve some files here
    }

    location / { # url routed by client, client gives 404 for bad urls
        try_files $uri /index.html;
    }
}

此配置全局运行良好。导航工作，我可以通过在浏览器中输入URL直接访问我的页面。但有两个问题：

当我在浏览器中输入url然后按enter键运行（或者如果我只是刷新页面），加载页面需要很长时间，接近6个secondes。但是如果我从Nginx服务器块中删除重定向，则只需不到一秒钟。但是通过应用程序的导航（使用链接）按预期工作。
我的网页上有一个链接（href）指向根（http://my_site.com/，它是＆＃39; home＆＃39;链接）。如果我点击它，它会重新加载所有页面。这不是Angular2中的正确行为，它应该只是改变到家的路线。此问题仅发生在我的服务器上。如果我在我的本地机器上运行，一切运行良好，这就是为什么我认为问题来自我的Ngninx配置。

使用Nginx和Angular2有什么好的配置？

修改我已经使用angular.io的QUICKSTART项目开始了我的项目。这是我的app.routing.ts文件：

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
import { ProfileComponent, ProfileConsultComponent, ProfileHomeComponent, CoachsComponent, AthletesComponent } from './profile/index';
import { FeedPostComponent } from './feedpost/index';
import { AuthGuard } from './_guards/index';

const appRoutes: Routes = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'profile/:pk', component: ProfileConsultComponent },
    { path: 'home', component: ProfileHomeComponent, canActivate: [AuthGuard],
        children: [
            { path: '', redirectTo: 'coachs', pathMatch: 'full' },
            { path: 'coachs', component: CoachsComponent },
            { path: 'athletes', component: AthletesComponent },
        ]
    },
    { path: 'post/:pk', component: FeedPostComponent, canActivate: [AuthGuard] },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我已在app.module.ts文件的routing @NgModule部分导入import。

Answer 1

我已成功正确设置nginx，以便按预期使用Angular 2.这是我的服务器块：

server {
    listen 80;
    server_name my_server_name;
    root /projects/angular2/myproject/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Answer 2

您不应该向nginx添加重定向，而是更改应用程序服务器的路由，以便为包含有效客户端路径的应用程序的页面提供服务。

这里很好地解释了一个明确的应用程序。（从凌晨2点开始）

修改

https://www.youtube.com/watch?v=ANfplcxnl78&index=2&list=PLOa5YIicjJ-VA38pChXHhq8jY2U8iYynr
对于nginx，
应该是

location ~ ^/([^/]+)/([^/?]+)$ { /index.html; }

try_files将检查路径中的speciefied文件，但不起作用您还需要删除第一个规范

Nginx Angular2 html5mode PathLocationStrategy

2 个答案: