在Azure上无法正确运行Angular 4应用程序

Question

我正在开发一个Angular 4应用程序。它在我的本地机器上运行良好。当我执行ng serve时，它将应用程序作为http://localhost:4200提供。由于这是一个POC项目，因此没有API调用，而是使用服务从assets/data.json文件获取数据。

现在我想将此站点部署到Azure。当我运行“ng build --env=prod”时，我也得到了dist文件夹。我还看到了部署成功的消息。

但是，在从Azure运行网站时，它无法正确加载。我启动了开发人员工具，并看到了许多404未找到消息。我还附加了屏幕截图。

我不知道为什么这个站点不能正常工作。还有一件事，当我进入本地机器上的dist文件夹并运行index.html页面时，也会收到相同的错误消息。

感谢您的帮助。任何帮助都将不胜感激。

- Mani

---

你确认文件实际上存在于文件系统中了吗？ - Jan_V

你还在监听4200端口吗？这在Azure Web App中是行不通的。你是否从环境中获取了端口号？ - David Makogon

Answer 1

为了避免这些404错误，您需要通过在wwwroot文件夹中创建一个web.config文件并将以下MIME配置放置在其中，来提供静态的JSON和WOFF文件。

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".json" />
            <remove fileExtension=".woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />      
        </staticContent>
    </system.webServer>
</configuration>

- Aaron Chen

---

我按照你的建议在web.config中添加了这些行，但仍然面临着同样的问题，似乎应用程序无法访问data.json，因此屏幕上没有任何内容显示。 - Mani

我没有将web.config文件添加到dist文件夹中，希望它会自动包含。现在我已经复制粘贴了它，并再次进行了部署。这一次我没有看到任何与json相关的错误，但是却抛出了“内部服务器错误”，屏幕上什么也没有显示。 - Mani

谢谢Aaron，最终它起作用了，我现在看不到404错误了。 - Mani

感谢 @AaronChen，你救了我的一天。 - Sachin Patel

非常棒的解决方案，对于部署在 Azure Web 应用程序中的 Angular 应用程序运行良好！不再出现 404 错误代码，非常感谢。 - Luis Raúl Espinoza Barboza

Answer 2

请确保将.htaccess文件添加到您的目录中，该目录包含/dist中的构建代码

创建.htaccess文件并添加以下内容：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [L]

- Daniel Bernardez