无法直接从浏览器访问Angular Component [英] Cannot access Angular Component directly from the browser

问题描述

我有一个使用Angular 1.5组件的小型Web应用程序.当我启动服务器时，浏览器会将我重定向到 http://127.0.0.1:50001/welcome ，这是预期的，并显示欢迎页面.如果我想创建一个新用户，请单击链接，URL更改为 http://127.0.0.1:50001/welcome/newUser ，然后出现新的用户表单.

I have a small web app that uses Angular 1.5 Components. When I fire up the sever, the browser redirects me to http://127.0.0.1:50001/welcome, 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 http://127.0.0.1:50001/welcome/newUser and the new user form turns up.

当我尝试直接访问URL(或刷新页面)时，就会发生此问题-该页面根本无法加载.控制台中没有出现错误-没有任何反应.

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.

我的配置如下:

根组件:

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

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

欢迎组件:

.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'
});

新用户组件:

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

导航链接使用标准的ng-links

Navigation link uses standard ng-links:

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

有人知道为什么通过ng-link完成导航而不是直接访问URL时可以导航吗?

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

推荐答案

您必须为可能在客户端定义的所有路径添加服务器端路由，以呈现您的主页.实现方式取决于您使用的服务器端技术.

You have to add server side route for all the paths you may have route defined in client side which will render your main page. Implementation depends on what server side technology you are using.

或者您必须使用基于#的网址

Or you have to use #based Url's

说明

当您没有基于#的URL时，浏览器将进入服务器以获取资源，但找不到任何内容.因此，当您定义服务器端路由时，它将服务于主页，然后进行客户端路由.

When you don't have # based URL browser goes to server to fetch the resource but does not finds anything. So when you define server side routings it serves the main page and then client side routing takes place.

这篇关于无法直接从浏览器访问Angular Component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！