未从 Azure 正确运行 Angular 4 应用程序 [英] Not running Angular 4 applicationon from Azure properly

问题描述

我正在开发 angular 4 应用程序.它在我的本地机器上运行良好.当我执行服务时，它以 http://localhost:4200 的形式提供应用程序.由于是POC项目，所以没有api调用，而是使用服务从assets/data.json文件中获取数据.

I am working on angular 4 application. It's working fine on my local machine. When I do ng serve it serves the application as http://localhost:4200. Since it's a POC project therefore, there is no api call but fetching data from assets/data.json file using services.

现在我喜欢将这个站点部署到 azure.当我运行ng build --env=prod"时，我也得到了 dist 文件夹.我也看到了部署成功的消息.

Now I like to deploy this site to azure. I got the dist folder as well when I ran "ng build --env=prod". I also saw the deployment succeeded message as well.

但是，当我从 azure 运行网站时，它没有正确加载.我启动了开发者工具，看到很多 404 not found 消息.我还附上了屏幕截图.

but, when I'm running the web site from azure it's not loading properly. I launched the developer tool and see lots of 404 not found messages. I also attached the screen shot.

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

I dont know why this site is not working properly. One more thing when I go inside the dist folder on my local machine and run the index.html page get the same error messages.

感谢任何帮助.谢谢.

推荐答案

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

To avoid these 404 errors, you'd need to serve static JSON and WOFF files on Azure by creating a web.config file in your wwwroot folder and put the following MIME config there.

<?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>

这篇关于未从 Azure 正确运行 Angular 4 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！