Netlify is an excellent platform for building, deploying, and managing web applications. It supports automated deployment using GitHub webhooks and also provides some advanced features such as custom domains and HTTPS all for free. Deploying a Static Site to Netlify is a breeze. Although it does support running Angular JS applications, there are a couple gotchas in the deployment process that I had to wrangle together from various blog posts in order to get things to work.
Enable Redirects
The first issue that I ran into was after I deployed my site to Netlify, whenever I would click on an Angular link, I would get a 404 page.

Getting this to work is pretty simple. Ultimately you just need a file called _redirects
in the root of your web project. In order to get angular to create this you need to do the following things. This file will send all URL’s to the root of your application which allows the Angular router to kick in and do its thing.
- Create a
_redirects
file in thesrc
directory of your angular project.For most basic sites it should look something like this.
# src/_redirects /* /index.html 200
- Add this file to your
angular.json
file.Your
angular.json
file serves as a configuration for many different aspects of the angular CLI. In order to get this file into the root of your output directory you must define the file here. A snippet of my file is shown below. Update this configuration file and push all of your changes back up to GitHub.{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "flagviz": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/flagviz", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", "src/_redirects" ... rest of file
Configure your Netlify Project
Now that you have the redirects file in place. You can set up your project for automatic deployment with GitHub and Netlify.
Once you have logged into Netlify, click on New Site From Git and find the name of your project.
Configure Build Settings
The last step is to configure your build settings.
For Build command you should enter ng build --prod
.
For Publish directory you should enter dist/$NAME_OF_YOUR_PROJECT
.
Be sure to replace $NAME_OF_YOUR_PROJECT
with the actual name of your project.
Now you can click on Deploy site and once the initial deployment has completed you should see your new angular application running on Netflify with a working routing system.
Thanks a lot … that was really helpful
Hi Ahmad,
I am glad that I was able to help!
Thank you so much…..
it is amazing and so helpful♥♥♥♥♥
Hi shravan,
Its my pleasure. I am glad that you found this useful!
Hi.. is there video youtube on this?
Hi there,
Not that I am aware of. Are you stuck with these instructions?
Really helpful info. Cheers bro
Thanks for the comment, glad to see that this was helpful for you!
Thx for this good tutorial. Despite this post, I’ve run into a problem. During the deployment netlify couldn’t create my directory dist/xxxx, despite I’ve configured it in the deployment settings. Do you know what I have to do so that netifly can find this directory? Thx for your help.
Can you share any error messages that you might be getting? Any additional information would be very helpful!
Im stuck here failed during stage ‘building site’: Deploy directory ‘dist.projectX’ does not exist
Thanx for this, levlaz 🙂
I’ve added angular unit tests to the Netlify build pipeline.
Thanx again and keep being awesome! 🙂
https://ruanbeukes.net/add-angular-tests-to-netlify-deployment/
How can we set below headers in netlify for angular 7 app
Content-Type:application/json
authorization:Bearer
Please update
Thanks
Varsha
Doesn’t work for me
is there a way to fix angular 1.2 ?