Php Angular 6应用程序如何在wamp上本地提供服务，以及如何将缺少的文件导入索引页_Php_Angular_Wamp_Angular6_Wampserver

Php Angular 6应用程序如何在wamp上本地提供服务，以及如何将缺少的文件导入索引页

php angular angular6

Php Angular 6应用程序如何在wamp上本地提供服务，以及如何将缺少的文件导入索引页,php,angular,wamp,angular6,wampserver,Php,Angular,Wamp,Angular6,Wampserver,编辑#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}

编辑#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作为服务器端，我需要在本地进行测试。我们的大部分工作将在本地进行，因为老板不希望任何信息（NGO数据）通过网络传播

我跑：

ng构建--prod

我有

dist

文件夹。但是我打开了dist文件夹，不知道该做什么，也不知道如何将它放在wampserver上，让用户从他们的计算机上测试它

我用它选择的答案检查了关于添加

http服务器的问题
当使用wampserver作为本地服务器为我们的应用程序提供服务时，使用http服务器
是否是一个好的选择
编辑：
打开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>



登记制度
Heelo
您应该打开index.html并验证一切正常。如果是这样，那么您可以复制wampserver的www
目录中的dist目录
 希洛
您应该打开index.html并验证一切正常。如果是这样，那么您可以复制wampserver的www
目录中的dist目录 只需将dist文件夹中生成的js文件引用到test.php页面即可。
这样,
<script src="dist/my-app/main.js" type="text/javascript"></script>

只要将dist文件夹中生成的js文件引用到test.php页面即可。
这样,
<script src="dist/my-app/main.js" type="text/javascript"></script>


尝试更改：
<base href="/">  



到


因此路径是相对于当前目录而不是相对于根目录的，请尝试更改：
<base href="/">  



到


因此，路径是相对于当前目录的，而不是相对于根目录的。在托管Angular应用程序时，您可以直接获取dist
文件夹的内容，并将其放置在htdocs
或www
文件夹中。至少在最简单的情况下
不过有一些警告
当您希望在服务器的根目录中单独为其提供服务时，上述方法非常有效
如果您从子文件夹托管Angular应用程序，则需要通过更改index.html文件中的以下行来更改应用程序的基本URL：
<base href="/path/to/folder/">



此外，如果还没有，则需要正确配置PHP后端
最后，您需要注意路由。这需要.htaccess
文件中的条目按如下方式发送：
任何应该指向Angular应用程序的路径都必须路由到其index.html
所有JavaScript、CSS、字体和图像文件应按正常方式发送
PHP文件仍应按正常方式发送，最好发送到子文件夹以保持整洁。我喜欢为此使用/api
例如，我有一个PHP后端，位于/api
文件夹中，还有一个从根目录提供服务的Angular应用程序
因此，在我的服务器上，在www
文件夹中，我有index.html
和各种JavaScrpit文件。PHP文件位于www/api
下，而.htaccess
路由负责将所有api调用路由到/www/api
，将所有JavaScript、图像、字体和样式路由到它们所在的位置，并每隔一段路径路由到/www/index.html

这就是它的要点。只要.htaccess
和您的CORS设置正确，您就应该没有问题
编辑
根据您显示404错误的更新，我认为您的主要问题是.htaccess
中的路由。查找Apache的URL重写
编辑
这显示了一个简单的.htaccess
设置，如果您安装在网站的根目录中，该设置可能会正常工作。即使对你来说还不完整，这也是一个很好的开始。
在托管Angular应用程序时，你可以直接将dist
文件夹的内容放入你的htdocs
或www
文件夹中。至少在最简单的情况下
不过有一些警告
当您希望在服务器的根目录中单独为其提供服务时，上述方法非常有效
如果您从子文件夹托管Angular应用程序，则需要通过更改index.html文件中的以下行来更改应用程序的基本URL：
<base href="/path/to/folder/">



此外，如果还没有，则需要正确配置PHP后端
最后，您需要注意路由。这需要.htaccess
文件中的条目按如下方式发送：
任何应该指向Angular应用程序的路径都必须路由到其index.html
所有JavaScript、CSS、字体和图像文件应按正常方式发送
PHP文件仍应按正常方式发送，最好发送到子文件夹以保持整洁。我喜欢为此使用/api
例如，我有一个PHP后端，位于/api
文件夹中，还有一个从根目录提供服务的Angular应用程序
因此，在我的服务器上，在www
文件夹中，我有index.html
和各种JavaScrpit文件。PHP文件位于www/api
下，而.htaccess
路由负责将所有api调用路由到/www/api
，将所有JavaScript、图像、字体和样式路由到