Going directly to URL or refreshing page with URL does not invoke the Angular router

I have two angular components: Program, and MitProgram, each with their own URLs

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

My problem is that I can't directly go to the MitProgram URL (or by refreshing the page), only when going to the Program page first and visiting it from there.

My Angular routing logic is as follows:

.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 }
],


Note: This is using AngularJS

When i go to MitProgram from the Program component, the URL changes as well and the component is displayed on the page. However, when i refresh said page, or enter the URL into a new tab, a 404 page is shown instead.

I'm wondering why the Angular router is not picking up this URL and routing me to the correct component as specified in the route config.

Navigation to the MitProgram component from the Program component:

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

Continue reading...