Saya menggunakan versi Angular 2.0.0-alpha.30. Ketika mengarahkan ulang ke rute yang berbeda, maka segarkan peramban, ini menunjukkan Tidak Dapat MENDAPATKAN / rute.

Bisakah Anda membantu saya dengan mencari tahu mengapa kesalahan ini terjadi.

Kesalahan yang Anda lihat adalah karena Anda meminta http: // localhost / rute yang tidak ada. Menurut Simon .

Saat menggunakan perutean html5 Anda perlu memetakan semua rute di aplikasi Anda (saat ini 404) ke index.html di sisi server Anda. Berikut ini beberapa opsi untuk Anda:

1. menggunakan live-server: https://www.npmjs.com/package/live-server

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

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

   error_page 404 /index.html
   

3. Tomcat - konfigurasi web.xml. Dari komentar Kunin

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

Penafian: perbaikan ini bekerja dengan Alpha44

Saya memiliki masalah yang sama dan menyelesaikannya dengan menerapkan HashLocationStrategy yang tercantum dalam Pratinjau API Angular.io.

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

Mulailah dengan mengimpor arahan yang diperlukan

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

Dan akhirnya, bootstrap semuanya bersama seperti itu

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

Rute Anda akan muncul sebagai http: // localhost / # / route dan ketika Anda menyegarkan, itu akan dimuat ulang di tempat yang semestinya.

Semoga itu bisa membantu!

