没有正确运行Azure中的Angular 4应用程序

Question

我正在进行角度4应用。它在我的本地机器上工作正常。当我服务时，它作为http://localhost:4200服务于应用程序。因为它是一个POC项目，所以没有api调用，而是使用服务从assets / data.json文件中获取数据。

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

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

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

任何帮助表示赞赏。谢谢。

Answer 1

要避免这些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>

Answer 2

确保使用/ dist中的内置代码将.htaccess文件添加到目录中

创建.htaccess文件并添加：

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

RewriteRule ^ index.html [L]