Impossible d'accéder au composant Angular directement depuis le navigateur

Question

J'ai une petite application web qui utilise les composants Angular 1.5. Lorsque je lance le serveur, le navigateur me redirige vers http://127.0.0.1:50001/welcome ce qui est attendu, et la page d'accueil s'affiche. Si, par exemple, je veux créer un nouvel utilisateur, je clique sur le lien et l'URL devient http://127.0.0.1:50001/welcome/newUser et le formulaire de nouvel utilisateur apparaît.

Le problème survient lorsque j'essaie d'accéder directement aux URL (ou de rafraîchir la page) - la page ne se charge tout simplement pas. Aucune erreur n'apparaît dans la console - rien ne se passe.

Ma configuration est la suivante :

Composant racine :

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

.value('$routerRootComponent', 'webGuiComponent');

Composants de bienvenue :

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

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

Nouveau composant utilisateur :

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

Le lien de navigation utilise des ng-links standard :

<a class="navbar-brand" ng-link="['/Welcome/Index']">Web GUI</a>
<a class="navbar-brand" ng-link="['/Welcome/NewUser']">Sign Up</a>

Quelqu'un sait-il pourquoi la navigation fonctionne lorsqu'elle est effectuée via ng-link mais pas lorsqu'on accède directement aux URL ?

Answer 1

Vous devez ajouter une route côté serveur pour tous les chemins que vous pouvez avoir définis côté client et qui rendront votre page principale. La mise en œuvre dépend de la technologie serveur que vous utilisez.

Ou vous devez utiliser des Url's basées sur le #.

Explication

Lorsque vous n'avez pas d'URL basée sur le #, le navigateur va chercher la ressource sur le serveur mais ne trouve rien. Ainsi, lorsque vous définissez des routages côté serveur, il sert la page principale, puis le routage côté client a lieu.

Answer 2

Vous devez configurer la réécriture d'url dans le serveur pour réécrire toutes les urls vers la page d'index ou la route par défaut au niveau du back-end.