使用角度路由返回错误404

当复制ng构建文件时，主机服务器上的路由组件存在此问题。但是在localhost：4200（本地开发）中，所有路径都能正常工作。

所以例如这条路线不包含任何AuthGuard。

本地主机

本地主机：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);

有人可以告诉我我做错了什么？

PD。该服务器是一个XAMP包。（PHP，APACHE，MYSQL）

来源

2017-04-12 exequielc

的[角2 Auth0路由错误404]（http://stackoverflow.com/questions/43234947/angular-2-with-auth0-routing-error-404）可能的复制 –

我已经将此问题标记为重复项，但无论如何都会在此处回答，因为上下文中存在一些细微差异。解决此问题的一种方法是使用HashLocationStrategy。您可以包括你的app.module.ts文件的供应商阵列中的这些行：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

一旦你已经添加了这个，你可以按照下面的指导，正确地执行哈希路由。如果您使用jsonwebtokens或Auth0进行身份验证，this question应该帮助您指出正确的方向。

来源

2017-04-12 22:18:45

多数民众赞成没关系，但网址现在有这个＃上的URL路径是正确的？ http://trainer.amalgamesoft.com/#/myworkouts/exe – exequielc

这是正确的。您可以使用该路由原则，或者正如我在答案中所说的那样，使用HTML 5路由，并通过.htaccess –

配置服务器。是的，这就是现在URL的外观。 @马里奥的答案也是有效的 –

我看到你没有使用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]

来源

2017-04-12 22:19:07

使用角度路由返回错误404

回答

相关问题