title: Cannot access Angular Component directly from the browser
body: <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>