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

Question

编辑#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=[=11=]
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"

在我的桌面上，我有 angular 项目运行:

ng build --prod --aot

我在里面有一个文件夹，叫做 dist/angular/，里面有所有相关文件。

我将 dist/angular/ 内容放在 www/ 目录中，并尝试运行 index.html 文件，但出现以下错误：

我为我的组织完成了一个应用程序，基于 angular 6 和 PHP 作为服务器端，我需要在本地测试它。我们的大部分作品将在本地制作，因为老板不希望任何信息通过网络传输（NGO 数据）。

我运行:

ng-build --prod

我有 dist 文件夹。但是我打开了dist文件夹，不知道怎么办，也不知道怎么放到wampserver上让用户在自己的电脑上测试。

我检查了关于添加 http-server 的选定答案。

当使用 wampserver 作为本地服务器来为我们的应用程序提供服务时，使用 http-server 是否是一个不错的选择？

编辑：

当我打开 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>

Answer 1

希洛，

您应该打开 index.html 并确认一切正常。如果是这样，那么您可以将 dist 目录复制到 wampserver 的 www 目录中！

Answer 2

只需将您生成的 js 文件从 dist 文件夹引用到您的 test.php 页面。就那样；

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

Answer 3

尝试更改：

<base href="/">

到

<base href="./">

所以路径是相对于当前目录而不是相对于根目录

Answer 4

托管 Angular 应用程序时，您实际上可以只获取 dist 文件夹的内容并将其放入 htdocs 或 www 文件夹中。好吧，至少在最简单的情况下。

不过有一些注意事项。

当您想在服务器的根目录中单独提供服务时，上面的方法很有效。

如果您从子文件夹托管 Angular 应用程序，则需要通过更改 index.html 文件中的这一行来更改应用程序的基础 URL：

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

此外，如果您还没有，则需要为 PHP 后端正确配置 CORS。

最后，您需要注意路由。这需要 .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 中的路由。查找 URL 为 Apache 重写。

编辑

此显示了一个简单的 .htaccess 安装程序，如果您将其安装在网站的根目录下，它应该可以正常工作。即使它不适合您，它也是一个很好的起点。

Answer 5

我找到了解决方案，就是我没有在服务器文件夹中添加构建文件（在我的例子中是 www 目录），它应该通过 link 访问:

localhost/yourfolder/ 而不是仅单击 index.html 文件。

这是我添加到 dist 文件夹中的最终 .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

在 index.html，我将其保留为 <base href="/">

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

Angular 6 Application how to serve it locally on wamp and how to import missing files into index page

php

wamp

wampserver

angular

angular6