Angular 2.0 routeur ne fonctionne pas sur recharger le navigateur

L'erreur que vous voyez est parce que vous demandez http://localhost/route qui n'existe pas. Selon Simon.

Lors de l'utilisation de html5 de routage, vous devez la carte de tous les itinéraires dans votre application(pour l'instant 404) pour index.html de votre côté serveur. Voici quelques options pour vous:

1. à l'aide de live-serveur: https://www.npmjs.com/package/live-server

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

2. l'aide de nginx: http://nginx.org/en/docs/beginners_guide.html

   error_page 404 /index.html

3. Tomcat - configuration de web.xml. De Kunins'commentaire

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


Angulaire, par défaut, utilise HTML5 pushstate (PathLocationStrategy Angulaire de l'argot).

Vous avez besoin d'un serveur qui traite toutes les demandes, comme il demandent index.html ou vous passez à HashLocationStrategy (avec # dans l'URL pour les routes) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

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

Pour passer à HashLocationStrategy utilisation

mise à jour pour >= RC.5 et 2.0.0 final

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

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

ou moins longtemps avec useHash

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

vous assurer d'avoir tout les importations

Pour la nouvelle (RC.3) routeur

<base href="."> 

peut causer 404 ainsi.

Il exige plutôt

<base href="/">

---

mise à jour pour >= 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';  

mise à jour pour >= beta.16 les Importations ont changé

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

< bêta.16

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

Voir aussi https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 rupture changements

C'est une situation courante dans tous les routeur versions si vous utilisez le code HTML par défaut emplacement de la stratégie.

Ce qui se passe, c'est que l'URL dans la barre du navigateur est complète normale url HTML, comme par exemple: http://localhost/route.

Donc quand nous sommes arrivés à Entrer dans la barre du navigateur, il y a un réel requête HTTP envoyée au serveur pour obtenir un fichier nommé route.

Le serveur n'a pas de tel fichier, et ni quelque chose comme express est configuré sur le serveur pour répondre à la demande et fournir une réponse, de sorte que le serveur retourne 404 not Found, car il ne pouvait pas trouver la route fichier.

Ce que nous souhaitons est que le serveur renvoie le index.html fichier contenant le single page application. Ensuite, le routeur devrait coup de pied dans les processus et les /route url et d'afficher le composant associé à.

Afin de résoudre le problème, nous avons besoin de configurer le serveur pour revenir index.html (en supposant que c'est le nom de votre page unique fichier de l'application) dans le cas où la demande ne peut pas être traitée, par opposition à un 404 not Found.

La façon de le faire dépend du côté serveur de la technologie utilisée. Si son langage de programmation Java par exemple, vous pourriez avoir à écrire une servlet, dans les Rails, il sera différent, etc.

Pour donner un exemple concret, si par exemple vous utilisez NodeJs, vous devez écrire un middleware comme ceci:

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

Et puis de l'enregistrer à la fin de la middleware de la chaîne:

app.use(sendSpaFileIfUnmatched);

Ce sera index.html au lieu de retourner une erreur 404, le routeur coup de pied dans et tout fonctionnera comme prévu.

Si vous voulez être en mesure de saisir les url dans le navigateur sans la configuration de votre serveur d'applications pour gérer toutes les demandes de index.html, vous devez utiliser HashLocationStrategy.

La façon la plus simple à faire est de configurer à l'aide de:

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

Au lieu de:

RouterModule.forRoot(routes)

Avec HashLocationStrategy votre url va être comme:

http://server:port/#/path

Si vous utilisez Apache ou Nginx comme serveur, vous devez créer un .htaccess (si pas créé avant) et "Sur" RewriteEngine

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

De configuration du serveur n'est pas une solution pour un SPA est ce que je pense. Vous ne voulez recharger angulaire SPA à nouveau si une mauvaise voie arrive, ne vous? Donc, je ne dépend pas d'un serveur de route et de les rediriger vers d'autres parcours mais oui, je vais laisser index.html répondre à toutes les demandes angulaire routes de l'angle d'application de chemin.

Essayer ceci à la place de l'autre ou de mauvaises routes. Il fonctionne pour moi, pas sûr, mais semble comme un travail en cours. Suis tombé moi-même lorsque confronté à un problème.

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

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

Cependant, n'oubliez pas de configurer votre serveur de dossiers et de droit d'accès dans le cas où vous avez HTML ou des scripts web qui ne sont pas de SPA. Sinon vous ferez face à des questions. Pour moi, quand face à des problèmes comme vous, c'est un mélange de la configuration du serveur et au-dessus.

Vous pouvez utiliser cette solution pour application moyenne, j'ai utilisé ejs comme moteur d'affichage:

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

et aussi de mettre en angulaires-cli.json

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

il fonctionnera correctement au lieu de

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

sa création problème avec db appels et retour index.html

Vous pouvez essayer ci-dessous. Il fonctionne pour moi!

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

Vous pouvez encore améliorer le chemin d'accès.substr(2) de diviser en routeur paramètres. Je suis en utilisant angulaire 2.4.9

J'ai voulu préserver le chemin de l'URL de sous-pages en mode HTML5, sans une redirection retour à l'index, et qu'aucune des solutions là-bas m'a dit comment faire, donc, c'est comment j'ai accompli:

Créer des répertoires virtuels dans IIS pour tous vos itinéraires et de les faire pointer vers la racine d'application.