Angular secara default menggunakan pushstate HTML5 ( PathLocationStrategydalam bahasa gaul Angular).
Anda memerlukan server yang memproses semua permintaan seperti yang diminta index.htmlatau Anda beralih ke HashLocationStrategy(dengan # di URL untuk rute) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class. html

Lihat juga https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

Untuk beralih HashLocationStrategymenggunakan

pembaruan untuk> = RC.5 dan 2.0.0 final

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

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

atau lebih pendek dengan useHash

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

pastikan Anda memiliki semua impor yang diperlukan

Untuk router baru (RC.3)

<base href="."> 

dapat menyebabkan 404 juga.

Sebaliknya itu membutuhkan

<base href="/">

pembaruan untuk> = RC.x

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';  

pembaruan untuk> = beta.16 Impor telah berubah

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';

Lihat juga https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 pemecahan-perubahan

Saya pikir kesalahan yang Anda lihat adalah karena Anda meminta http: // localhost / rute yang tidak ada. Anda perlu memastikan bahwa server Anda akan memetakan semua permintaan ke halaman index.html utama Anda.

Karena Angular 2 menggunakan perutean html5 secara default alih-alih menggunakan hash di akhir url, menyegarkan laman tampak seperti permintaan untuk sumber daya yang berbeda.

Ini adalah situasi umum di semua versi router jika Anda menggunakan strategi lokasi HTML default.

Apa yang terjadi adalah bahwa URL pada bar browser normal url HTML penuh, seperti misalnya: http://localhost/route.

Jadi ketika kita menekan Enter di bilah browser, ada permintaan HTTP yang sebenarnya dikirim ke server untuk mendapatkan file bernama route.

Server tidak memiliki file seperti itu, dan tidak ada sesuatu seperti express yang dikonfigurasi pada server untuk menangani permintaan dan memberikan respons, sehingga server mengembalikan 404 Tidak Ditemukan, karena tidak dapat menemukan routefile.

Yang kami inginkan adalah server mengembalikan index.htmlfile yang berisi aplikasi satu halaman. Maka router harus menendang dan memproses /routeurl dan menampilkan komponen yang dipetakan untuk itu.

Jadi untuk memperbaiki masalah ini kita perlu mengkonfigurasi server untuk kembali index.html(dengan asumsi itu adalah nama file aplikasi satu halaman Anda) jika permintaan tidak dapat ditangani, sebagai lawan dari 404 Tidak Ditemukan.

Cara untuk melakukan ini tergantung pada teknologi sisi server yang digunakan. Jika Java-nya misalnya Anda mungkin harus menulis servlet, di Rails akan berbeda, dll.

Untuk memberikan contoh konkret, jika misalnya Anda menggunakan NodeJs, Anda harus menulis middleware seperti ini:

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

Dan kemudian daftarkan di bagian paling akhir rantai middleware:

app.use(sendSpaFileIfUnmatched);

Ini akan berfungsi index.htmlalih-alih mengembalikan 404, router akan menendang dan semuanya akan berfungsi seperti yang diharapkan.

Pastikan ini ditempatkan di elemen kepala index.html Anda:

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

The Contoh di Angular2 Routing & Navigasi menggunakan dokumentasi kode berikut di kepala bukan (mereka menjelaskan mengapa pada contoh catatan hidup dari dokumentasi):

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

Saat Anda me-refresh halaman, ini secara dinamis akan mengatur basis href ke dokumen Anda saat ini. Lokasi. Saya bisa melihat ini menyebabkan kebingungan bagi orang-orang yang membaca sekilas dokumentasi dan mencoba mereplikasi plunker.

Jika Anda ingin dapat memasukkan url di browser tanpa mengonfigurasi AppServer Anda untuk menangani semua permintaan ke index.html, Anda harus menggunakan HashLocationStrategy .

Cara termudah untuk mengonfigurasi menggunakan:

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

Dari pada:

RouterModule.forRoot(routes)

Dengan HashLocationStrategy url Anda akan menjadi seperti:

http://server:port/#/path

Saya memiliki masalah yang sama dengan menggunakan webpack-dev-server. Saya harus menambahkan opsi devServer ke paket web saya.

Larutan:

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

Jika Anda menggunakan Apache atau Nginx sebagai server Anda harus membuat .htaccess(jika tidak dibuat sebelumnya) dan "Aktif" RewriteEngine

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

Server saya adalah Apache, apa yang saya lakukan untuk memperbaiki 404 saat menyegarkan atau menghubungkan sangat sederhana. Cukup tambahkan satu baris dalam konfigurasi aphost vhost:

ErrorDocument 404 /index.html

Sehingga kesalahan 404 akan dialihkan ke index.html, yang diinginkan oleh routing angular2.

Seluruh contoh file vhost:

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

Tidak peduli server apa yang Anda gunakan, saya pikir intinya adalah mencari cara untuk mengkonfigurasi server untuk mengarahkan 404 ke index.html Anda.

Konfigurasi server bukan solusi untuk SPA yang saya pikir. Anda tidak ingin memuat ulang spa sudut lagi jika rute yang salah masuk, bukan? Jadi saya tidak akan bergantung pada rute server dan mengalihkan ke rute lain tapi ya saya akan membiarkan index.html menangani semua permintaan untuk rute sudut dari jalur aplikasi sudut.

Coba ini, bukan sebaliknya atau rute yang salah. Ini bekerja untuk saya, tidak yakin tetapi sepertinya sedang berlangsung. Tersandung ini sendiri ketika menghadapi masalah.

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

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

Namun ingatlah untuk mengonfigurasi folder server dan akses Anda jika Anda memiliki HTML atau skrip web yang bukan SPA. Jika tidak, Anda akan menghadapi masalah. Bagi saya ketika menghadapi masalah seperti Anda itu adalah campuran dari konfigurasi server dan di atas.

untuk perbaikan cepat sudut 5, edit app.module.ts dan tambahkan {useHash:true}setelah appRoutes.

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

Aplikasi sudut adalah kandidat yang sempurna untuk melayani dengan server HTML statis sederhana. Anda tidak memerlukan mesin sisi server untuk secara dinamis menyusun halaman aplikasi karena Angular melakukannya di sisi klien.

Jika aplikasi menggunakan router Angular, Anda harus mengonfigurasi server untuk mengembalikan halaman host aplikasi (index.html) ketika diminta untuk file yang tidak dimiliki.

Aplikasi yang diarahkan harus mendukung "tautan dalam". Tautan yang dalam adalah URL yang menentukan jalur ke komponen di dalam aplikasi. Misalnya, http://www.example.com/heroes/42 adalah tautan yang dalam ke laman detail pahlawan yang menampilkan pahlawan dengan id: 42.

Tidak ada masalah ketika pengguna menavigasi ke URL itu dari dalam klien yang berjalan. Router Angular mengartikan URL dan rute ke halaman dan pahlawan itu.

Tetapi mengklik tautan dalam surel, memasukkannya di bilah alamat peramban, atau sekadar menyegarkan peramban saat berada di laman detail pahlawan - semua tindakan ini ditangani oleh peramban itu sendiri, di luar aplikasi yang sedang berjalan. Browser membuat permintaan langsung ke server untuk URL itu, melewati router.

Server statis secara rutin mengembalikan index.html ketika menerima permintaan untuk http://www.example.com/ . Tetapi ia menolak http://www.example.com/heroes/42 dan mengembalikan 404 - Tidak Ditemukan kesalahan kecuali jika dikonfigurasi untuk mengembalikan index.html sebagai gantinya

Jika masalah ini terjadi dalam produksi, ikuti langkah-langkah di bawah ini

1) Tambahkan file Web.Config di folder src aplikasi sudut Anda. Tempatkan kode di bawah ini di dalamnya.

