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

问题描述

我正在研究Angle 4应用程序.在我的本地计算机上工作正常.当我提供服务时，它会将应用程序用作 http://localhost:4200 .由于这是一个POC项目，因此没有api调用，而是使用服务从asset/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.

现在，我想将此站点部署为天蓝色.当我运行"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.

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

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错误，您需要通过在wwwroot文件夹中创建web.config文件并将在那里进行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屋！