Как создать ссылку на один из маршрутов моего приложения Angular?

Question

У меня есть приложение, работающее по адресу "www.example.com", которое расположено рядом со статическими html-страницами. Мне нужно предоставить ссылку для регистрации, которая идет по адресу www.example.com/guest_register. Это работает локально, но не на сервере.

Справочная информация:

Когда я работаю локально, я могу создать ссылку на http://localhost:4200/guest?token=asdf&user=username, которая отлично работает для регистрации нового пользователя. На сервере ссылка на http://www.example.com/guest?token=asdf&user=username выдает ошибку 404 .... ссылка на http://www.example.com/#/guest?token=asdf&user=username отправляет меня на мой index.html. Я попытался добавить '#' для догадки, но я не уверен, в чем заключается реальная разница.

Каталог public_html сервера выглядит так:

index.html // aстатическая страница main.html // мои настоящие стили приложения Angular .-----. js-скрипты .-----. js runtime .----. js polyfills .----. js main .----. js 3rdpartylicenses.txt assets /

Я предоставляю index.html для широкой публики, а затем добавляю ссылку на main.html для входа в систему зарегистрированных пользователей. Локально адресная строка браузера переключается с file: //..index.html на localhost: 4200, когда я связываюсь с моим приложением. На сервере адресная строка перезагружается с www.example.com на www.example.com.

Вот моя карта маршрутов в app.module.ts:

const appRoutes: Routes = [
  { path: '', component: WizardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'guest', component: GuestComponent },
  { path: 'admin', component: AdminComponent, canActivate: [AdminGuard] },
  { path: '**', redirectTo: '' }
];
.
.
@NgModule({
  declarations: [
.
.
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
.
.

Ничего слишкомфантазии. Итак, что мешает мне напрямую добавить / guest в конец URL-адреса, находясь на сервере, но не локально?

РЕДАКТИРОВАТЬ: кажется, что мое приложение возвращается к index.html, когда оно должно падатьвернуться к main.html (мое угловое приложение) при запросе нераспознанного URL, в соответствии с этими официальными документами :

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Мой .htaccess уже содержит несколько загадочных строк, которыеЯ достаточно хорошо понимаю, что знаю, что они работают, чтобы перенаправить всех пользователей, кроме моего IP, на maintenance.html, когда существует maintenance.enable:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^MY\.IP\.ADD\.RESS
RewriteCond %{DOCUMENT_ROOT}/maintenance.html -f
RewriteCond %{DOCUMENT_ROOT}/maintenance.enable -f
RewriteCond %{REQUEST_URI} !^/maintenance\.html$ [NC]
RewriteCond %{REQUEST_URI} !\.(jpe?g?|png|gif) [NC]
#RewriteCond %{SCRIPT_FILENAME} !maintenance.html
RewriteRule ^(.*)$ /maintenance.html [R=302,L]
</IfModule>

Как интегрировать предложение по официальным документам в мои существующие. htaccess файл?

Answer 1

Я подробно остановлюсь на своем комментарии. Когда вы компилируете свой проект Angular, он объединяет все в один файл, обычно это так называемое одностраничное приложение Исторически это сильно отличается от того, как были настроены веб-серверы.

Часть после первого / обычно переводится в файл. Так, в случае

www.example.com/guest_register

Готовый сервер ищет guest_register.html в папке www. В случае одностраничных приложений это предварительное условие не выполняется. У вас нет файла с именем guest_register.html, в результате сервер отвечает 404.

Что делает угловой маршрутизатор, возьмите исходный запрос и выясните, какую «страницу» обслуживать.

В производственной среде единственной точкой входа в ваше приложение является index.html, поэтому вам нужно явно указать серверу перенаправить любые 404 в index.html (резервный технический термин)

Это не проблема, если вы запускаете его локально через

ng serve

, потому что эта команда запускает локальный сервер, настроенный с таким поведением

Подробная информация окак настроить выложено здесь

Копирование основных моментов ниже на случай, если ссылка перестанет работать (что, кажется, часто происходит с угловой страницей в последнее время)

Apache:

добавить к .htaccess

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html

RewriteRule ^ /index.html

Nginx:

try_files $uri $uri/ /index.html;

База огня:

Добавить в правила переписывания

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Надеюсь, это поможет