How to fix deploy angular on netlify

Cara solved deploy angular ke netlify settup angular json .

blog · 06 Jul 2023

#angular #netlify #deploy #fix #solved

Do you have angular project and want to deploy it on netlify, of course you can do it. with easy and fast , you just need to integration with your github account then login on netlify create project, and select your angular project, then deploy it, tha’ts it !! and your angular webapp is live now !!

But if you see your angular webapp is display blank white, of course you have wrong configuration build for production mode, so… how we can solved and fix it, like this post article about How to fix deploy angular on netlify.

For first if you create new angular project with your project name, automaticly angular is build output path for production is use dist/ngproject , and because by default netlify use dist folder for production build, so we need to change it build configuration. now how do we can do that ??

We can solved and fix deploy angular on netlify wtih use two option. just follow this tutorial .

First we can change built production outputh path with change settup on angular.json files. you can change from output dist/ngproject to be dist example code
```
     "build": {
       "builder": "@angular-devkit/build-angular:browser",
       "options": {
         "outputPath": "dist",
```
Or you can use option two with use site configuration - continuous deployment - and see Build configuration - click configure - on Publish directory - you can change from dist to dist/ngporject, that’s it, and try to redploy your project, and viola… congratulations now your angular site is live !!

You can use option one if you want to settup and configure using your angular.json files , and you can push on your repo, then wait netlify built your angular production mode and visit your site .

For option 2 ,i think this is fast settup , because you just need to change outpath only and redploy it.

We hope with this article post can help you for deploy your ng project on netlify.

Netlify is complete developer set , not just for modern host for built production web app mode, but you can integration with decap netlify app cms ,thanks to netlify team for making web developer job fast and easy.

Using the new branding of netlify cms call it decap, we can build full stack web applications with all your favorite technologies, you can use YAML yml files, markdown MD files or JSON for integration with headless content management system.

We have create angular project integration with backend area we use decap netlify cms, see video demo.