<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) Tambahkan referensi untuk itu di angular-cli.json. Di angular-cli.json, masukkan Web.config di blok aset seperti yang ditunjukkan di bawah ini.

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

3) Sekarang Anda dapat membangun solusi untuk produksi menggunakan

ng build --prod

Ini akan membuat folder dist. File di dalam folder dist siap untuk ditempatkan dengan mode apa pun.

Anda dapat menggunakan solusi ini untuk aplikasi rata-rata, saya menggunakan ejs sebagai view engine:

// 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');
});

dan juga diatur dalam angular-cli.json

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

itu akan berfungsi dengan baik alih-alih

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

itu menciptakan masalah dengan mendapatkan panggilan db dan mengembalikan index.html

Bagi kita yang bergumul dalam kehidupan di IIS: gunakan kode PowerShell berikut untuk memperbaiki masalah ini berdasarkan dokumen resmi Angular 2 (yang seseorang pasang di utas ini? Http://blog.angular-university.io/angular2-router/ )

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

Ini mengalihkan 404 ke file /index.html sesuai saran di Angular 2 docs (tautan di atas).

Anda dapat mencoba di bawah ini. Ini bekerja untuk saya!

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() { }
}

Anda selanjutnya dapat meningkatkan path.substr (2) untuk dibagi menjadi parameter router. Saya menggunakan sudut 2.4.9

i Cukup menambahkan .htaccess di root.

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

di sini saya hanya menambahkan titik '.' (direktori induk) di /index.html ke ./index.html
pastikan file index.html Anda di jalur dasar adalah jalur direktori utama dan ditetapkan dalam pembangunan proyek.

Saya ingin mempertahankan jalur URL sub halaman dalam mode HTML5 tanpa pengalihan kembali ke indeks dan tidak ada solusi di luar sana yang memberi tahu saya cara melakukan ini, jadi ini yang saya lakukan:

Buat direktori virtual sederhana di IIS untuk semua rute Anda dan arahkan ke root aplikasi.

Bungkus system.webServer Anda di Web.config.xml Anda dengan tag lokasi ini, jika tidak Anda akan mendapatkan kesalahan duplikat dari itu memuat Web.config untuk kedua kalinya dengan direktori virtual:

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

Saya memeriksa dalam sudut 2 biji bagaimana cara kerjanya.

Anda dapat menggunakan express-history-api-fallback untuk mengarahkan ulang secara otomatis saat halaman dimuat ulang.

Saya pikir ini adalah cara paling elegan untuk menyelesaikan masalah IMO ini.

Jika Anda ingin menggunakan PathLocationStrategy:

• Konfigurasi wildfly:
  • Buat file undertow-handlers.conf untuk ditempatkan di WEB-INF
  • Konten: (kecualikan titik akhir istirahat Anda!)
    • regex ['(. / overview / ?. ? $)'] dan bukan regex ['(. / endpoints. )'] -> tulis ulang ['/ index.html']
    • regex ['(. / deployments / ?. ? $)'] dan bukan regex ['(. / endpoints. )'] -> tulis ulang ['/ index.html']

Aplikasi satu halaman dengan Java EE / Wildfly: konfigurasi sisi server

2017-July-11: Karena ini terkait dari pertanyaan yang memiliki masalah ini tetapi menggunakan Angular 2 dengan Electron, saya akan menambahkan solusi saya di sini.

Yang harus saya lakukan adalah menghapus <base href="./">dari index.html saya dan Elektron mulai memuat kembali halaman dengan sukses.

