404 Не найден nginx угловая маршрутизация

У меня есть угловое приложение. Я запускаю команду ng build --prod --aot чтобы сгенерировать папку dist. В папке dist я создал файл с именем Staticfile, а затем загрузил папку dist в pivotal.io с помощью следующих команд:

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

Приложение работает хорошо. У меня есть панель навигации, поэтому, когда я изменяю путь с помощью панели навигации, все работает нормально. Но когда я делаю это вручную (я сам ввожу URL), у меня появляется эта ошибка 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');
  }
}

Ответы

Ответ 1

Я наконец нашел ответ: После того как я сгенерировал папку dist.

  • Я создал файл с именем Staticfile и поместил его в папку dist
  • .Я открыл Статический файл & Я добавил эту строку pushstate: enabled

Функция pushstate поддерживает чистоту видимых в браузере URL-адресов для клиентских приложений JavaScript, которые обслуживают несколько маршрутов. Например, маршрутизация pushstate разрешает один маршрут файла JavaScript к нескольким URL с тегами привязки, которые выглядят как /some/path1 вместо /some # path1.

Ответ 2

для тех, кто не использует Staticfile, вы можете попробовать это.

У меня была та же проблема, что и 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;
    }

Ответ 3

В вашем файле nginx.conf попробуйте использовать:

try_files $uri $uri/ /index.html;

вместо:

try_files $uri $uri/ =404;

Это сработало для меня в проекте Angular 5.

Ответ 4

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

ОБНОВИТЬ

Если вы каким-либо образом не имеете бэкэнд или сервер, на котором вы можете настроить это, есть два метода обхода.

  • Использование HashLocationStrategy в HashLocationStrategy
  • Создание некоторой настройки в ссылке index.html file No -15

Ответ 5

Угловые приложения - одностраничные. Когда вы вводите адрес вручную, вы пытаетесь выполнить маршрутизацию в место, где приложение не запущено.

Вам нужно отредактировать конфигурацию nginx для перехода на вашу базовую страницу.

Ответ 6

Для меня это была проблема с разрешениями, Nginx должен быть владельцем каталога, в который вы поместили свой dist, я видел эту ошибку в лог файле nginx

"root/../../dist/index.html" failed (13: Permission denied)

поэтому я дал разрешения пользователю nginx в верхней папке, содержащей мои dist

chown nginx . -R //  to give nginx the permissions on the current directory, and everything in it.

а затем вы должны перезапустить nginx

sudo systemctl restart nginx

и это должно работать!