如何为 Angular 2 配置 apache答案

【问题标题】：How to configure apache for angular 2如何为 Angular 2 配置 apache
【发布时间】：2017-05-11 22:04:39
【问题描述】：

我需要为 angular2 配置虚拟主机。我试过关注这篇文章

https://www.packtpub.com/mapt/book/Web+Development/9781783983582/2/ch02lvl1sec15/Configuring+Apache+for+Angular

据此我需要像这样设置虚拟主机

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html
  # to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

谁能告诉我应用程序的路径应该是什么，因为我的应用程序在默认的 Angular 2 端口 4200 上运行。有没有其他办法呢。

【问题讨论】：

您说您的应用程序在使用本地服务器进行开发时在默认的 Angular 2 端口 4200 上运行？当您想在生产服务器上使用它时，您将根据您的构建构建 Angular2 应用程序，如果您使用 angular-cli，您将使用 ng build --prod 并将 dist 文件夹的内容上传到您的 apache 服务器文档根目录那个虚拟主机。
@JJB 我已经做到了，并且应用程序在 ip:4200 上运行，但我想使用虚拟主机，例如：www.testapp.com 并使用 apache 将其重定向到我的 Angular 应用程序
您使用 dist 文件夹中的内容，就像您上传该内容并通过 apache 提供该内容的任何其他网站一样，并确保所有 .html 文件都通过 index.html 加载。您所说的是在您不会使用 NodeJS 为您将使用 Apache 服务器的 Angular2 应用程序提供服务的测试环境中运行 Angular 时创建的本地测试服务器。 ng serve 仅用于服务本地开发服务器，与 Angular 无关。您使用的是 angular-cli 对吗？
只是为了确定......您的项目实际上是 angular-cli 或某种 webpack？？

标签： apache angular

【解决方案1】：

angular-cli 构建

在您的本地开发环境中，在您的项目根目录中运行 ng build --prod。

这将创建一个名为dist 的文件夹，您希望将dist 中的所有文件和文件夹放到服务器上的Apache 根目录中。

设置 apache 以提供到 index.html 的路由。您可以使用两种方法，编辑虚拟主机或使用网站根目录中的 .htaccess。

选项 1：虚拟主机

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html
        # to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

选项 2：.htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

【讨论】：

@J J B 你能告诉我那个 index.html 文件会有什么吗？你能给我看看 index.html 的例子吗
您的 dist 文件夹中的索引。您能否确认您正在使用的构建系统。 Webpack 还是 SystemJS？你在使用 angular-cli 吗？
@JJB，我是这个 mod_rewrite 配置的新手。只是想确认我对你提到的条件和规则的理解。 1.前两个条件表示If the url is pointing to a file or a directory then render it and exit 2.第一个重写规则将come in action if the first two conditions didn't match and will simply close the condition checking for the above two conditions（-在^和L之间是什么？） 3.第二个重写规则说If it is none of the above, then redirect to index.html 跨度>
@AshishRanjan 是的，这是正确的，^ 意味着匹配任何东西 - 意味着什么都不做
@Lint 是的，这适用于具有多个路由的 Angular 应用程序，因为应用程序将接收所有路由，并且 Angular 将在客户端转换路由。