嘿，我来帮你搞定这个问题！你已经搞定了HTTPS的443端口访问，现在要加上HTTP的80端口支持，其实分开发环境和生产环境两种场景来配置就好，我给你一步步拆解：

一、开发环境配置（Angular CLI） #

Angular CLI的ng serve默认一次只能监听一个端口，所以我们可以通过两种方式实现双端口监听：

方式1：启动两个独立的服务实例 #

打开两个终端窗口（或标签页），分别执行以下命令：

• 启动HTTP 80端口服务（注意：80是特权端口，Linux/macOS需要加sudo，Windows需用管理员终端）：

  # Linux/macOS
  sudo ng serve --port 80
  
  # Windows（管理员终端）
  ng serve --port 80
  

• 启动HTTPS 443端口服务（同样注意权限，同时指定你的SSL证书路径）：

  # Linux/macOS
  sudo ng serve --port 443 --ssl true --ssl-cert ./path/to/your/cert.crt --ssl-key ./path/to/your/key.key
  
  # Windows（管理员终端）
  ng serve --port 443 --ssl true --ssl-cert ./path/to/your/cert.crt --ssl-key ./path/to/your/key.key
  

方式2：在angular.json中配置多环境启动项 #

修改项目根目录下的angular.json，在projects -> [你的项目名] -> architect -> serve -> configurations中添加两个配置块：

"configurations": {
  // 原有配置保留，新增以下两个
  "http-dev": {
    "port": 80
  },
  "https-dev": {
    "port": 443,
    "ssl": true,
    "sslCert": "./ssl/cert.crt",
    "sslKey": "./ssl/key.key"
  }
}

之后就可以通过指定配置项来分别启动服务：

# 启动HTTP服务
sudo ng serve --configuration=http-dev

# 启动HTTPS服务
sudo ng serve --configuration=https-dev

二、生产环境配置（部署后） #

生产环境中我们不会用ng serve，而是先执行ng build --prod编译项目，然后用Nginx、Apache等Web服务器托管静态文件，此时直接配置服务器监听两个端口即可：

示例：Nginx配置 #

修改Nginx的配置文件（通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/your-domain.conf），添加两个server块：

# HTTP 80端口配置
server {
  listen 80;
  server_name your-domain.com; # 替换成你的域名或IP

  root /path/to/your/angular/dist; # 替换成Angular编译后的dist目录路径
  index index.html;

  # 处理Angular路由的重写规则
  location / {
    try_files $uri $uri/ /index.html;
  }
}

# HTTPS 443端口配置
server {
  listen 443 ssl;
  server_name your-domain.com;

  root /path/to/your/angular/dist;
  index index.html;

  # 指定SSL证书路径
  ssl_certificate /path/to/your/cert.crt;
  ssl_certificate_key /path/to/your/key.key;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

配置完成后重启Nginx服务（sudo systemctl restart nginx），就能同时通过HTTP和HTTPS访问你的Angular应用了。

示例：Apache配置 #

先确保Apache开启了ssl模块和rewrite模块，然后在httpd.conf或虚拟主机配置文件中添加：

# HTTP 80端口虚拟主机
<VirtualHost *:80>
  ServerName your-domain.com
  DocumentRoot "/path/to/your/angular/dist"

  <Directory "/path/to/your/angular/dist">
    AllowOverride All
    Require all granted
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </Directory>
</VirtualHost>

# HTTPS 443端口虚拟主机
<VirtualHost *:443>
  ServerName your-domain.com
  DocumentRoot "/path/to/your/angular/dist"

  SSLEngine on
  SSLCertificateFile "/path/to/your/cert.crt"
  SSLCertificateKeyFile "/path/to/your/key.key"

  <Directory "/path/to/your/angular/dist">
    AllowOverride All
    Require all granted
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </Directory>
</VirtualHost>

重启Apache服务（sudo systemctl restart apache2）即可生效。

注意事项 #

• 80和443属于系统特权端口，在非Windows系统下，普通用户无法直接监听，需要使用sudo提升权限，或者通过setcap命令给Node.js/服务器进程赋予端口权限（比如setcap 'cap_net_bind_service=+ep' /usr/bin/node）。
• 如果你的需求是让HTTP自动跳转到HTTPS，只需要在HTTP的server块中添加重定向规则即可（比如Nginx中加return 301 https://$server_name$request_uri;），但你明确需要同时支持两种协议，所以跳过这一步即可。

内容的提问来源于stack exchange，提问作者Mochoa