Angular 2.0.0-alpha.30 sürümünü kullanıyorum. Farklı bir rotaya yönlendirme yaptığınızda, tarayıcıyı yenileyerek GET / route yapılamıyor ifadesini gösterir.

Bu hatanın neden olduğunu anlamama yardımcı olabilir misiniz?

Gördüğünüz hata, http: // localhost / route istemiyor olmanızdır. Simon'a göre .

Html5 yönlendirmesini kullanırken , uygulamanızdaki tüm yolları (şu anda 404) sunucu tarafınızdaki index.html ile eşlemeniz gerekir . İşte sizin için bazı seçenekler:

1. canlı sunucu kullanarak: https://www.npmjs.com/package/live-server

   $live-server --entry-file=index.html`
   

2. nginx kullanarak: http://nginx.org/en/docs/beginners_guide.html

   error_page 404 /index.html
   

3. Tomcat - web.xml dosyasının yapılandırması. Gönderen Kunin bireyin comment

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

Feragatname: bu düzeltme Alpha44 ile çalışır

Aynı sorunu vardı ve Angular.io API Önizleme listelenen HashLocationStrategy uygulayarak çözdü .

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

Gerekli direktifleri alarak başlayın

import {provide} from 'angular2/angular2';
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

Ve son olarak, hep birlikte böyle çizin

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

Rotanız http: // localhost / # / route olarak görünecek ve yenilediğinizde doğru yere yeniden yüklenecektir.

Umarım yardımcı olur!

Açısal, varsayılan olarak HTML5 pushstate'i kullanır ( PathLocationStrategyAçısal argoda ).
İstediği gibi tüm istekleri işleyen bir sunucuya ihtiyacınız var index.htmlveya HashLocationStrategy(yollar için URL'de # ile) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class adresine geçiyorsunuz. html

Ayrıca bkz. Https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

HashLocationStrategyKullanıma geçmek için

> = RC.5 ve 2.0.0 final güncellemesi

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

@NgModule({
  declarations: [AppCmp], 
  bootstrap: [AppCmp],
  imports: [BrowserModule, routes],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);

veya ile daha kısa useHash

imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...

gerekli tüm ithalatlara sahip olduğunuzdan emin olun

Yeni (RC.3) yönlendirici için

<base href="."> 

404'e neden olabilir.

Bunun yerine gerektirir

<base href="/">

> = RC.x için güncelleme

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
  // or since RC.2
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
]);

import {provide} from '@angular/core';
import {  
  PlatformLocation,  
  Location,  
  LocationStrategy,  
  HashLocationStrategy,  
  PathLocationStrategy,  
  APP_BASE_HREF}  
from '@angular/common';  

> = beta.16 için güncelleme İthalat değişti

import {BrowserPlatformLocation} from '@angular/platform-browser';

import {provide} from 'angular2/core';
import {
  // PlatformLocation,
  // Location,
  LocationStrategy,
  HashLocationStrategy,
  // PathLocationStrategy,
  APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';

<beta.16

import {provide} from 'angular2/core';
import {
  HashLocationStrategy
  LocationStrategy,
  ROUTER_PROVIDERS,
} from 'angular2/router';

Ayrıca bkz. Https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 kırılma değişiklikleri

Gördüğünüz hata, var olmayan http: // localhost / route istemeniz nedeniyle olduğunu düşünüyorum . Sunucunuzun tüm istekleri ana index.html sayfanızla eşleyeceğinden emin olmanız gerekir.

Açısal 2, URL'nin sonunda karma kullanmak yerine varsayılan olarak html5 yönlendirmesini kullandığından, sayfayı yenilemek farklı bir kaynak için bir istek gibi görünür.

Varsayılan HTML konum stratejisini kullanıyorsanız, tüm yönlendirici sürümlerinde bu yaygın bir durumdur.

Olan şey, tarayıcı çubuğundaki URL'nin normal bir tam HTML URL'si olmasıdır, örneğin: http://localhost/route .

Tarayıcı çubuğunda Enter tuşuna bastığımızda, adlı dosyayı almak için sunucuya gönderilen gerçek bir HTTP isteği var route.

Sunucu böyle bir dosyaya sahip değildir ve sunucuda ekspres gibi bir şey isteği işlemek ve yanıt vermek üzere yapılandırılmamıştır, bu nedenle sunucu routedosyayı bulamadığı için 404 Bulunamadı .

İstediğimiz şey, sunucunun index.htmltek sayfalık uygulamayı içeren dosyayı döndürmesi . Ardından yönlendirici devreye girmeli ve /routeURL'yi işlemeli ve kendisiyle eşlenen bileşeni görüntülemelidir.

Bu yüzden sorunu çözmek için sunucuyu geri dönecek şekilde yapılandırmamız gerekiyor index.html , 404 Bulunamadı seçeneğinin aksine isteğin işlenememesi durumunda (tek sayfalık uygulama dosyanızın adı olduğu varsayılarak).

Bunu yapmanın yolu kullanılan sunucu tarafı teknolojisine bağlı olacaktır. Örneğin Java'sı bir sunucu uygulaması yazmanız gerekebilir, Rails'te farklı olacaktır, vb.

Somut bir örnek vermek gerekirse, örneğin NodeJ'ler kullanıyorsanız, böyle bir ara katman yazılımı yazmanız gerekir:

function sendSpaFileIfUnmatched(req,res) {
    res.sendFile("index.html", { root: '.' });
}

Ve sonra ara katman zincirinin en sonuna kaydedin:

app.use(sendSpaFileIfUnmatched);

Bu, 404'ü index.htmldöndürmek yerine hizmet edecek , yönlendirici devreye girecek ve her şey beklendiği gibi çalışacaktır.

Bunun index.html dosyanızın ana öğesine yerleştirildiğinden emin olun:

<base href="https://stackoverflow.com/">

Örnek Angular2 içinde Yönlendirme ve Navigasyon dokümantasyon kullanımlar yerine kafasında şu kod (bunlar belgelerin canlı örneği notunda niçin):

<script>document.write('<base href="' + document.location + '" />');</script>

Bir sayfayı yenilediğinizde, bu temel href'i geçerli belge.konumunuza dinamik olarak ayarlar. Bu belgelerin gözden kaçırmak ve dalgıç çoğaltmaya çalışan insanlar için bazı karışıklık neden görebiliyordu.

AppServer'ınızı index.html'ye yönelik tüm istekleri işleyecek şekilde yapılandırmadan tarayıcıya URL'leri girmek istiyorsanız, HashLocationStrategy'yi kullanmanız gerekir .

Yapılandırmanın en kolay yolu:

RouterModule.forRoot(routes, { useHash: true })

Onun yerine:

RouterModule.forRoot(routes)

HashLocationStrategy ile URL'leriniz şöyle olacak:

http://server:port/#/path

Webpack-dev-server kullanımı ile aynı sorunu yaşadım. DevServer seçeneğini web paketime eklemek zorunda kaldım.

Çözüm:

// in webpack
devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}

Sunucu olarak Apache veya Nginx kullanıyorsanız, .htaccess(daha önce oluşturulmamışsa) ve "Açık" RewriteEngine oluşturmanız gerekir.

RewriteEngine On  
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html

Sunucum Apache, yenileme veya derin bağlantı yaparken 404'ü düzeltmek için yaptığım çok basit. Sadece apache vhost config'e bir satır ekleyin:

ErrorDocument 404 /index.html

Böylece herhangi bir 404 hatası, açısal2 yönlendirmesinin istediği index.html'ye yönlendirilecektir.

Tüm vhost dosyası örneği:

<VirtualHost *:80>
  ServerName fenz.niwa.local
  DirectoryIndex index.html
  ErrorDocument 404 /index.html

  DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"
  ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log
  CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined

  <Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">
    AllowOverride All
    Options Indexes FollowSymLinks
    #Order allow,deny
    #Allow from All
    Require all granted
  </Directory>

  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET, POST"
  Header set Access-Control-Allow-Credentials "true"
  Header set Access-Control-Allow-Headers "Accept-Encoding"
</VirtualHost>

Hangi sunucuyu kullanırsanız kullanın, bütün mesele sunucuyu 404'ü index.html'ye yönlendirecek şekilde yapılandırmanın yollarını bulmaktır.

Sunucu yapılandırması bir SPA için bir çözüm değil bence bile. Yanlış bir rota girerse açısal SPA'yı tekrar yüklemek istemezsiniz, değil mi? Bu yüzden bir sunucu yoluna bağlı olmayacağım ve diğer rotaya yönlendirmeyeceğim, ancak evet, açısal uygulama yolunun açısal yolları için tüm istekleri işlemek için index.html'ye izin vereceğim.

Aksi veya yanlış güzergahlar yerine bunu deneyin. Benim için çalışıyor, emin değilim ama devam eden bir iş gibi görünüyor. Bir sorunla karşılaştığımda bunu kendim tökezledi.

@RouteConfig([
  { path: '/**', redirectTo: ['MycmpnameCmp'] }, 
   ...
  }
])

https://github.com/angular/angular/issues/4055

Bununla birlikte, sunucu klasörlerinizi yapılandırmayı ve SPA olmayan HTML veya web komut dosyalarınız varsa erişim hakkını unutmayın. Yoksa sorunlarla karşılaşacaksınız. Benim gibi sorunla karşılaştığımda benim için sunucu yapılandırması ve üstü bir karışım oldu.

açısal 5 hızlı düzeltme için app.module.ts dosyasını düzenleyin ve appRoutes'den{useHash:true} sonra ekleyin .

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

Açısal uygulamalar, basit bir statik HTML sunucusuyla sunulmak için mükemmel adaylardır. Uygulama sayfalarını dinamik olarak oluşturmak için sunucu tarafı bir motora ihtiyacınız yoktur, çünkü Angular bunu istemci tarafında yapar.

Uygulama Açısal yönlendiriciyi kullanıyorsa, sunucuyu, sahip olmadığı bir dosya istendiğinde uygulamanın ana sayfasını (index.html) döndürecek şekilde yapılandırmanız gerekir.

Yönlendirilen bir uygulama "derin bağlantıları" desteklemelidir. Derin bağlantı, uygulamanın içindeki bir bileşenin yolunu belirten bir URL'dir. Örneğin, http://www.example.com/heroes/42 , kahramanı kimlik sayfasına 42: kimliğini gösteren kahraman ayrıntı sayfasına derin bir bağlantıdır.

Kullanıcı çalışan bir istemciden bu URL'ye gittiğinde sorun yoktur. Açısal yönlendirici, URL'yi ve o sayfaya ve kahramana giden yolları yorumlar.

Ancak bir e-postadaki bir bağlantıyı tıklamak, tarayıcı adres çubuğuna girmek veya yalnızca kahraman ayrıntılar sayfasındayken tarayıcıyı yenilemek - tüm bu işlemler çalışan uygulamanın dışında tarayıcının kendisi tarafından gerçekleştirilir. Tarayıcı, yönlendiriciyi atlayarak bu URL için sunucuya doğrudan bir istekte bulunur.

Statik bir sunucu, http://www.example.com/ için bir istek aldığında rutin olarak index.html döndürür . Ancak http://www.example.com/heroes/42 adresini reddediyor ve bunun yerine index.html döndürecek şekilde yapılandırılmadığı sürece 404 - Bulunamadı hatasını döndürür

Bu sorun üretimde ortaya çıktıysa, aşağıdaki adımları izleyin

1) Açısal uygulamanızın src klasörüne bir Web.Config dosyası ekleyin. Kodun altına yerleştirin.

<configuration>
<system.webServer>
<rewrite>
    <rules>
    <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
    </rule>
    </rules>
</rewrite>
</system.webServer>
</configuration>

2) angular-cli.json dosyasına bir referans ekleyin. Angular-cli.json içinde Web.config öğesini aşağıda gösterildiği gibi varlık bloğuna koyun.

"assets": [
    "assets",
    "favicon.ico",
    "Web.config"
  ],

3) Şimdi kullanarak üretim için çözüm inşa edebilirsiniz

ng build --prod

Bu bir dist klasörü oluşturur. Dağıtım klasörü içindeki dosyalar herhangi bir mod tarafından konuşlandırılmaya hazırdır.

Ortalama bir uygulama için bu çözümü kullanabilirsiniz, ejs'ı görüntüleme motoru olarak kullandım:

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(function (req, res, next) {
    return res.render('index.html');
});

ve ayrıca açısal-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "views",

yerine iyi çalışır

app.get('*', function (req, res, next) {
    res.sendFile('dist/index.html', { root: __dirname });
 });

db çağrıları alma ve index.html döndürme sorunu yaratma

IIS'de yaşam boyunca mücadele eden bizler için: resmi Power 2hell belgelerine dayanarak bu sorunu düzeltmek için aşağıdaki PowerShell kodunu kullanın (birisinin bu konuya yazdığı ? )

Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS 
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect

Bu 404 açısını 2 açısal dokümanlar (yukarıdaki bağlantı) önerisine göre /index.html dosyasına yönlendirir.

Aşağıdan deneyebilirsiniz. Benim için çalışıyor!

main.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

...
export class MainComponent implements OnInit {
    constructor(private router: Router) {
        let path: string = window.location.hash;
        if (path && path.length > 0) {
            this.router.navigate([path.substr(2)]);
        }
    }

    public ngOnInit() { }
}

Yönlendirici parametrelerine bölmek için path.substr (2) öğesini daha da geliştirebilirsiniz. Açısal 2.4.9 kullanıyorum

i Sadece kökte .htaccess ekleniyor.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule ^ ./index.html
</IfModule>

burada / .xinde.html
için /index.html'de nokta '.' (üst dizin) ekliyorum . temel yoldaki index.html dosyanızın ana dizin yolu olduğundan ve proje yapısında ayarlandığından emin olun.

Alt sayfaların URL yolunu dizine geri yönlendirmeksizin HTML5 modunda korumak istedim ve çözümlerin hiçbiri bana bunun nasıl yapılacağını söylemedi, bu yüzden bunu başardım:

IIS'de tüm rotalarınız için basit sanal dizinler oluşturun ve bunları uygulama köküne yönlendirin.

System.webServer'ınızı Web.config.xml dosyasına bu konum etiketi ile sarın, aksi takdirde sanal dizini kullanarak Web.config dosyasını ikinci kez yüklerken yinelenen hatalar alırsınız:

<configuration>
    <location path="." inheritInChildApplications="false">
    <system.webServer>
        <defaultDocument enabled="true">
            <files>
                <add value="index.html" />
            </files>
        </defaultDocument>
    </system.webServer>
  </location>
</configuration>

Açısal 2 tohumda nasıl çalıştığını kontrol ettim.

Bir sayfa yeniden yüklendiğinde otomatik olarak yeniden yönlendirmek için express-history-api-fallback'i kullanabilirsiniz.

Bu sorunu IMO'yu çözmenin en zarif yolu olduğunu düşünüyorum.

PathLocationStrategy'yi kullanmak istiyorsanız:

• Wildfly yapılandırması:
  • WEB-INF içine yerleştirilecek undertow-handlers.conf dosyası oluşturun
  • İçerik: (dinlenme uç noktalarınızı hariç tutun!)
    • regex ['(. / genel bakış / ?. ? $)'] ve regex ['(. / bitiş noktaları. )'] -> yeniden yaz ['/ index.html']
    • regex ['(. / dağıtımlar / ?. ? $)'] ve regex ['(. / bitiş noktaları. )'] -> yeniden yaz ['/ index.html']

Java EE / Wildfly ile tek sayfalık uygulama: sunucu tarafı yapılandırma

2017-Temmuz-11: Bu bağlantılı olduğundan bir soru bu sorunu yaşıyor ama Electron ile Açısal 2 kullanarak, burada benim çözüm ekleyeceğiz.

Tüm yapmam gereken <base href="./">index.html'den kaldırmaktı ve Electron sayfayı tekrar başarıyla yüklemeye başladı.

İthalat ekleyin:

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

Ve NgModule sağlayıcısında şunları ekleyin:

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

App ana index.html Dosya için temel href değiştirmek ./index.htmldan/

Uygulama herhangi bir sunucuya dağıtıldığında sayfa için herhangi bir harici uygulamadan erişilebilen gerçek bir URL verecektir.

Köşeye .htaccess eklemek 404 çözülmüş ve açısal 4 apache2'de sayfayı yeniler.

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

Bence 404 alıyorsunuz çünkü tomcat sunucusunda mevcut olmayan http: // localhost / route talep ediyorsunuz . Açısal 2, URL'nin sonunda karma kullanmak yerine varsayılan olarak html 5 yönlendirmesini kullandığından, sayfayı yenilemek farklı bir kaynak için bir istek gibi görünür.

Tomcat'te açısal yönlendirme kullanırken, sunucunuzu, sayfayı yenilerken uygulamanızdaki tüm yolları ana dizininizle eşleştireceğinden emin olmanız gerekir. Bu sorunu çözmenin birden çok yolu vardır. Hangisi size uygunsa, bunun için gidebilirsiniz.

1) Dağıtım klasörünüzün web.xml dosyasına aşağıdaki kodu yazın:

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

2) Ayrıca yollar için URL'de # ile HashLocationStrategy'yi kullanmayı deneyebilirsiniz:

Kullanmayı deneyin:

RouterModule.forRoot (rotalar, {useHash: true})

Onun yerine:

RouterModule.forRoot (rotalar)

HashLocationStrategy ile URL'leriniz şöyle olacak:

http: // localhost / # / rota

3) Tomcat URL Yeniden Yazma Valfi: Kaynak bulunamazsa index.html'ye yönlendirmek için sunucu düzeyinde bir yapılandırma kullanarak URL'leri yeniden yazın.

3.1) META-INF klasöründe bir context.xml dosyası oluşturun ve içindeki aşağıdaki içeriği kopyalayın.

<? xml version='1.0' encoding='utf-8'?>
<Context>
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

3.2) WEB-INF içinde rewrite.config dosyası oluşturun (bu dosya URL Yeniden Yazma kuralını içerir ve tomcat tarafından URL yeniden yazma için kullanılır). Rewrite.config içinde aşağıdaki içeriği kopyalayın:

  RewriteCond %{SERVLET_PATH} !-f
  RewriteRule ^/(.*)$ /index.html [L]

Bu doğru cevap değil ama Yenileme sırasında tüm ölü çağrıları 404 sayfasından ödün vererek Ana Sayfa'ya yönlendirebilirsiniz.

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.location.href = "http://" + document.location.host;
        </script>
    </head>
</html>

"Tarayıcıda yeniden yükleme-çalışmıyor-yönlendirici" çözmek için en iyi çözüm spa-fall geri kullanmanız gerektiğidir. Asp.net core ile angular2 uygulamasını kullanıyorsanız "StartUp.cs" sayfasında tanımlamamız gerekiyor. MVC rotaları altında. Kodu ekliyorum.

 app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
            routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
        });

Cevap oldukça zor. Düz eski bir Apache Sunucusu (veya IIS) kullanıyorsanız, Açısal sayfalar gerçekte olmadığından sorunu alırsınız. Açısal yoldan "hesaplanır".

Sorunu çözmenin birkaç yolu vardır. Birincisi HashLocationStrategy kullanmak Angular tarafından sunulan . Ancak URL'ye keskin bir işaret eklenir. Bu esas olarak Açısal 1 ile uyumluluk içindir (sanırım). Gerçek şu ki, keskinliğin URL'nin bir parçası olmadığı kısımdır (daha sonra sunucu "#" işaretinden önceki kısmı çözer). Mükemmel olabilir.

Burada geliştirilmiş bir yöntem (404 numarasına dayanmaktadır). Açısal uygulamanızın "dağıtılmış" bir sürümüne sahip olduğunuzu ( ng build --prodAngular-CLI kullanıyorsanız) ve sayfalara doğrudan sunucunuzla eriştiğinizi ve PHP'nin etkin olduğunu varsayıyorum .

Web siteniz sayfalara dayanıyorsa (örneğin Wordpress) ve Açısal adanmış yalnızca bir klasörünüz varsa (örneğimde "dist" olarak adlandırılır), garip ama sonunda basit bir şey yapabilirsiniz. Açısal sayfalarınızı "/ dist" de (buna göre <BASE HREF="/dist/">) sakladığınızı varsayıyorum . Şimdi bir 404 yönlendirmesi ve PHP yardımı kullanın.

Apache yapılandırmanızda (veya .htaccessaçısal uygulama dizininizin dosyasında),ErrorDocument 404 /404.php

404.php aşağıdaki kodla başlayacaktır:

<?php
$angular='/dist/';
if( substr($_SERVER['REQUEST_URI'], 0, strlen($angular)) == $angular ){
    $index = $_SERVER['DOCUMENT_ROOT'] . $angular . "index.html";
    http_response_code(200);
    include $index;
    die;
}

// NOT ANGULAR...
echo "<h1>Not found.</h1>"

$angularaçısalınızın HREF'inde saklanan değer nerede index.html.

İlke oldukça basittir, Apache sayfayı bulamazsa, PHP betiğine 404 yönlendirmesi yapılır. Sadece sayfanın açısal uygulama dizininde olup olmadığını kontrol ediyoruz. Durum buysa, index.html dosyasını doğrudan yükleriz (yönlendirmeden): URL'yi değiştirmeden tutmak için bu gereklidir. Ayrıca HTTP kodunu 404'ten 200'e değiştiriyoruz (tarayıcılar için daha iyi).

Sayfa açısal uygulamada yoksa ne olur? Açısal yönlendiricinin "tümünü yakala" yı kullanıyoruz (bkz. Açısal yönlendirici belgeleri).

Bu yöntem, temel bir web sitesi içindeki gömülü açısal uygulama ile çalışır (bence gelecekte böyle olacak).

NOTLAR:

• Aynı şeyi mod_redirect(URL'leri yeniden yazarak) yapmaya çalışmak hiç de iyi bir çözüm değildir çünkü dosyaların (varlıklar gibi) gerçekten yüklenmesi gerekir, o zaman sadece "bulunamadı" çözümünü kullanmaktan çok daha risklidir.
• Sadece kullanarak yeniden yönlendirme ErrorDocument 404 /dist/index.htmlçalışır ama Apache hala bir 404 hata kodu (tarayıcılar için kötü) ile yanıt veriyor.

Bu sorun için kalıcı bir düzeltme değil, daha çok bir geçici çözüm veya kesmek gibi

Açısal Uygulamamı gh sayfalarına dağıtırken de aynı sorunu yaşadım. İlk önce gh sayfalarındaki sayfalarımı yenilerken 404 mesajla karşılaştım.

Sonra @ @ gunter'ın işaret ettiği gibi kullanmaya başladığım HashLocationStrategyAngular 2 ile sağlandı.

Ama bu kendi sorunları kümesi ile geldi #url gerçekten kötü url böyle garip görünmesini yaptı https://rahulrsingh09.github.io/AngularConcepts/#/faq.

Bu sorunu araştırmaya başladım ve bir blogla karşılaştım. Denemeyi denedim ve işe yaradı.

İşte o blogda belirtildiği gibi yaptım.

Gh sayfa deponuza içinde boş bir HTML belgesi içeren bir 404.html dosyası ekleyerek başlamanız gerekir - ancak belgenizin toplamı 512 bayttan fazla olmalıdır (aşağıda açıklanmıştır). Sonra 404.html sayfanızın baş öğesine aşağıdaki işaretlemeyi koyun:

<script>
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>

Bu kod, giriş giriş URL'sini standart sessionStorage nesnesindeki bir değişkene ayarlar ve bir meta yenileme etiketi kullanarak hemen projenizin index.html sayfasına yönlendirir. Bir Github Organizasyon sitesi yapıyorsanız, içerik özelliği değiştirici metnine bir repo adı koymayın, şunu yapın: content = "0; URL = '/'"

Kullanıcının başlangıçta gittiği URL'yi yakalamak ve geri yüklemek için, sayfanın mevcut durumuna başka herhangi bir JavaScript işlem yapmadan önce index.html sayfanızın başına aşağıdaki komut dosyası etiketini eklemeniz gerekir:

<script>
  (function(){
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>

Bu JavaScript biti 404.html sayfasında sessionStorage üzerinde önbelleğe aldığımız URL'yi alır ve mevcut geçmiş girişini onunla değiştirir.

Referans backalleycoder Bu geçici çözüm için @ Daniel'e teşekkürler.

Şimdi yukarıdaki URL https://rahulrsingh09.github.io/AngularConcepts/faq olarak değiştirildi

Bunu (Java / Spring arka ucunu kullanarak) açısal rotalarımda tanımlanan her şeyle eşleşen, 404 yerine index.html gönderen bir işleyici ekleyerek çözdüm. Bu daha sonra uygulamayı yeniden başlatır ve doğru sayfayı yükler. Ayrıca bununla yakalanmayan bir şey için 404 işleyicim var.

@Controller         ////don't use RestController or it will just send back the string "index.html"
public class Redirect {

    private static final Logger logger = LoggerFactory.getLogger(Redirect.class);

    @RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
    public String redirectToIndex(HttpServletRequest request) {
        logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
        return "/index.html";
    }
}

Sunucu olarak Apache veya Nginx kullanıyorsanız bir .htaccess oluşturmanız gerekir

<IfModule mime_module>
      AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
    </IfModule>
    # php -- END cPanel-generated handler, do not edit

    <IfModule mod_rewrite.c>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html
        # to allow html5 state links
        RewriteRule ^ index.html [L]
    </IfModule>