Tambahkan impor:

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

Dan di penyedia NgModule, tambahkan:

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

Di utama index.html File Aplikasi mengubah basis href ./index.htmldari/

Aplikasi ketika digunakan di server mana pun akan memberikan url nyata untuk halaman yang dapat diakses dari aplikasi eksternal apa pun.

Hanya menambahkan .htaccess di root diselesaikan 404 sambil menyegarkan halaman dalam sudut 4 apache2.

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

Saya pikir Anda mendapatkan 404 karena Anda meminta http: // localhost / rute yang tidak ada di server kucing jantan. Karena Angular 2 menggunakan perutean html 5 secara default daripada menggunakan hash di bagian akhir URL, menyegarkan halaman seperti permintaan untuk sumber daya yang berbeda.

Saat menggunakan perutean sudut pada kucing jantan, Anda perlu memastikan bahwa server Anda akan memetakan semua rute di aplikasi Anda ke index.html utama Anda saat menyegarkan halaman. Ada beberapa cara untuk mengatasi masalah ini. Mana pun yang Anda sukai, Anda bisa melakukannya.

1) Masukkan kode di bawah ini di web.xml dari folder penempatan Anda:

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

2) Anda juga dapat mencoba menggunakan HashLocationStrategy dengan # di URL untuk rute:

Coba gunakan:

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

Dari pada:

RouterModule.forRoot (rute)

Dengan HashLocationStrategy url Anda akan menjadi seperti:

http: // localhost / # / route

3) Katup Ulang URL Tomcat: Tulis ulang url menggunakan konfigurasi tingkat server untuk mengarahkan ulang ke index.html jika sumber daya tidak ditemukan.

3.1) Di dalam folder META-INF buat file context.xml dan salin konteks di bawahnya.

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

3.2) Di dalam WEB-INF, buat file rewrite.config (file ini berisi aturan untuk Penulisan Ulang URL dan digunakan oleh tomcat untuk penulisan ulang URL). Di dalam rewrite.config, salin konten di bawah ini:

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

Ini bukan jawaban yang tepat tetapi Di-refresh Anda dapat mengalihkan semua panggilan mati ke Homepage dengan mengorbankan 404 halaman itu adalah peretasan sementara hanya replay berikut pada file 404.html

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

Solusi terbaik untuk menyelesaikan "router-not-working-on-reload-the-browser" adalah bahwa kita harus menggunakan spa-fall back. Jika Anda menggunakan aplikasi angular2 dengan inti asp.net maka kita perlu mendefinisikannya di halaman "StartUp.cs". di bawah MVC routs. Saya melampirkan kode.

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

Jawabannya cukup rumit. Jika Anda menggunakan Server Apache lama (atau IIS), Anda mendapatkan masalah karena halaman Angular tidak ada secara nyata. Mereka "dihitung" dari rute Angular.

Ada beberapa cara untuk memperbaiki masalah ini. Salah satunya adalah dengan menggunakan HashLocationStrategy yang ditawarkan oleh Angular. Tetapi tanda yang tajam ditambahkan di URL. Ini terutama untuk kompatibilitas dengan Angular 1 (saya kira). Faktanya adalah bagian setelah tajam bukan bagian dari URL (maka server menyelesaikan bagian sebelum tanda "#"). Itu bisa sempurna.

Berikut metode yang disempurnakan (berdasarkan trik 404). Saya menganggap Anda memiliki versi "terdistribusi" dari aplikasi sudut Anda ( ng build --prodjika Anda menggunakan Angular-CLI) dan Anda mengakses halaman secara langsung dengan server Anda dan PHP diaktifkan.

Jika situs web Anda didasarkan pada halaman (Wordpress misalnya) dan Anda hanya memiliki satu folder yang didedikasikan untuk Angular (bernama "dist" dalam contoh saya), Anda dapat melakukan sesuatu yang aneh tetapi, pada akhirnya, sederhana. Saya berasumsi Anda telah menyimpan halaman Angular Anda di "/ dist" (dengan sesuai <BASE HREF="/dist/">). Sekarang gunakan pengalihan 404 dan bantuan PHP.

