Блог

Учитывая, что Angular2 — это одностраничный сайт, нам нужно перенаправлять все URL-запросы на index.html с помощью Nginx. Вот мой серверный блок 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-адрес в браузере. Но есть две проблемы:

1. Когда я ввожу URL-адрес в браузере, а затем нажимаю enter для запуска (или если я просто обновляю страницу), загрузка страницы занимает очень много времени, около 6 секунд. Но если я удалю перенаправление из блока сервера Nginx, это займет менее одной секунды. Но навигация по приложению (с использованием ссылок) работает так, как ожидалось.
2. У меня есть ссылка на моей странице (href), которая указывает на корень (http://my_site.com /, это ссылка «домой»). Если я нажму на него, он перезагрузит всю страницу. Это неправильное поведение в Angular2, оно должно просто изменить маршрут к дому. Эта проблема возникает только на моем сервере. Если я запускаю на своем локальном компьютере, все работает хорошо, поэтому я думаю, что проблема связана с моей конфигурацией Ngninx.

Какая хорошая конфигурация для использования Nginx с Angular2?

РЕДАКТИРОВАТЬ: я начал свой проект с БЫСТРОГО ЗАПУСКА проектов из angular.io . Вот мой файл 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);
  

И я импортировал routing в @NgModule import раздел моего файла app.module.ts.

Мне удалось правильно настроить 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;
    }
}
  

Вы не должны добавлять перенаправление на nginx, но измените маршрутизацию вашего сервера приложений, чтобы обслуживать страницу, содержащую ваше приложение, по путям, которые являются допустимыми на стороне клиента.

Это хорошо объяснено здесь для экспресс-приложения. (начало в 2:00)

Редактировать

https://www.youtube.com/watch?v=ANfplcxnl78amp;index=2amp;list=PLOa5YIicjJ-VA38pChXHhq8jY2U8iYynr

для nginx это должно быть что-то вроде

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

try_files проверит наличие файла, указанного в пути, и не будет работать
Вам также потребуется удалить первую спецификацию