使用 Angular 返回 404 的路由答案

【问题标题】：Routing with Angular return 404使用 Angular 返回 404 的路由
【发布时间】：2017-09-08 13:43:39
【问题描述】：

复制 ng 构建文件时，我在主机服务器上遇到了路由组件的问题。但是在 localhost:4200 （本地开发）上，所有路由都可以正常工作。

因此例如这条不包含任何 AuthGuard 的路由。

本地主机

localhost:4200/vendo - 我可以看到组件

在服务器上

exapme.mysite.com/vendo - 只看到错误 404

app.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { AuthGuard } from './_guards/index';
import { EstadoComponent} from  './_estadoactual/estado.component'
import {PublicarComponent} from "./_admin_apk/publicar.component";
import {PidoComponent} from "./pido/pido.component";
import {DepoComponent} from "./depo/depo.component";
import {DepoChessComponent} from "./depochess/depochess.component";
import {ProductosComponent} from "./productos/productos.component";
import {SamComponent} from "./sam/sam.component";
import {VendoComponent} from "./vendo/vendo.component";
import {SamdplusComponent} from "./samdplus/samdplus.component";
import {GcmComponent} from "./gcm/gcm.component";
import {GcmNotificationComponent} from "./gcm/gcm-notification.component";

const appRoutes: Routes = [

    { path: 'ada2/login', component: LoginComponent  },
    { path: 'ada2/depo', component: DepoComponent },
    { path: 'ada2/pido', component: PidoComponent },
    { path: 'ada2/vendo', component: VendoComponent},
    { path: 'ada2/sam', component: SamComponent },
    { path: 'ada2/samdplus', component: SamdplusComponent},
    { path: 'ada2/depochess', component: DepoChessComponent },
    { path: '', component: HomeComponent, canActivate: [AuthGuard]  },
    { path: 'ada2', component: HomeComponent, canActivate: [AuthGuard]},
    { path: 'ada2/home', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'ada2/publicar', component: PublicarComponent, canActivate: [AuthGuard] },
    { path: 'ada2/register', component: RegisterComponent, canActivate: [AuthGuard] },
    { path: 'ada2/estado', component: EstadoComponent, canActivate: [AuthGuard] },
    { path: 'ada2/productos', component: ProductosComponent, canActivate: [AuthGuard] },
    { path: 'ada2/gcm', component: GcmComponent, canActivate: [AuthGuard] },
    { path: 'ada2/gcmnotification', component: GcmNotificationComponent, canActivate: [AuthGuard] },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

【问题讨论】：

Angular 2 with Auth0 routing error 404的可能重复

标签： angular typescript routing

【解决方案1】：

我已将此问题标记为重复问题，但无论如何都会在这里回答，因为上下文存在一些细微差别。解决此问题的一种方法是使用HashLocationStrategy。您可以在 app.module.ts 文件的提供程序数组中包含这些行：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

添加后，您可以按照以下指南正确实施哈希路由。如果您使用 jsonwebtokens 或 Auth0 执行身份验证，this question 应该可以帮助您指明正确的方向。

【讨论】：

没关系，但是 URL 现在在 url 路径上有这个 # 对吗？ trainer.amalgamesoft.com/#/myworkouts/exe
没错。您可以使用该路由原则，或者正如我在回答中所说，使用 HTML 5 路由，并使用 .htaccess 配置您的服务器
是的，这就是 URL 现在的样子。 @mario 的回答也是有效的

【解决方案2】：

我发现您没有使用 HashLocationStrategy。这意味着您需要设置您的服务器来处理指向 index.html 文件的路由。

这让我的项目在 wamp 服务器上运行。编辑 .htaccess 文件：

Options -Indexes

RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]

【讨论】：