Cannot access Angular Component directly from the browser
<p>I have a small web app that uses Angular 1.5 Components. When I fire up the sever, the browser redirects me to <a href="http://127.0.0.1:50001/welcome">http://127.0.0.1:50001/welcome</a>, which is expected, and the welcome page shows up. If I, say, want to create a new user, I click the link, the URL changes to <a href="http://127.0.0.1:50001/welcome/newUser">http://127.0.0.1:50001/welcome/newUser</a> and the new user form turns up. </p>

<p>The issue happens when I try to access URLs directly (or refresh the page) - the page simply doesn't load. No error appears in the console - nothing happens. </p>

<p>My configuration is as follow:</p>

<p>Root Component:</p>

<pre><code>.component('webGuiComponent', {
  template: '&lt;ng-outlet&gt;&lt;/ng-outlet&gt;',
  $routeConfig: [
    { path: '/welcome/...', name: 'Welcome', component: 'welcomeComponent', useAsDefault: true }
  ]
})

.value('$routerRootComponent', 'webGuiComponent');
</code></pre>

<p>Welcome Components:</p>

<pre><code>.component('welcomeComponent', {
  template: '&lt;header&gt;&lt;/header&gt;&lt;ng-outlet&gt;&lt;/ng-outlet&gt;',
  $routeConfig: [
    { path: '/', name: 'Index', component: 'indexComponent', useAsDefault: true },
    { path: '/newUser', name: 'NewUser', component: 'newUser' }
  ]
})

.component('indexComponent', {
  templateUrl: '/app/components/welcome/index.html'
});
</code></pre>

<p>New User Component:</p>

<pre><code>.component('newUser', {
  controller: 'userController',
  templateUrl: '/app/components/user/new.html'
})
</code></pre>

<p>Navigation link uses standard ng-links:</p>

<pre><code>&lt;a class="navbar-brand" ng-link="['/Welcome/Index']"&gt;Web GUI&lt;/a&gt;
&lt;a class="navbar-brand" ng-link="['/Welcome/NewUser']"&gt;Sign Up&lt;/a&gt;
</code></pre>

<p>Does anyone know why navigation works when done via ng-link but not when accessing URLs directly?</p>