Проект Angular 6 отображает ошибку 404 после обновления
Обновление моей страницы angular дает мне ошибку сервера 404, то же самое происходит, если я вручную перехожу к каталогу в строке поиска. Я размещаю через сервер IIS.
Эта проблема возникает только тогда, когда я создаю свой угловой проект с помощью ng build --prod, а затем загружаю его на свой веб-сервер. Многие люди говорят, что вы должны использовать метод хеша, но я не хочу, чтобы хэш отображался внутри моего URL-адреса, и это очень старый метод. Некоторые люди также говорят, что я должен изменить свой тег <base> в своем <head>, но это не сработало.
Вот мой тег <head> из моего index.html, если это полезно.
<head>
<!-- META DATA -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<!-- APP -->
<title>SebastianElstadt</title>
<base href = "/">
<link rel = "icon" type = "image/x-icon" href = "assets/images/app-icon.png">
<!-- STYLES -->
<link rel = "stylesheet" href = "[fontawesome cdn]">
</head>
Я также использую компонент, который отображается, если введенный URL-адрес не соответствует ни одному из моих определенных путей. Но он не отображается.
Итак, подведем итог: всякий раз, когда я обновляю свою страницу или вручную перемещаюсь по строке поиска на моем сайте angular, она отображает страницу 404 Server Error. И я не хочу использовать хеш-метод.
Вам нужно использовать Стратегия расположения пути
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Я не знаю, какой сервер вы используете, но если вы не хотите использовать хеш-метод, каждый запрос должен быть перенаправлен на ваш index.html, где работает приложение angular.
Если сервер не может найти маршрут /your/sub/route и пишет "404 not found".
Вы должны проверить https://angular.io/guide/развертывание для развертывания приложения Angular. Ему нужна определенная конфигурация, основанная на вашем http-сервере. Так, например, для 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Я выполнил шаги по настройке файла web.config для своего сервера IIS, но теперь всякий раз, когда я перехожу на свой веб-сайт, он просто отображает 500 — внутренняя ошибка сервера.
@Sebastian, тогда, вероятно, есть ошибка в вашем файле web.config. Я не знаю, какова ваша конфигурация и как вы структурировали свою серверную среду, поэтому трудно сказать, если вы не поделитесь дополнительной информацией об этом.
Вы можете решить эту проблему, создав файл web.config:
<?xml version = "1.0" encoding = "UTF-8"?>
<configuration>
<system.webServer>
<defaultDocument>
<files>
<clear />
<add value = "index.html" />
</files>
</defaultDocument>
<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" />
</conditions>
<action type = "Rewrite" url = "/" logRewrittenUrl = "true" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering allowDoubleEscaping = "true">
<fileExtensions>
<add fileExtension = ".json" allowed = "true" />
</fileExtensions>
</requestFiltering>
</security>
<directoryBrowse enabled = "true" />
<staticContent>
<remove fileExtension = ".woff" />
<remove fileExtension = ".woff2" />
<mimeMap fileExtension = ".woff" mimeType = "application/font-woff" />
<mimeMap fileExtension = ".woff2" mimeType = "application/font-woff2" />
</staticContent>
</system.webServer>
</configuration>
.Net Core с ошибкой Angular 4: 404 при обновлении браузера
Я просто хочу убедиться, что я должен изменить что-то здесь и там в этом коде или скопировать его напрямую?
Вы можете использовать его как есть. Также возможно автоматически сгенерировать этот файл с помощью IIS.
Я добавил заголовок для файла веб-конфигурации, чтобы вы могли использовать его напрямую.
Спасибо, но всякий раз, когда я добавляю файл web.config и добавляю этот код, он загружает 500 - Внутренняя ошибка сервера.
Я пытаюсь развернуть одностраничное приложение Angular 6 в SharePoint и получаю ту же проблему, что и исходный постер. Я добавил файл web.config в тот же каталог, что и мой файл index.html. Есть идеи, что не так?
если вы находитесь на такой странице, как mywebsite/example/1, и нажимаете «Обновить» в браузере, иногда он не попадает в маршрутизатор, и в angular вы ничего не можете сделать, чтобы это исправить, но вы можете создать папку с именем «пример» и внутри поместите еще один index.html с простым скриптом javascript, который говорит window.location.href=http://mywebsite/index.html, и это дает вам представление о том, что происходит, а также обходной путь.
Стоит отметить, что это решение требует установки «модуля перезаписи» в вашем IIS. Вы можете найти его в Google или использовать инструмент «установщик веб-платформы».
Это решит вашу проблему, добавьте файл .htaccess в корень вашего проекта.
и поместите этот контент
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
</IfModule>
"Старый" не значит "Плохой". Как новичок, я бы предпочел увидеть хеш в своем URL-адресе, чем перенастраивать свой сервер. Но чтобы ответить вам, это проблема HTTP-сервера, а не проблема Angular. Вы должны использовать правильные теги для идентификации вашего сервера, иначе вы не получите надлежащего ответа.