wake-up-neo.com

Angular2 Routing/Deep Linking funktioniert nicht mit Apache 404

Ich folge den Angular 2-Routing-Beispielen. Mit dem "lite" Webserver kann ich von der Wurzel aus und von Deep-Verlinkungsarbeiten aus navigieren, aber mit Apache kann ich von der Wurzel aus navigieren, bekomme aber 404 Not Found-Fehler, wenn ich Links direkt zu Routen folge.

Beispielsweise funktioniert die folgende URL für den "lite" Webserver, der von npm an Port 3000 gestartet wurde.

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

Die nächste URL gegen Apache, die auf Port 80 ausgeführt wird, schlägt jedoch fehl.

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

Ich habe ein paar .htaccess-Lösungen ausprobiert, die für ähnliche Angular 1-Probleme empfohlen wurden, aber kein Glück. Wenn irgendjemand Angular 2 Routing und Deep Linking-Arbeit mit Apache hatte, lass mich wissen, wie du das erreicht hast.

@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]);
angularangular2-routing
25
Robert

Die obige Antwort beantwortet nicht wirklich die Frage, ob Sie mit Apache arbeiten möchten. HashLocationStrategy bleibt eine Option, aber wenn Sie möchten, dass es wie in Apache funktioniert, müssen Sie Folgendes tun:

Erstellen Sie eine neue Datei .htaccess am selben Ort wie Ihr index.html. Der folgende Code wird drin sein:

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

(Beachten Sie, dass in der Frage der <base href="/crises-center/"> im index.html mit der RewriteBase identisch sein sollte.)

Antwort angepasst von Frage + Antwort von Angular 2 Routing und direktem Zugriff auf eine bestimmte Route: Wie konfiguriert man Apache?

45
Rein Baarsma

Für diejenigen, die auf Apache laufen Verwenden Sie diese .htaccess 

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

Wenn Sie immer noch einen Fehler erhalten, führen Sie diese beiden Befehle aus:

Sudo a2enmod rewrite
Sudo systemctl restart Apache2
9
Playnox

Für "angle4/angle" in "app.routes.module.ts" verwenden Sie "useHash" wie unten

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

Sie müssen dafür sorgen, dass Ihr Server alle Routen zurück nach index.html führt, oder HashLocationStrategy verwenden. 

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

Schauen Sie sich an:

Ist der Angular 2-Router bei der Verwendung von HTML5-Routen defekt?

1
Langley

Wenn Sie mit ionic erstellen und Ihre Site auf den Hosting-Server hochladen, müssen Sie die Datei .htaccess in Ihrem Stammverzeichnis im www Ordner.

    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) / [R=302,NC,L]
1
Anju Batta

Laut der Antwort von Rein Baarsma müssen Sie eine .htaccess-Datei erstellen und in demselben Verzeichnis wie Ihr index.html auf Ihrem Apache-Server ablegen. Es könnte sich beispielsweise um das Verzeichnis htdocs handeln, das hängt jedoch von Ihrer Apache-Konfiguration ab. 

Ich benutze jedoch verschiedene .htaccess-Dateiinhalte und funktioniert für mich bei allen Links/Routen, ohne dass eine Umschreibebasis angegeben werden muss:

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

Es ist eine Modifikation des von Rein Baarsma bereitgestellten Codes.

Meine App ist die Anwendung Angular 2+ (4.x.x), die auf dem Projekt „angle-cli“ basiert. Es hängt kaum von direkten URLs an Adressen ab, die von Angular bereitgestellt werden. Ohne .htaccess-Datei oben habe ich 404 not found nach dem Klicken auf jeden direkten URL-Link erhalten. Mit dieser .htaccess-Datei funktioniert jetzt alles einwandfrei.

1
luke

Fügen Sie entweder in httpd.conf oder in Apache2.conf Folgendes hinzu:

<Directory "/var/www/html/">
    Options FollowSymLinks
    Allow from all
    AllowOverride All
</Directory>
  • Ändern Sie "/ var/www/html /" in den Speicherort Ihrer Website

Und in .htaccess einfügen:

RewriteEngine On
      # If an existing asset or directory is requested go to it as it is
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
      # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
0
Misha

Von Aktualisierung der Seite führt zu 404-Fehlern. :

1) Fügen Sie den Code in web.xml Ihres Implementierungsordners ein:

<error-page>
     <error-code>404</error-code>
     <location>/index.html</location>
</error-page>
0
dheeraj kumar