L'enveloppe de votre système.serveur web dans votre Web.config.xml avec cet emplacement de la balise, sinon vous allez obtenir un double des erreurs de il Web de chargement.config un deuxième temps avec le répertoire virtuel:

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

Si vous souhaitez utiliser PathLocationStrategy :

• Wildfly de configuration :
  • Créer ressac des gestionnaires.fichier conf pour être placé dans le dossier WEB-INF
  • Contenu : (à l'exclusion de votre repos extrémités !)
    • regex['(./vue d'ensemble/?.?$)'] et pas de regex['(./les points de terminaison.)'] -> réécriture['/index.html']
    • regex['(./les déploiements/?.?$)'] et pas de regex['(./les points de terminaison.)'] -> réécriture['/index.html']

Single page application avec Java EE/Wildfly: côté serveur de configuration

Je pense que vous êtes l'obtention de 404 parce que votre demandez http://localhost/route qui n'existe pas sur le serveur tomcat. Comme Angulaire 2 utilise le html 5 de routage par défaut plutôt que d'utiliser des hachages à la fin de l'URL, l'actualisation de la page ressemble à une demande d'une autre ressource.

Lors de l'utilisation angulaire de routage sur tomcat, vous devez vous assurer que votre serveur de carte toutes les routes dans votre application à votre principale index.html tout en rafraîchissant la page. Il y a plusieurs façons de résoudre ce problème. Selon ce qui vous convient, vous pouvez aller pour cela.

1) Mettre de code ci-dessous dans web.xml de votre dossier de déploiement :

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

2) Vous pouvez également essayer d'utiliser HashLocationStrategy avec # dans l'URL pour les routes :

Essayez d'utiliser:

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

Au lieu de:

RouterModule.forRoot(routes)

Avec HashLocationStrategy votre url va être comme:

http://localhost/#/route

3) Tomcat de Réécriture d'URL de Valve : Ré-écrire l'url à l'aide d'un serveur de configuration au niveau de la redirection index.html si la ressource n'est pas trouvée.

3.1) à l'Intérieur de répertoire META-INF de créer un fichier context.xml et copiez le contexte ci-dessous à l'intérieur.

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

3.2) à l'Intérieur de WEB-INF, de créer le fichier de réécriture.config(ce fichier contient la règle de Réécriture d'URL et utilisé par tomcat pour la réécriture d'URL). À l'intérieur de réécriture.config, copiez le contenu ci-dessous:

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

Ce n'est pas la bonne réponse mais Sur d'actualisation vous pouvez rediriger tous morts, des appels à la page d'Accueil en sacrifiant une page 404, c'est un temporaire hack viens de relire la suite sur 404.html fichier

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

2017-juillet-11: Puisque c'est lié à partir d'une question ayant ce problème, mais en utilisant Angulaire 2 avec de l'Électron, je vais ajouter ma solution ici.

Tout ce que j'avais à faire était de supprimer <base href="./"> de mon index.html et de l'Électron commencé à recharger la page à nouveau avec succès.

Ce n'est pas une solution permanente au problème, mais plus comme une solution de contournement ou hack

J'ai eu ce même problème lors du déploiement de mon Angulaire Application à la gh-pages.
J'ai d'abord été accueillie avec 404 messages lors de l'actualisation de mes pages sur gh-pages.

Alors que ce que @gunter a souligné j'ai commencé à utiliser HashLocationStrategy qui a été fourni Angulaire 2 .

Mais qui est venu avec son propre ensemble de problèmes de la # dans l'url, il était vraiment mauvais fait l'url look bizarre comme cette https://rahulrsingh09.github.io/AngularConcepts/#/faq.

J'ai commencé des recherches sur ce problème et suis tombé sur un blog. J'ai essayé de donner un coup de feu et il a travaillé .

Voici ce que j'ai fait comme indiqué dans ce blog.

Vous aurez besoin pour commencer par l'ajout d'un 404.html fichier sur votre gh-pages repo
qui contient un vide document HTML à l'intérieur – mais votre document
doit un total de plus de 512 octets (expliqué ci-dessous). Ensuite, posez le
balisage suivant dans votre 404.html la page de l'élément de tête:

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

Ce code définit la tentative d'entrée de l'URL d'une variable sur l'
standard sessionStorage objet et redirige immédiatement à votre
du projet index.html la page à l'aide d'une balise meta refresh. Si vous êtes en train de faire un
Github Organisation du site, ne pas mettre une pension de nom dans le contenu
attribut de remplacement de texte, il suffit de faire ceci: content="0;URL='/'"

Pour la capture et la restauration de l'URL au début, l'utilisateur de naviguer
pour, vous aurez besoin d'ajouter la balise de script suivante en tête de votre
index.la page html avant toute autre JavaScript actes sur la page en cours
état:

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

Ce peu de JavaScript récupère l'URL nous avons mis en cache dans le sessionStorage
plus de sur la 404.html page et remplace l'actuelle entrée de l'historique avec
c'.

Référence backalleycoder Grâce à @Daniel pour cette solution de contournement.

Maintenant l'URL ci-dessus modifications https://rahulrsingh09.github.io/AngularConcepts/faq

Ajouter des importations:

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

Et dans NgModule fournisseur, ajouter:

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

Principal index.html Fichier de l'Application de modifier la base href aux ./index.html de /

L'Application déployée sur n'importe quel serveur vous donnera une véritable url de la page qui peut être consulté à partir de n'importe quelle application externe.

Si vous utilisez Apache ou Nginx comme serveur, vous devez créer un .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>