How to solve Cannot GET / when refreshing the page on angular-ui-router

Question

I am having trouble reloading the Cannot GET web page / when applying $locationProvider.html5Mode(true) on ui.router, how to fix this error.

function AppController($rootScope, $scope, $state){
// set the default value for lang url to "en"
} 
function router($stateProvider, $locationProvider,  
        $urlRouterProvider){

            $locationProvider.html5Mode(true);
            $stateProvider 
            .state('app', {
                abstract: true,
                url : '/:lang', 
            }) 
            .state('app.intro', { 
                url : '/intro', 
            }) 
            .state('home', { 
                url : '/home', 
            }); 
        $urlRouterProvider.otherwise(function($injector, $location){
            let $state = $injector.get("$state");
                $state.go("app.intro")
        }); 
        
    }

const Application = angular.module("app", ["ui.router", "ngSanitize", 'ui.router.state.events']);
      Application.controller("AppController", AppController)
      .config(router);

      angular.element(document).ready(function(){
        angular.bootstrap(document, ["app"])
      })