在共享主机中的 Angular2 中路由答案

【问题标题】：Routing in Angular2 in a shared hosting在共享主机中的 Angular2 中路由
【发布时间】：2017-12-14 17:29:32
【问题描述】：

我已经在共享主机 (1&1) 中上传了一个带有 angular2 和 symfony3 的应用程序。

这是网站：http://s714578534.mialojamiento.es

它重定向到http://s714578534.mialojamiento.es/inicio，效果很好。

问题是当我尝试直接访问 http://s714578534.mialojamiento.es/inicio ， http://s714578534.mialojamiento.es/libros/1/Todos/Valoraci%C3%B3n ，...网站不加载。

index.html

<!doctype html>
<html lang="es">
<head>
   <meta charset="utf-8">
   <title>Conectando Lectores</title>
   <base href="/">
   <meta name="description" content="Free Web tutorials">
   <meta name="keywords" content="Red Social, Literatura, Libros, Libro, Microcuento, Microcuentos, Autores, Autor, Autora, Lectura, Leer">
   <meta name="author" content="José Manuel Vázquez Crespo">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
   <app-root>Cargando...</app-root>
</body>
</html>

app.routing.ts

const appRoutes: Routes = [
// Ruta de inicio de la aplicación
{ path: '', redirectTo: 'inicio', pathMatch: 'full'},
// Otras rutas
{ path: 'inicio', component: DefaultComponent },
{ path: 'login', component: LoginComponent },
{ path: 'login/:id', component: LoginComponent }, 
{ path: 'login/:email/:verificationKey', component: LoginComponent }, 
{ path: 'login/:id/:email/:verificationKey', component: LoginComponent }, 
{ path: 'registro', component: RegisterComponent },
{ path: 'perfil', component: PerfilComponent },
{ path: 'perfil/:username', component: PerfilComponent },
{ path: 'perfil/:username/:type', component: PerfilComponent },
{ path: 'mibiblioteca', component: LibraryComponent },
{ path: 'usuarios', component: UsuariosComponent },
{ path: 'mensajes', component: PrivateMessageComponent },
{ path: 'mensajes/:username', component: PrivateMessageComponent },
{ path: 'notificaciones', component: NotificationComponent },
{ path: 'politicaprivacidad', component: PoliticaPrivacidadComponent },
{ path: 'terminosycondiciones', component: TerminosyCondicionesComponent },
{ path: 'contacta', component: ContactaComponent },
{ path: 'noticias', component: NewsComponent },
{ path: 'noticias/:title', component: NewsComponent },
// Books
{ path: 'libros', redirectTo: '/libros/1/Todos/Valoración', pathMatch: 'full' },
{ path: 'libros/:page/:genre/:order/:title', component: LibrosComponent }, 
{ path: 'libros/:page/:genre/:order', component: LibrosComponent },
{ path: 'libros/:page/:titulo', component: LibrosComponent },
{ path: 'libros/:titulo', component: VisualizarlibroComponent } 
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = 
RouterModule.forRoot(appRoutes);

有什么解决办法吗？谢谢！

【问题讨论】：

标签： angular symfony routing hosting

【解决方案1】：

尝试更改您的 .htacces

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

【讨论】：

它在1&1中不起作用，但我在其他服务器上试过，它工作得很好。谢谢！！！

【解决方案2】：

尝试改变这一行

RouterModule.forRoot(appRoutes);

为此

RouterModule.forRoot(appRoutes, { useHash: true });

【讨论】：

这是一个更简单的解决方案 :)
它可以工作，但它会在路由中添加“#”。怎么删除？
您通过设置参数 useHash: false 来删除哈希

【解决方案3】：

Symfony 将捕获与任何文件不匹配的任何 URL。

将 symfony 移动到另一个子域：

http://[angular].mialojamiento.es

http://[symfonyapi].mialojamiento.es

您也可以使用子文件夹：

http://[yourid].mialojamiento.es/api/app.php

http://[yourid].mialojamiento.es/

【讨论】：

我试过这个，但我仍然有同样的问题。我可以访问s714578534.mialojamiento.es，但我无法访问s714578534.mialojamiento.es/login
您能否就这个问题添加更多详细信息？两个域具有相同的名称，因此您可能需要多个主机
我认为你的问题在于 .htaccess 尝试@habibun 的答案