Angular - Die angeforderte URL/Home wurde auf diesem Server nicht gefunden

Question

Ich werde sehr kurz sein.

Ich habe ein Angular-Projekt mit einfachen Navigationsmenü (RouterLinks). Alles funktioniert wie es soll, wenn es auf localhost, powered by eckigen cli ist.

Aber wenn ich es auf einem echten Server bereitstellen (ich habe keine VPS oder einen anderen Server, nur Ordner, wo ich meine Dateien ablegen kann) passiert seltsame Sache passiert.

Die App ist funktionsfähig, Navigation ist funktional, routeLinks Routing, aber wenn ich einen Browser aktualisieren oder versuchen, etwas manuell in die URL-Zeile zu schreiben, jedes Mal bekomme ich 404 Not Found. (also bin ich in [domain]/home - alles ist ok, aber wenn ich browser aktualisieren, habe ich 404/home nicht gefunden.

Vielleicht suche ich ein Problem an einem schlechten Ort und es ist kein Problem Winkel aber über HTTP-Anfragen (ich weiß nicht viel über sie).

haben Sie eine Ahnung, wo ich anfangen soll?

Danke, Pavel F.

das Projekt, was ich bin sprechen Sie über: http://www.pavel-challenge.cz (nein, das ist nicht ad: D)

app-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { PassionsComponent } from './passions/passions.component'; 
import { QuestionComponent } from './question/question.component'; 
import { AboutComponent } from './about/about.component'; 
import { HomeComponent } from './home/home.component'; 
import { KnowledgeComponent } from './knowledge/knowledge.component'; 

const routes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'knowledge', component: KnowledgeComponent }, 
    { path: 'questions', component: QuestionComponent }, 
    { path: 'passions', component: PassionsComponent }, 
    { path: '**', redirectTo: '/home', pathMatch: 'full' } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

navbar.component.html

<ul> 
    <li><a routerLink="/about">About</a></li> 
    <li><a routerLink="/knowledge">Knowledge</a></li> 
    <li><a routerLink="/questions">Questions</a></li> 
    <li><a routerLink="/passions">Passions</a></li> 
    </ul> 

Answer 1

Es handelt sich darum in Ihrem HTTP-Server-Konfiguration ist.

Sie müssen alle URL machen, nachdem Ihr Hostname auf die HTML-Ressource zeigt, die Ihre eckige Anwendung einbettet.

wie in NGINX:

location/{ 
     root <path to index.html>; 
     try_files $uri /index.html =404; 
(if ressource exist serves it, likes images, else load index.html to load angular app) 
    } 

here is the official documentation

während nach Vorlast navigiert, nehmen die Winkel Router die Führung, und die Anzeige von Daten nach Speicherort ändern sich dynamisch, ohne HTTP-Anforderung.

Aber wenn Sie direkt an < laden ...>/home der http-Server versuchen, auf jeden Fall eine Datei home.html zu laden, und dann ein 404.

Answer 2

FIXED senden: (für Apache HTTP-Server)

ich erstellt. Htaccess-Datei und legen Sie es in den Stammordner auf der Seite eines Anbieters.

.htaccess

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