htaccess - Enrutamiento angular 2 y acceso directo a una ruta específica: ¿cómo configurar Apache?
htaccess angular 4 (1)
Desarrollé una pequeña aplicación de prueba Angular2 que, entre otras características, aprovecha el enrutamiento.
Funciona bien siempre que el usuario acceda primero a la página de inicio, luego navega a páginas secundarias.
Si el usuario intenta acceder directamente a una subpágina, obtengo un 404 si no configuro el servidor web. Esto es perfectamente normal ya que no hay una "página real" correspondiente a la ruta.
Intenté agregar la siguiente configuración en apache 2.2 para manejar HTML5 Push State:
<Directory /var/www/html/angular2-sens>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /angular2-sens
RewriteRule ^index/.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /angular2-sens/index.html [L]
</Directory>
Mejora las cosas ya que no tengo un 404. Sin embargo, solo "soy" redirigido a la página principal de la aplicación y el enrutamiento no se realiza.
¿Qué debo hacer para corregir esto?
Mi página index.html es:
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="simplegrid.css" type="text/css">
<link rel="stylesheet" href="sen.css" type="text/css">
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/angular2/bundles/router.js"></script>
<!-- dev
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
-->
<!-- 2. Configure SystemJS -->
<script>
System.config({
map: {
rxjs: ''node_modules/rxjs'' //or wherever you have it installed
},
packages: {
app: {
format: ''register'',
defaultExtension: ''js''
},
rxjs: {
defaultExtension: ''js''
}
}
});
System.import(''app/boot'')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Chargement...</app>
</body>
<script>document.write(''<base href="'' + document.location + ''" />'');</script>
</html>
Mi aplicación / boot.ts es:
import {bootstrap} from ''angular2/platform/browser'';
import {HTTP_PROVIDERS} from ''angular2/http'';
import {AppComponent} from ''./app.component'';
import {ROUTER_PROVIDERS} from ''angular2/router'';
import { enableProdMode } from ''angular2/core''; enableProdMode();
bootstrap(AppComponent, [HTTP_PROVIDERS,ROUTER_PROVIDERS]);
Y, finalmente, mi componente de aplicación es:
import {bootstrap} from ''angular2/platform/browser'';
import {HTTP_PROVIDERS} from ''angular2/http'';
import {AppComponent} from ''./app.component'';
import {ROUTER_PROVIDERS} from ''angular2/router'';
import { enableProdMode } from ''angular2/core''; enableProdMode();
bootstrap(AppComponent, [HTTP_PROVIDERS,ROUTER_PROVIDERS]);
Mi componente de aplicación, donde está configurado el enrutamiento, es:
import {Component} from ''angular2/core'';
import {RouteConfig, ROUTER_DIRECTIVES} from ''angular2/router'';
import {SensComponent} from ''./sens.component'';
import {GroupesPolitiquesComponent} from ''./groupes-politiques.component'';
import {SenVignetteComponent} from ''./sen-vignette.component'';
@Component({
selector: ''app'',
template: `
<h1>Application Angular 2 Relative aux Sénateurs (AA2RSen)</h1>
<nav>
<a [routerLink]="[''Senateurs'']">Tous les Sénateurs en cours de mandat</a>
<a [routerLink]="[''GroupesPolitiques'']">Groupes politiques</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:''/senateurs'', name: ''Senateurs'', component: SensComponent},
{path:''/groupes'', name: ''GroupesPolitiques'', component: GroupesPolitiquesComponent},
{path:''/senateur/:matricule'', name: ''VignetteSenateur'', component: SenVignetteComponent}
])
export class AppComponent { }
ok, entonces todo estuvo bien, excepto el hecho de que el href base generado dinámicamente estaba equivocado.
Gracias a @ günter-zöchbauer por señalar que el enrutador Angular 2.0 no está trabajando en volver a cargar el navegador
En mi código original, se genera a partir de document.location:
<script>document.write(''<base href="'' + document.location + ''" />'');</script>
Si cambio a un elemento estático:
<base href="/angular2-sens/"/>
Funciona. Por supuesto, preferiré analizar más detalladamente la ubicación del documento en una aplicación "real".