Not running Angular 4 applicationon from Azure properly

Question

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.

enter image description here

Any help is appreciated. Thanks.

Have you confirmed the file is actually present on the filesystem? — Jan_V, Sep 10 '17 at 19:07
Are you still set up to listen on port 4200? That won't work in an Azure Web App. Are you getting the port number from the environment? — David Makogon, Sep 10 '17 at 22:03

score 11 · Accepted Answer · answered Sep 11 '17 at 02:17

11

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>

answered Sep 11 '17 at 02:17

Aaron Chen

9,835
1
16
28

I added the lines in the web.config as you suggested but still facing the same problem where seems application is not able to access the data.json therefore, nothing is coming up on the screen. – Mani Sep 11 '17 at 08:28
I didn't add the web.config file to dist folder and hoping will be included automatically. Now I copied and pasted it and did the deployment once again. This time I dont see any json related error but throwing "internal server error" and nothing is coming up on the screen. – Mani Sep 11 '17 at 09:12
Thanks Aaron finally it worked and I don't see 404 errors now. – Mani Sep 11 '17 at 17:07
Thanks @AaronChen you saved my day – Sachin Patel Apr 20 '18 at 11:08
Awesome solution, it works fine for Angular applications deployed in Azure Web App! no more error code 404, thanks a lot – Luis Raúl Espinoza Barboza Jul 18 '22 at 22:23

score 0 · Answer 2 · answered Mar 01 '18 at 05:37

0

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]

answered Mar 01 '18 at 05:37

Daniel Bernardez

123
1
6

Not running Angular 4 applicationon from Azure properly

2 Answers2

Linked