angular - 无法从 Azure 正确运行 Angular 4 应用程序

标签 angular azure deployment

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

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

但是,当我从 azure 运行该网站时,它无法正确加载。我启动了开发者工具,看到很多 404 未找到消息。我还附上了屏幕截图。

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

enter image description here

感谢任何帮助。谢谢。

最佳答案

为了避免这些 404 错误,您需要通过在 wwwroot 文件夹中创建 web.config 文件并在其中放置以下 MIME 配置来在 Azure 上提供静态 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>

关于angular - 无法从 Azure 正确运行 Angular 4 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46143147/

相关文章:

linux - 在部署脚本中查找已安装的包时,是否应该检查所有可能的路径?

java - Heroku,Java Web 应用程序 - 免费 dynos Procfile - 如何创建正确的 Procfile

angular - 如何在 Webpack 中正确使用 Namespace Typescript

Azure服务总线: Renew message lock token in Logic App

css - 将 CSS 部署与站点的其余部分分开

azure - 什么是服务总线和访问控制?

c# - 将 Azure B2C 与 MVC、.NET Core 3.1 结合使用

jquery - 在 angular 2 中使用 jquery 小部件的最佳方法是什么?

Angular - 流式传输多个 HTTP 调用 2 per 2

Angular 2不同模块相同的路由