javascript - Going directly to URL or refreshing page with URL does not invoke the Angular router - Stack Overflow

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')
    ponent('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> 

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> 

• javascript
• angularjs

Share Improve this question Follow edited Jan 8 at 14:02 AVJT82 73.5k2525 gold badges145145 silver badges170170 bronze badges asked Jan 8 at 13:12 LethLeth 1,05933 gold badges1717 silver badges5050 bronze badges 2

• please share the link you use for navigation – Naren Murali Commented Jan 8 at 13:20
• I've added the code for navigation to the question body – Leth Commented Jan 8 at 13:26

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Because your server knows nothing about your url. When your server encounters this url, it does not route it to your index page, where then angular can bootstrap your application.