0

我的应用程序中的路由存在问题。在我的本地一切正常，但在服务器上却不行。该程序有以下路线：

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/">

如果我使用指令通过模板 html 执行该路由

 routerLink="/publish"

它工作正常。

有谁知道为什么会这样？

4

3 回答 3

0

我在此站点https://github.com/angular/angular/issues/11884中找到了解决方案， 但我没有对服务器的完全访问权限。我已将根模块切换到 HashLocationStrategy，因为角度指南在这里说https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

它有效！

于 2017-10-30T21:06:51.777 回答
0

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

对于 nginx，将其添加到 nginx.conf 或站点配置的服务器块中：

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

对于 apache，请检查此答案。

于 2017-10-28T19:34:05.770 回答
0

这是一个文件示例，该文件创建路由结构，以便在将路由放入 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 { }
于 2017-10-29T00:25:51.183 回答