Dalam konfigurasi Apache Anda (atau dalam .htaccessfile direktori aplikasi sudut Anda), Anda harus menambahkanErrorDocument 404 /404.php

404.php akan dimulai dengan kode berikut:

<?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>"

di mana $angularnilai disimpan di HREF sudut Anda index.html.

Prinsipnya cukup sederhana, jika Apache tidak menemukan halaman, pengalihan 404 dibuat ke skrip PHP. Kami hanya memeriksa apakah halaman tersebut ada di dalam direktori aplikasi sudut. Jika demikian, kami hanya memuat index.html secara langsung (tanpa mengarahkan ulang): ini diperlukan untuk menjaga URL tidak berubah. Kami juga mengubah kode HTTP dari 404 menjadi 200 (hanya lebih baik untuk perayap).

Bagaimana jika halaman tersebut tidak ada dalam aplikasi sudut? Nah, kami menggunakan "catch all" dari router sudut (lihat dokumentasi router Sudut).

Metode ini bekerja dengan aplikasi Angular tertanam di dalam situs web dasar (saya pikir itu akan terjadi di masa depan).

CATATAN:

• Mencoba melakukan hal yang sama dengan mod_redirect(dengan menulis ulang URL) sama sekali bukan solusi yang baik karena file (seperti aset) harus benar-benar dimuat maka itu jauh lebih berisiko daripada hanya menggunakan solusi "tidak ditemukan".
• Hanya mengarahkan menggunakan ErrorDocument 404 /dist/index.htmlkarya tetapi Apache masih merespons dengan kode kesalahan 404 (yang buruk untuk perayap).

Ini bukan Perbaikan permanen untuk masalah tetapi lebih seperti solusi atau peretasan

Saya memiliki masalah yang sama ketika menerapkan Aplikasi Angular ke halaman-gh. Pertama saya disambut dengan 404 pesan saat Menyegarkan halaman saya di halaman gh.

Kemudian seperti yang ditunjukkan @ gunter, saya mulai menggunakan HashLocationStrategyyang disediakan dengan Angular 2.

Tapi itu datang dengan serangkaian masalah sendiri #di url itu benar-benar buruk membuat url terlihat aneh seperti ini https://rahulrsingh09.github.io/AngularConcepts/#/faq.

Saya mulai meneliti tentang masalah ini dan menemukan sebuah blog. Saya mencoba mencobanya dan berhasil.

Inilah yang saya lakukan seperti yang disebutkan di blog itu.

Anda harus mulai dengan menambahkan file 404.html ke repo halaman gh Anda yang berisi dokumen HTML kosong di dalamnya - tetapi total dokumen Anda harus lebih dari 512 byte (dijelaskan di bawah). Selanjutnya masukkan markup berikut di elemen kepala halaman 404.html Anda:

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

Kode ini menetapkan URL pintu masuk yang dicoba ke variabel pada objek sessionStorage standar dan segera mengalihkan ke halaman index.html proyek Anda menggunakan tag meta refresh. Jika Anda melakukan situs Github Organization, jangan letakkan nama repo di teks replacer atribut content, lakukan saja ini: content = "0; URL = '/'"

Untuk mengambil dan mengembalikan URL yang awalnya dinavigasi oleh pengguna, Anda harus menambahkan tag skrip berikut ke kepala halaman index.html Anda sebelum JavaScript lain bertindak pada keadaan halaman saat ini:

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

Sedikit JavaScript ini mengambil URL yang kami cached di sessionStorage pada halaman 404.html dan menggantikan entri riwayat saat ini dengannya.

Referensi backalleycoder Berkat @ Daniel untuk solusi ini.

Sekarang URL di atas berubah menjadi https://rahulrsingh09.github.io/AngularConcepts/faq

Saya memperbaiki ini (menggunakan Java / Spring backend) dengan menambahkan handler yang cocok dengan semua yang didefinisikan dalam rute Angular saya, yang mengirimkan kembali index.html alih-alih 404. Ini kemudian secara efektif (kembali) mem-bootstrap aplikasi dan memuat halaman yang benar. Saya juga memiliki pawang 404 untuk apa pun yang tidak tertangkap oleh ini.

@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";
    }
}

Jika Anda menggunakan Apache atau Nginx sebagai server, Anda harus membuat .htaccess

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