Angular应用部署至Azure后显示原始JS文本问题求助

我帮你梳理下这个问题的核心：你本地在app目录用http-server能正常渲染Angular应用，但部署到Azure后打开网站只看到app.js的原始代码，这说明Azure没有正确识别你的静态应用入口，或者托管配置出了问题。下面是几个针对性的排查和解决方法：

1. 先确认部署路径是否正确 #

本地你是进入app目录启动的服务器，所以部署到Azure时，必须把app文件夹里的所有内容作为网站的根目录，而不是把包含app的上层目录传上去。

• 如果用Zip部署：压缩的应该是app内部的文件（比如index.html、scripts文件夹这些），而不是把app文件夹本身打包进去。
• 如果用CI/CD工具（比如GitHub Actions）：检查部署步骤里的目标路径是site/wwwroot，并且上传的是app目录下的所有内容。

2. 添加Web.config适配IIS托管（Windows环境） #

Azure的Windows App Service默认用IIS，它需要配置文件来正确处理静态文件和Angular的路由。在你的app目录下新建一个Web.config文件，把下面的内容粘进去：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
      <mimeMap fileExtension=".html" mimeType="text/html" />
    </staticContent>
    <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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这个配置会让IIS正确识别各种静态文件的MIME类型，还能处理Angular单页应用的路由，确保所有非文件/目录的请求都跳转到index.html。

3. 检查App Service的运行时设置 #

• 如果你的应用是纯静态Angular应用，不需要Node.js：把Azure App Service的运行时改成静态网站模式。进入Azure门户的App Service → 设置 → 配置 → 常规设置，把“堆栈”切换为“静态网站”即可。
• 如果你习惯用Node.js的http-server来托管：可以在项目根目录写个简单的server.js文件：

const httpServer = require('http-server');
const server = httpServer.createServer({ root: './app' });
server.listen(process.env.PORT || 8080);

然后在Azure的启动命令里设置为node server.js，同时记得在package.json里把http-server添加为依赖。

4. 验证部署后的文件结构 #

部署完后，去Azure门户的App Service → 开发工具 → 高级工具 → 打开Kudu控制台，查看site/wwwroot目录下的结构，应该和你本地app目录完全一致——直接能看到index.html、scripts文件夹，而不是wwwroot下面还有个app文件夹。

按这些步骤排查后，应该就能解决Azure返回app.js原始文本的问题，让你的Angular应用正常渲染了。

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