Skip to content

Instantly share code, notes, and snippets.

@cmh114933
Last active June 28, 2024 22:56
Show Gist options
  • Save cmh114933/aec094c0396e4961ece7f9b29602365a to your computer and use it in GitHub Desktop.
Save cmh114933/aec094c0396e4961ece7f9b29602365a to your computer and use it in GitHub Desktop.
Enable Angular Routing on Netlify
/* /index.html 200
1. user submits a long link
https://gitpitch.com/mingxiangchan/dell-slides/express-1#/16
2. the app should store it and give it an ID
id: 6
3. the app generates the short link
localhost:4200/links/{id}
localhost:4200/links/6
4. when you go to /links/6
- app will check what is the long link for id: 6
- app will redirect you to
https://gitpitch.com/mingxiangchan/dell-slides/express-1#/16

You may have noticed that if you refresh on a path in your deployed Angular app, you will receive page not found. This is because Netlify does not handle routing, which is breaking your Angular app. To ensure that your Angular routes are working, you will need to do the following:

  1. In the src folder, add the _redirects file provided in the gist, no file extension.
  2. In the angular.json config file, add "src/_redirects" to the assets array. The assets array can be found:
      projects
         app-name
            architect
              build
                options
                   assets
    

Then you may run ng build and drag-drop the folder to Netlify

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment