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

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

0 голосов
/ 15 октября 2018

РЕДАКТИРОВАТЬ # 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, и получил следующие ошибки:

enter image description here

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

Я пробежал:

ng-build --prod

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

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

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

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

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

enter image description here

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>

Ответы [ 5 ]

0 голосов
/ 16 октября 2018

Я нашел решение, и оно состояло в том, что я не добавил встроенные файлы в папку сервера (в моем случае это каталог 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 голосов
/ 15 октября 2018

При размещении приложения 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, которая, вероятно, должна работать, если вы установите вкорень вашего сайта.Даже если она не полная для вас, это хорошее место для начала.

0 голосов
/ 15 октября 2018

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

<script src="dist/my-app/main.js" type="text/javascript"></script>
0 голосов
/ 15 октября 2018

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

<base href="/">

на 

<base href="./">

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

0 голосов
/ 15 октября 2018

Heelo,

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

...