Приложение Angular 6, как обслуживать его локально на wamp и как импортировать отсутствующие файлы на главную страницу

РЕДАКТИРОВАТЬ № 2

На моем www/ каталог, у меня есть свои серверные скрипты и .htaccess файл:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^([\w-]+)$ api.php [L]
DirectoryIndex api.php

#RewriteCond %{REQUEST_URI} !echo.php
#RewriteRule .* echo.php?ua=%{HTTP_USER_AGENT}&https=%{HTTPS} [L]

SetEnvIf Origin "^http(s)?://(.+\.)?(dev.local\.com|localhost:8100|localhost:4200)$" ORIGIN=$0
Header always set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
Header merge Vary Origin

Header set Access-Control-Allow-Credentials "true"Header set Access-Control-Allow-Headers "Content-Type, cookie"Header set Content-Type "application/json"Header set Access-Control-Allow-Methods "GET, POST"# prevent mime based attacks
Header set X-Content-Type-Options "nosniff"

На моем рабочем столе есть угловой проект, в котором я запускаю:

ng build --prod --aot

У меня есть папка внутри, называется dist/angular/ и внутри него все связанные файлы.

Я взял dist/angular/ содержание и поместить его в www/ каталог и попытался запустить index.html файл, и получил следующие ошибки:

введите описание изображения здесь

Я закончил приложение для своей организации на основе angular 6 и PHP на стороне сервера, и мне нужно проверить его локально. Большая часть наших работ будет выполнена на месте, поскольку начальник не хочет, чтобы какая-либо информация передавалась по проводам (данные НПО).

Я побежал:

ng-build --prod

И у меня есть dist папка. Но я открыл папку dist и не могу знать, что делать и как поместить ее на wampserver, чтобы пользователи могли тестировать ее со своих компьютеров.

Я проверил эта ссылка с выбранным ответом о добавлении http-server,

Работает с http-server будет хорошим вариантом при использовании wampserver в качестве локального сервера для обслуживания нашего приложения?

Редактировать:

Когда я открываю свой файл index.html, я получаю 5 ошибок:

введите описание изображения здесь

index.html сценарий:

<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration System</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->

<!--Bootstrap 4-->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->
<link rel="stylesheet" href="styles.aa5ea5c31cd0cd659c6e.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.2b56e49bc4acc7387a7f.js"></script><script type="text/javascript" src="polyfills.6a1700e5ae732a3a8f93.js"></script><script type="text/javascript" src="main.35b38c7c508a8567ed23.js"></script></body>
</html>

1

Решение

Размещая приложение Angular, вы можете буквально взять содержимое dist папку и поместите ее в свой htdocs или же www папка. Ну, по крайней мере, в самом простом сценарии.

Есть несколько предостережений, хотя.

Вышесказанное хорошо работает, когда вы хотите обслуживать его самостоятельно в корне вашего сервера.

Если вы размещаете приложение Angular из подпапки, вам нужно изменить базовый URL-адрес приложения, изменив эту строку в файле index.html:

<base href="/path/to/folder/">

Кроме того, если вы этого еще не сделали, вам нужно правильно настроить CORS для бэкэнда PHP.

Наконец, вам нужно позаботиться о маршрутизации. Это требует записи в .htaccess файл для маршрутизации следующим образом:

  1. Любой путь, который должен идти к приложению Angular, должен направлять его index.html,
  2. Все файлы JavaScript, CSS, шрифты и изображения должны работать в обычном режиме.
  3. Файлы PHP должны по-прежнему отправляться в обычном режиме, желательно в подпапку, чтобы все было чисто. Я люблю использовать /api за это.

Например, у меня есть PHP-бэкэнд, который находится в /api папка и приложение Angular, которое я обслуживаю из корня.

Так что на моем сервере, в www папка, у меня есть index.html и различные файлы JavaScrpit. Файлы PHP находятся под www/api и .htaccess маршрутизация заботится о маршрутизации всех вызовов API к /www/apiвсе JavaScript, изображения, шрифты и стили, где они есть, и любой другой путь к /www/index.html,

Вот в чем суть. Пока .htaccess и ваш CORS настроен правильно, у вас не должно быть проблем.

редактировать

На основании вашего обновления, показывающего 404 ошибки, я бы сказал, что ваша основная проблема заключается в маршрутизации в .htaccess, Посмотрите переписывание URL для Apache.

редактировать

это ответ показывает простой .htaccess Настройка, которая, вероятно, должна работать, если вы устанавливаете в корне вашего сайта. Даже если он не завершен для вас, это хорошее место для начала.

2

Другие решения

Heelo,

Вы должны открыть свой index.html и убедиться, что все построено нормально. Если это так, то вы можете скопировать каталог dist в www каталог wampserver!

1

Просто сослаться на ваши сгенерированные файлы js из папки dist на страницу test.php.
Как это;

<script src="dist/my-app/main.js" type="text/javascript"></script>
1

Попробуйте изменить:

<base href="/">

в

<base href="./">

поэтому пути относительно текущего каталога, а не относительно корневого каталога

1

Я нашел решение, и оно заключалось в том, что я не добавил встроенные файлы в папку сервера (в моем случае www каталог), и к нему следует обратиться по ссылке:

localhost/yourfolder/ а не просто нажав на index.html файл.

Вот мой финал .htaccess который был добавлен в dist папка:

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

И в index.html я оставил его как <base href="/">

0
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector