Not running Angular 4 applicationon from Azure pro

问题:

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.

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.

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.

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.

Any help is appreciated. Thanks.

回答1:

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>

回答2:

Make sure you add the .htaccess file to your directory with the built code in /dist

Create .htaccess file and add:

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

RewriteRule ^ index.html [L]