Angular2 маршрутизация/глубокая ссылка не работает с Apache 404

Я следую примеру Angular 2 маршрутизации. Используя веб-сервер "lite", я могу перемещаться из корневой и глубокой ссылок, но используя Apache, я могу перемещаться из корня, но получаю ошибки 404 Not Found при следующих ссылках на маршруты.

Например, следующий URL-адрес работает против веб-сервера "lite", запущенного на порту 3000 на npm.

http://localhost:3000/crisis-center/2

Но следующий URL-адрес против Apache, запущенного на порту 80, терпит неудачу.

http://localhost/crisis-center/2
The requested URL /crisis-center/2 was not found on this server.

Я попробовал несколько решений .htaccess, рекомендованных для подобных Angular 1 вопросов, но не повезло. Если у кого-то была Angular 2 маршрутизация и глубокая привязка работы на Apache, пожалуйста, дайте мне знать, как вы это достигли.

@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
},

{path: '/heroes',   name: 'Heroes',     component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter',  'CrisisDetail', {id:3}]}
])

Boot.ts

import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent}     from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Ответы

Ответ 1

Поскольку другие ответы на самом деле не отвечают на вопрос, если вы хотите, чтобы он работал с Apache. HashLocationStrategy остается опцией, но если вы хотите, чтобы она работала как есть на Apache, вам нужно сделать следующее:

Создайте новый файл .htaccess в том же месте, что и ваш index.html. Следующий код будет внутри:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteBase /crisis-center/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

(обратите внимание, что в вопросе <base href="/crises-center/"> внутри index.html должен быть идентичен RewriteBase)

Ответ адаптирован из вопроса + ответ из маршрутизации Angular 2 и прямого доступа к конкретному маршруту: как настроить Apache?

Ответ 2

Для тех, кто работает на Apache используйте этот .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

Если вы все еще получаете ошибку, запустите эти две команды:

sudo a2enmod rewrite
sudo systemctl restart apache2

Ответ 3

Для углового4/ angular в app.routes.module.ts используется useHash, как показано ниже,

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})

Ответ 5

В соответствии с ответом Рейна Баарсмы вам нужно создать файл .htaccess и поместить его в тот же каталог, что и ваш index.html на ваш сервер Apache. Это может быть, например, каталог htdocs, но это зависит от вашей конфигурации Apache.

Однако я использую другое содержимое файла .htaccess, и он работает для меня для всех ссылок/маршрутов без необходимости указывать базу перезаписи:

<IfModule mod_rewrite.c>
  Options Indexes FollowSymLinks
  RewriteEngine On
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Это модификация кода, предоставленная Рейном Баарсмой.

Мое приложение - это приложение Angular 2+ (4.x.x) на основе проекта angular -cli. Это вряд ли зависит от прямых URL-адресов адресов, предоставляемых маршрутизацией Angular. Без .htaccess файла выше я получил 404 not found после нажатия каждой прямой ссылки URL. Теперь с использованием этого файла .htaccess все работает нормально.

Ответ 6

Если вы работаете с ионной сборкой и загружаете свой сайт на хост-сервер, вам нужно добавить файл .htaccess в корневой каталог внутри папки www.

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) / [R=302,NC,L]

Ответ 7

Либо в httpd.conf, либо в apache2.conf добавьте следующее:

<Directory "/var/www/html/">
    Options FollowSymLinks
    Allow from all
    AllowOverride All
</Directory>
  • Измените "/var/www/html/" на местоположение вашего сайта

И в .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 does not exist, use index.html
RewriteRule ^ /index.html