Angular Development / Apache 而不是 ng serve答案

【问题标题】：Angular Development / Apache instead of ng serveAngular Development / Apache 而不是 ng serve
【发布时间】：2019-09-12 19:40:41
【问题描述】：

我正在尝试找到一种在我的开发笔记本电脑上使用 apache 而不是“ng serve”的方法。 Apache 与用于 Symfony、ExtJs 的 VirtualHost 完美运行。我已经为我的 Angular 测试创建了一个特定的 VirtualHost，但我有一个白页

<VirtualHost *:80>
ServerAdmin webmaster@angulardemo.lan
DocumentRoot "/Users/maquejp/Development/angular/demo/src"
ServerName angulardemo.lan
ServerAlias www.angulardemo.lan
ErrorLog "/usr/local/var/log/httpd/angulardemo.lan-error_log"
CustomLog "/usr/local/var/log/httpd/angulardemo.lan-access_log" common

<Directory "/Users/maquejp/Development/angular/demo/src">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order Allow,Deny
    Allow from All
    Require all granted
</Directory>

另外我添加了一个.htaccess

    Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api

# otherwise forward it to index.html 
RewriteRule ^.*$ - [NC,L]
RewriteRule ^app/. /app/index.html [NC,L]

当然我已经重启了apache（apachectl -k restart）

有关信息，我在 OSX 下。

为了避免错误响应：这不是部署在生产服务器上（ng build 没有帮助）

谢谢！

【问题讨论】：

没人知道 ☹️
我认为您只能使用 apache 来提供由 ng dist 命令生成的内置 angular 页面，通常是 dist 文件夹。
你知道怎么做吗？我正在尝试做完全相同的事情，但缺乏这方面的信息让我想知道使用 apache 而不是单独的 Web 服务器同时为 Symfony PHP 应用程序和 Angular 应用程序提供服务是否是一个坏主意。
很遗憾没有，这似乎不可能

标签： angular apache virtualhost

【解决方案1】：

我在远程 Linux 主机上使用apache2 进行开发和部署。我的发展路径是~/DEV/ProjectName。在我的package.json 文件中添加以下内容：

"scripts": {
    [snip],
    "watcher": "ng build --base-href=/ProjectName/dist/ProjectName/ --watch",
    [snip]
},

然后我开始构建过程yarn watcher。

顺便说一句，大部分内容都可以在 Angular 文档here 中找到。

--watch 标志会导致在对项目文件进行更改时重新运行构建过程。 --base-href 构建 URL 以使用路径作为 index.html 文件的基础。

然后我将我的 Apache 配置 (/etc/apache2/conf-enabled/project-dirs.conf) 更新为如下所示（每个项目一个）：

alias /ProjectName /home/homeDir/DEV/ProjectName
<Directory "/home/homeDir/DEV/ProjectName">
    options Indexes FollowSymlinks
    Allow from all
    Satisfy Any
</Directory>

我还添加了以下 .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>

这还需要更新projects\architect\build\options\assest 节中的angular.json：

"assets": [
    "src/assets/YourIcon.ico",
    "src/assets",
    "src/.htaccess"
]

这个“应该”导致.htaccess 文件被放置在上面显示的构建目录中。

我还没有弄清楚的一个项目是如何在构建运行时使网页自动刷新。目前需要手动刷新。

【讨论】：