Il routing / deep linking Angular2 non funziona con Apache 404

Sto seguendo gli esempi di routing Angular 2. Usando il server web “lite” sono in grado di navigare dal root e il deep linking funziona, ma usando Apache I posso navigare dalla root, ma ottengo gli errori 404 Not Found quando segui i link diretti ai percorsi.

Ad esempio il seguente URL funziona contro il server web “lite” avviato sulla porta 3000 da npm.

http://localhost:3000/crisis-center/2 

Ma il prossimo URL contro Apache in esecuzione sulla porta 80 fallisce.

 http://localhost/crisis-center/2 The requested URL /crisis-center/2 was not found on this server. 

Ho provato alcune soluzioni .htaccess raccomandate per problemi Angular 1 simili ma senza fortuna. Se qualcuno ha eseguito il routing Angular 2 e il deep linking su Apache, per favore fatemi sapere come l’avete raggiunto.

 @RouteConfig([ { // Crisis Center child route path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent, useAsDefault: true }, {path: '/heroes', name: 'Heroes', component: HeroListComponent}, {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, {path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]} ]) 

Boot.ts

 import {bootstrap} from 'angular2/platform/browser'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component'; bootstrap(AppComponent, [ROUTER_PROVIDERS]); 

Siccome la risposta di cui sopra non risponde veramente alla domanda se vuoi che funzioni con Apache. HashLocationStrategy rimane un’opzione, ma se vuoi che funzioni come su Apache devi fare quanto segue:

Crea un nuovo file .htaccess nella stessa posizione del tuo index.html . Il seguente codice sarà all’interno:

  Options Indexes FollowSymLinks RewriteEngine On RewriteBase /crisis-center/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]  

(Nota che nella domanda all’interno di index.html dovrebbe essere identico a RewriteBase)

Risposta adattata dalla domanda + risposta dal routing Angular 2 e accesso diretto a una rotta specifica: come configurare Apache?

Per coloro che utilizzano Apache, usa questo .htaccess

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

Se ricevi ancora un errore, esegui questi 2 comandi:

 sudo a2enmod rewrite sudo systemctl restart apache2 

Per angular4 / angular in app.routes.module.ts include useHash come di seguito,

 @NgModule({ imports: [RouterModule.forRoot(routes, {useHash: true})], exports: [RouterModule] }) 

Devi fare in modo che il server gestisca tutti i percorsi su index.html o usi HashLocationStrategy

( https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html )

Dare un’occhiata a:

Il router di Angular 2 è rotto quando si utilizzano percorsi HTML5?

Secondo la risposta di Rein Baarsma devi creare il file .htaccess e metterlo nella stessa directory del tuo index.html sul tuo server Apache. Potrebbe essere ad esempio la directory htdocs , ma questo dipende dalla configurazione di Apache.

Tuttavia uso diversi contenuti di file .htaccess e funziona per me per tutti i link / percorsi senza necessità di specificare la base di riscrittura:

  Options Indexes FollowSymLinks RewriteEngine On RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]  

È una modifica del codice fornita da Rein Baarsma.

La mia app è Angular 2+ (4.xx) basata sul progetto angular-cli. Dipende difficilmente dagli URL diretti agli indirizzi forniti dal routing angular. Senza il file .htaccess sopra ho ottenuto 404 not found dopo aver cliccato su ogni link diretto all’URL. Ora con l’uso di questo file .htaccess tutto funziona correttamente.