Question

I am trying to find a way to use apache instead of "ng serve" on my development laptop. Apache is running perfectly with VirtualHost for Symfony, ExtJs. I have created a specific VirtualHost for my Angular tests as for the others but I have a white page

<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>

in addition I have added a .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]

Of course I have restarted apache (apachectl -k restart)

For information, I am under OSX.

To avoid wrong response: this is not to deploy on a production server (ng build is not help)

Thanks !

Answer 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>

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

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

此“应”将.htaccess文件放置在上面所示的构建目录中。

我还没有想到的一个问题是如何在构建运行时使网页自动刷新。目前需要手动刷新。

Angular Development / Apache instead of ng serve

1 个答案: