wake-up-neo.com

Angular 2 Routing funktioniert nicht, wenn es auf einem HTTP-Server bereitgestellt wird

Ich werde eine einfache Anwendung für Angular 2 entwickeln. Ich habe ein Projekt mit Routing erstellt, das Angular CLI verwendet, und der App mit dem Befehl 'ng generate component' mehrere Komponenten hinzugefügt. Dann habe ich das Routing in app-routing.module.ts wie folgt angegeben.

import {NgModule} aus '@ angle/core'; 
 import {Routes, RouterModule} aus '@ angle/router'; 
 import {HomeComponent} aus './home/home.component' ;
 {AboutComponent} aus './about/about.component' importieren ;
import {UserComponent} aus './user/user.component' ;
import {ErrorComponent} aus './error/error.component' ; 
 import {SpecialpageComponent} aus './specialpage/specialpage.component' ;

const routen: Routen = [
 {
 Pfad: '', 
 Komponente: HomeComponent 
 }, 
 {
 Pfad: 'über', 
 Komponente: AboutComponent 
 }, 
 {
 Pfad: 'Benutzer', 
 Komponente: UserComponent 
 }, 
 {
 Pfad: 'specialpage', 
 Komponente: SpecialpageComponent 
 }, 
 {
 Pfad: '**', 
 Komponente: ErrorComponent 
 } 

]; 

 @ NgModule ({
 Importe: [RouterModule.forRoot (Routen)], 
 Exporte: [RouterModule], 
 Provider: []
}) 
 Exportklasse AppRoutingModule {} 

app.module.ts ist wie folgt.

 import {BrowserModule} aus '@ angle/platform-browser'; 
 import {NgModule} aus '@ angle/core'; 
 import {FormsModule} aus '@ angle/forms'; 
 {HttpModule} aus '@ angle/http' importieren; 
 {AppRoutingModule} aus './app-routing.module' importieren ;

import {AppComponent} aus './app.component' ;
 Importieren Sie {HomeComponent} aus './home/home.component' ;
import {AboutComponent} aus './about/about.component' ;
import {ErrorComponent} aus './error/error. Komponente '; 
 import {UserComponent} aus' ./user/user.component ';
import {SpecialpageComponent} aus' ./specialpage/specialpage.component '; 

 @ NgModule ({
 Deklarationen: [
 AppComponent, 
 HomeComponent, 
 AboutComponent, 
 ErrorComponent, 
 UserComponent, 
 SpecialpageComponent 
], 
 Importe: [
 BrowserModule, 
 FormsModule, 
 HttpModule, 
 AppRoutingModule 
], 
 Provider: [], 
 Bootstrap: [AppComponent] 
}) 
 C) lass AppModule {} 

Ich habe keine Modifikationen für die anderen Komponenten hinzugefügt. .__ Dann stellte ich die Anwendung mit dem Befehl 'ng serv' bereit, und die App funktioniert gut mit den Links. ZB: http: // localhost: 4200/about

 enter image description here

Wenn ich das Projekt jedoch auf einem http-Server bereitstelle, funktionieren die Links nicht wie erwartet. Ich habe die App mit dem Befehl 'http-server ./dist' implementiert, und die App wird ordnungsgemäß bereitgestellt, aber die Links funktionieren nicht. Wenn ich zu ' http: // localhost: 4200/about ' gehe, gibt es 404 Fehler. 

 enter image description here

Mache ich etwas falsch? Warum funktioniert 'ng-serv' und 'http-server' funktioniert nicht?

Jede Hilfe wäre dankbar. Danke im Voraus. 

Ich habe mein Projekt nach github hochgeladen.

23
kinath_ru

Dieses Problem wird gelöst, indem Sie HashLocationStrategy implementieren, das allen Routen # hinzufügt. Dies erreichen Sie durch Hinzufügen von HashLocationStrategy to AppModule providers.

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

und fügen Sie den entsprechenden Import hinzu

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';

Dies löst Ihr Problem.

Wenn Sie die Variable HashLocationStrategy nicht verwenden möchten, können Sie die Variable PahtLocationStrategy verwenden, sodass Ihre Angular-App keinen Hash in der URL anzeigt . Weitere Informationen hierzu finden Sie im offiziellen Link: https: // angle.io/api/common/PathLocationStrategy

18
Manu

Dies liegt daran, dass der http-server fallback nicht unterstützt, wie etwa der lite-server oder der web pack-dev-Server. Aus diesem Grund wird 404 nicht gefunden ..__ angezeigt. Es gibt zwei Lösungen zwei, um dieses Problem zu beheben:

  1. sie können HashLocationStrategy wie oben erwähnt verwenden.
  2. Wenn Sie es auf Apache oder IIS Server bereitstellen, können Sie einfach Konfigurationen hinzufügen, wie bereits erwähnt: hier !

Hinweis: Für die Entwicklung können Sie lite-server verwenden.

Hoffe, das wird dir helfen.

7
Ashish Sharma

Es wird passieren, weil es eine Seite about sucht, die im Inneren gar nicht vorhanden ist, also 404. Mögliche Optionen:

  1. Wenn Sie mit dem http-Server arbeiten möchten, verwenden Sie einen Proxy, der alles nach http: // localhost: your-port umleitet. 

    Option: -P oder --proxy Proxies alle Anfragen, die nicht lokal auf die angegebene URL aufgelöst werden können. z.B.: -P http://someurl.com

  2. Verwenden Sie Express überhaupt nicht. Erstellen Sie Ihren eigenen http-Server mit express & Redirect alles zu index.html

    Angenommen, public ist Ihr Ordner, in dem Sie alle verworfenen Dinge aufbewahren.

    var express = require('express');
    var app = express();
    
    var path = __dirname + '/public';
    var port = 8080;
    
    app.use(express.static(path));
    app.get('*', function(req, res) {
        res.sendFile(path + '/index.html');
    });
    app.listen(port);
    
6
Parth Ghiya

Es wird auf diese Weise gelöst:

Fall-1: Für Version kleiner als Angular 5.1

1) Verwenden Sie HashLocationStrategy wie unten erwähnt: In AppModule führen Sie Folgendes aus.

1.1) import { HashLocationStrategy, LocationStrategy } from '@angular/common';

1.2) providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

Fall-2: Für Version gleich oder mehr als Angular 5.1

2.1) Angular hat diese Eigenschaft onSameUrlNavigation zur Überwindung von Aktualisierungsproblemen auf dem Server eingeführt.

2.2) Fügen Sie onSameUrlNavigation zum RouterModule.forRoot in imports array hinzu.

a) In Application Main Routing-Modul fügen Sie die Eigenschaft hinzu: app.routing.module.ts/app.routing.ts

Siehe unten:

@ngModule({

    imports: 
    [
       RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})
    ],

    exports: [RouterModule],
 });

Ich hoffe es hilft jemandem.

3
ArunDhwaj IIITH

Wenn Sie, wie ich, überhaupt keine Codeänderungen vornehmen möchten, verwenden Sie stattdessen einfach Folgendes:

https://www.npmjs.com/package/angular-http-server

1
Sharpiro

Ich habe dieses Problem mit dem Hinzufügen in AppModule Providers behoben:

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}]

und importieren

import { PathLocationStrategy, LocationStrategy } from '@angular/common';

Dann habe ich .htaccess erstellt:

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

Alles funktioniert ohne # in URLs :)

1
Maciej Socha

Für Apache-Server:

in den Produktionsservern

Fügen Sie die ".htaccess" -Datei in das Projektstammverzeichnis ein oder erstellen Sie sie. Fügen Sie der .htaccess-Datei eine Umschreibungsregel hinzu (siehe Abbildung)

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
Tanvir Sarker

Der genaue Grund, warum dieses spezielle Problem auftritt, liegt an Ihren Servereinstellungen.

Wenn Sie die Anwendung implementieren, müssen Sie bestimmte Schritte ausführen. Einer der wesentlichen Schritte besteht darin, ein bestimmtes Segment Ihres Pfades zu markieren: http: // domain-name/main wobei main das Pfadsegment ist muss als Bezeichner in Ihren Servereinstellungen verwendet werden, sagen Sie Ihre server.js oder app.js , wenn es um ein Node-Backend geht oder eine webconfig -Datei für IIS und Tomcat-Bereitstellung.

Der Grund für das Markieren eines bestimmten Segments ist, dass wenn der Server eine Anfrage mit diesem bestimmten Segment + zusätzlich empfängt, Sie diese an Ihre Anwendung im WWW oder im öffentlichen Ordner weiterleiten, damit der angular Router einspringt.

Dieser Vorgang wird als Umschreiben der URL bezeichnet. Wenn der Webserver oder der App-Server in Abhängigkeit von der Anwendungsgröße nicht von Ihnen gesteuert wird, verwenden Sie bitte hashLocationStratergy . Andernfalls ist es immer sinnvoll, pathLocationStartergy zu verwenden da es hilfreich ist, wenn es um Verlaufsverfolgung und andere ästhetische und Leistungsvorteile geht.

Um mehr darüber zu lesen, können Sie diese Links besuchen:

Für IIS : https://blog.angularindepth.com/deploy-an-angular-application-to-iis-60a0897742e7

0
abhay

Sie sollten versuchen, die URL im Build an dem Punkt anzugeben, den die App initialisieren soll:

Ng build --prod --base-href="http://your.url.com/subdirectory/etc"
0
bardat

Fügen Sie einen Punkt in Ihre Basis-Href-Zeichenfolgen ein.

Richtig

<base href="./home">

Falsch

<base href="/home">

http://www.wisdomofjim.com/blog/solved-problems-with-resource-loading-failures-when-deploying-angular-2-webapps-live

0
Akrime

Für Apache Server

  • Erstellen Sie einen Dateinamen .htaccess
  • Bearbeiten Sie diese Datei und schreiben Sie index.html anstelle von index.php.
  • Für diejenigen, die keinen Code haben, können Sie den folgenden Code in Ihre .htaccess-Datei schreiben: 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

  • Dieser Code funktioniert möglicherweise nicht für das SSL-Zertifikat. Wenden Sie sich an Ihren Hosting-Anbieter OR. Besuchen Sie https://httpd.Apache.org/docs/current/howto/htaccess.html , um auf docs zu verweisen.

0
Smit Patel

Wie in der Dokumentation unter https://angular.io/guide/deployment (Apache) beschrieben, können Sie auch nach nginx suchen. Sie müssen den Server mit der .htaccess-Datei als index.html angeben 

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