Angular 4中的路由选择

问题描述：

我在我的应用中遇到路由问题。在我的本地所有作品中，但不在服务器上。该程序有以下路线：Angular 4中的路由选择

const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'thankyou', component: ThankyouComponent }, 
    { path: 'home', component: UserHomeComponent, canActivate: [AuthGuard] }, 
    { path: 'publish', component: PublishComponent, canActivate: [AuthGuard] }, 
    { path: '**', component: PageNotFoundComponent } 
];

该root route始终有效。

如果我的电脑上我直接发送请求，例如，路线：

http://localhost:4200/publish

假设我已经登录不存在任何问题加载它。但是，如果在服务器中使用路由执行该路由：

http://myserver/mypath/dist/publish

找不到路由。

我修改了index.html，以便在服务器上执行。

<base href="/">通过<base href="/mypath/dist/">

如果我使用指令

routerLink="/publish"

它工作正常执行由HTML模板这条路。

有谁知道为什么会发生这种情况？

你在哪里定义了'myserver/mypath/dist /'？我没有看到你的问题。 –

该路线是我拥有投影源的服务器路径 – cointreau17

你会发布处理传入路线的代码吗？ –

答

您的网络服务器需要配置为将请求重新路由到您的index.html，不包括资产。

对于nginx的，添加此您nginx.conf的服务器块或您的网站的配置里面：

location/{ 
    try_files $uri $uri/ /path/to/index.html; 
}

对于Apache，检查this answer。

我会看看答案，并告诉你它是否有效，谢谢！ – cointreau17

答

这里是一个文件的例子，它创建了一个路由结构，以便在路由被放入url时被命中。到目前为止，我还没有在你的问题中看到任何暗示你实际上在你的应用程序之外处理路线的事情。换句话说，如果你还没有定义一个可以作为url输入的路由，你的服务器的某个url如何知道去哪里？似乎你没有根路径。这就是我一直在驾驶的。

import { Routes, RouterModule } from '@angular/router'; 
import { SomeComponent } from 'app/components/some-component'; 
import { Path1Component } from 'app/components/path1-component'; 
import { Path2Component } from 'app/components/path2-component'; 
import { Path3Component } from 'app/components/path3-component'; 

const MyRoutes: Routes = [ 
    { 
     path: 'root/', 
     component: SomeComponent, 
     children: [ 
      { 
       path: 'path1', 
       component: Path1Component 
      }, 
      { 
       path: 'path2', 
       component: Path2Component 
      }, 
      { 
       path: 'path3', 
       component: Path3Component 
      }, 
      { 
       path: '**',   // default path 
       component: Path2Component 
      } 
     ], 
    } 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forChild(MyRoutes) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 

export class MyRouting { }

现在我明白了。我认为像根路径重定向{path：''，component：HomeComponent}，“/ login”路径可以重定向{path：'login'，component：LoginComponent}。我会尝试这种方式，我会告诉你它是否有效。谢谢！ – cointreau17

嗨，我有学习关于路由器[链接]（https://angular.io/guide/router）的角度指南和执行英雄示例在服务器的代码它发生同样的问题，例如，点击Crisis Center它重定向 – cointreau17

对不起以前的答案，我想写这个：嗨，我一直在阅读关于路由器[链接]（https://angular.io/guide/router）的Angular指南，并执行服务器中英雄示例的简单代码，发生同样的问题。 – cointreau17

答

我发现在这个网站https://github.com/angular/angular/issues/11884 的解决方案，但我没有完全进入服务器。我已经在根模块中切换到HashLocationStrategy，因为角度引导在这里说https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

它的工作原理！

Angular 4中的路由选择

相关推荐