Angular项目HTTP运行正常，HTTPS下无限加载/启动失败求助

本地ng serve调试问题 #

错误原因分析 #

• error:0480006C:PEM routines::no start line：证书/密钥文件非标准PEM格式，或文件内容缺失、损坏。
• error:1C800064:Provider routines::bad decrypt：使用了带密码短语的密钥，但ng serve原生不支持带密码的密钥文件。

解决步骤 #

1. 转换为无密码密钥文件
   使用OpenSSL将带密码的密钥转换为无密码版本：

   openssl rsa -in 原密钥文件.pem -out 新无密码密钥文件.pem
   

   执行时输入原密钥的密码短语，生成的新文件即可直接用于ng serve。

2. 验证并转换证书格式

   • 确认证书/密钥为PEM格式：文件开头需包含-----BEGIN CERTIFICATE-----（证书）、-----BEGIN RSA PRIVATE KEY-----（无密码密钥）。
   • 若为PFX格式，先转成PEM：

     # 提取证书
     openssl pkcs12 -in cert.pfx -out cert.crt -nokeys
     # 提取密钥
     openssl pkcs12 -in cert.pfx -out key.pem -nocerts
     

     提取密钥时需输入PFX的密码，之后再用第一步的命令去掉密钥的密码短语。

3. 重新启动本地服务
   使用无密码密钥和证书运行：

   ng serve --ssl --ssl-key "路径/新无密码密钥文件.pem" --ssl-cert "路径/cert.crt"
   

IIS服务器部署问题 #

错误原因分析 #

页面仅加载标题、无限加载崩溃，通常与混合内容请求、证书配置不当、资源路径错误有关；同时IIS不直接支持带密码的PEM密钥，需转换为PFX格式导入。

解决步骤 #

1. 将证书打包为PFX格式
   若已有PEM证书和密钥，用OpenSSL打包成PFX：

   openssl pkcs12 -export -in cert.crt -inkey key.pem -out cert.pfx
   

   设置PFX的保护密码，后续导入IIS时需使用。

2. 导入证书到IIS

   • 打开IIS管理器，进入「服务器证书」功能，点击「导入」。
   • 选择生成的PFX文件，输入设置的密码，勾选「允许私钥导出」（可选），完成导入。

3. 配置站点HTTPS绑定

   • 进入目标站点的「绑定」设置，点击「添加」。
   • 类型选择「HTTPS」，端口设为443，SSL证书选择刚导入的证书，确认保存。

4. 修复混合内容问题

   • 打开浏览器开发者工具（F12）的「控制台」，查看是否有Mixed Content错误（HTTP资源在HTTPS页面加载）。
   • 修改Angular项目中所有资源路径：使用相对路径，或在angular.json中设置"deployUrl": "https://你的域名/"，确保所有请求均为HTTPS协议。

5. 检查资源路径与IIS配置

   • 确认index.html中favicon的路径正确，如<link rel="icon" href="favicon.ico">，且文件已部署到站点根目录。
   • 确保IIS已安装「静态内容」功能，避免静态资源无法加载。
   • 配置Angular路由的URL重写规则（添加web.config文件到站点根目录），避免路由刷新404问题：

     <?xml version="1.0" encoding="UTF-8"?>
     <configuration>
       <system.webServer>
         <rewrite>
           <rules>
             <rule name="Angular Routes" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
               </conditions>
               <action type="Rewrite" url="/" />
             </rule>
           </rules>
         </rewrite>
       </system.webServer>
     </configuration>
     

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