После сборки ng в Angualr 2 Приложение Cli создаст обновленные шоу 404 Ошибка

Question

Я успешно создал и запустил приложение angualr2-cli. Я также развертываю приложение на сервере apache. Для этого я использую команду angular2-cli. ng build

Но мое приложение не работает (404 Page Not Found Error) при обновлении дочерних страниц.

Просьба сделать следующие шаги, чтобы понять проблему, о которой я упомянул.

1. Click this link to load the web page

2. Клик меню работы боковой панели или любой или боковой панели элемента

3. Затем обновите страницу

Вы бы смогли увидеть мою проблему , Страница исчезла и отобразилась ошибка 404. Почему это происходит после развертывания на сервере Apache. Обновление отлично работает в среде разработки (http://localhost:4200), в то время как я запускаю сервер с помощью команды ng serve

Answer 1

Я исправил этот вопрос, следующий за this guide. Это ничего плохого в моей конфигурации. Проблема заключается в добавлении .httaccess и разрешении правила перезаписи на настройках сервера.

Я кратко изложил шаги, которые я сделал для устранения этой проблемы.

1. Я добавил файл .httaccess в том месте, где находится index.html.

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

2.Then позволяют rewite мод на сервер Apache с помощью sudo a2enmod rewrite

3. перезагружать сервер Apache service apache2 restart

4.После что открыть файл /etc/apache2/sites-enabled/000-default.conf и добавьте следующее правило на <VirtualHost> тег

<Directory "/var/www/html"> 
    AllowOverride All 
</Directory> 

Вот и все! Любая из ссылок перенаправляется на мой index.html и работает. Поскольку все маршруты являются маршрут из index.html в angular2 маршрутизации

Answer 2

Вот решение для сервера IIS

1. Создать файл web.config, который включает в себя следующее:

   <!-- configure the site to work with HTML5 push state --> 
   <rewrite> 
       <rules> 
       <rule name="AngularJS Routes" stopProcessing="true"> 
        <match url=".*" /> 
        <conditions logicalGrouping="MatchAll"> 
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
        </conditions> 
        <action type="Rewrite" url="/" /> 
       </rule> 
       </rules> 
   </rewrite> 
   

2. Поместите этот файл в папку, развернутую yor root.