AngularJS直接访问或刷新URL时路由未触发导致404的问题咨询

我现在碰到了一个AngularJS路由的问题，想请教一下大家：

我有两个AngularJS组件：Program和MitProgram，分别对应以下URL：

• /landsstaevne/program
• /landsstaevne/program/mit-program

从Program页面点击导航跳转到MitProgram页面时，URL会正常变化，对应的组件也能正确显示在页面上。但直接在地址栏输入MitProgram的URL、刷新该页面，或者在新标签页打开这个URL时，会出现404页面，Angular的路由器并没有按照我配置的路由规则加载对应的MitProgram组件。

我的AngularJS路由配置代码如下：

.config(function ($locationProvider) {    
        $locationProvider.html5Mode(true);
        $locationProvider.hashPrefix('');
    })
    .value('$routerRootComponent', 'landsstaevneProgram')
    .component('landsstaevneProgram', {
        templateUrl: '/app.html',
        $routeConfig: [
            { path: '/landsstaevne/program/mit-program', name: 'MitProgram', component: 'mitProgram' },
            { path: '/landsstaevne/program', name: 'Program', component: 'program', useAsDefault: true }
        ],

从Program组件跳转到MitProgram组件的导航代码是这样的：

<div
      ng-link="['MitProgram']"
      title="Mit program"
      class="btn btn-link-program icon icon-custom-heart"
    >
      Mit program
    </div> 

我已经开启了HTML5模式，想不通为什么直接访问MitProgram的URL时，Angular的路由器没有识别这个URL并路由到正确的组件，反而返回了404？

备注：内容来源于stack exchange，提问作者Leth