Angular2 - Lors de l'actualisation de la page, l'url reste la même mais la vue n'est pas chargé

Dans Angular2, je suis confronté à ce problème. Lorsque vous actualisez la page. L'URL reste la même mais il ne charge pas vue appropriée dans RouterOutlet.

Tout fonctionne bien sauf l'actualisation d'une page question.

app.ts

import {Component,bind} from 'angular2/core';

import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import{HomeCmp} from 'Angular/src/Home/home.ts';
import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';

import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
selector: 'micropuppy-app',
templateUrl: "ANGULAR/Templates/home.html",
directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
template: ` <nav>
                    <ul class="nav navbar-nav">
                    **<li><a [routerLink]="['Home']">One</a><hr/></li>
                     <li><a [routerLink]="['ContactUs']">Contact Us</a></li>**
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Technologies <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Angular</a></li>
                            <li><a href="#">.NET</a></li>
                        </ul>
                    </li>
            </ul>
        </nav>

    <router-outlet></router-outlet>`
 })

@RouteConfig([
  {path:'/Home', name: 'Home', component: HomeCmp}
  {path:'/ContactUs', name: 'ContactUs', component: ContactUsCmp}
])

export class MicropuppyApp {
    constructor(){
        console.log("Micropuppy app started");
    }
}
 bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)]);
Double Possible de Angular 2.0 routeur ne fonctionne pas sur recharger le navigateur

OriginalL'auteur nyks | 2016-01-29

  1. 2

    Avec la stratégie par défaut (HTML5 histoire de l'API) de routage, vous avez besoin d'une configuration de serveur pour rediriger tous vos chemins d'accès à vos HTML, point d'entrée de fichier. Avec le hashbang approche, il n'est pas nécessaire... Si vous souhaitez vous passer de cette approche, il suffit d'utiliser le code suivant:

    import { bootstrap } from "angular2/platform/browser";
import { provide } from "angular2/core";
import {
  ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy
} from "angular2/router";

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

    Vous pourriez avoir un coup d'oeil à ces questions au sujet de cette question:

    Espère que cela vous aide,
    Thierry

    il fonctionne comme prévu. mais avec cette approche, il ajoute # symbole qui n'a pas l'air bon pour une réelle application. J'ai déjà ajouté <base href="/">. Merci de guide.
    Oui, en fait, avoir le symbole # est le prix pour ne pas avoir quelque chose à faire sur le serveur 🙁 je suis d'accord avec vous que l'Url avec la hashbang approche ne sont pas aussi propre qu'avec le PathLocationStrategy (par défaut). Mais si vous avez besoin de la plus tard, il est nécessaire d'avoir la redirection de trucs sur le côté serveur. Cela dépend de votre plate-forme serveur. Firebase permet de faire cela en quelques lignes de code 😉
    Quelle est la version mise à jour de ce code?

    OriginalL'auteur Thierry Templier

  2. 1

    Même j'ai été coincé dans la même situation où, d'actualiser Angular2 application a été l'échec du chargement.

    La raison derrière cette question est Angular2 routeur utilise l'histoire de l'API pour le routage en raison de laquelle, sur l'actualisation de la route App impossible de trouver index.html et montrer 404 ou ne peut pas OBTENIR l'URL demandée.

    vous pouvez travailler autour de deux façons:

    1. Hashbang technique à l'aide de HashLocationStrategy mais l'URL est de mauvaise qualité due à présent de hachage.

    2. Ici comment j'ai travaillé dessus:

    - Je utiliser Node.js pour servir la demande.

    En supposant que vous avez Nœud et Npm installé.

    paquet.json pour l'installation de modules requis.

    {
  "name": "Express server",
  "version": "",
  "dependencies": {
    "express": "^4.14.0"
  }
}

    créer server.js dans votre répertoire de projet.

    var express = require('express');
var app = express();

app.use(express.static('dist')); 
//'dist' is my build folder, you can add yours. this will take care of all static files.

app.use('/*', express.static('dist/index.html')); 
//This will make sure that every route should serve index.html first 

app.listen(8080, function () {
    console.log('app listening on port 8080!!')
});

    Utiliser la commande suivante pour démarrer votre serveur d'application.

    node server.js

    Maintenant, chaque demande est transmise par l'intermédiaire de votre serveur d'Application qui fera en sorte qu'à chaque actualisation/reload index.html servi qui va stimuler angulaire App.

    OriginalL'auteur jigar gala

  3. 0

    J'ai réussi à résoudre ce problème en mettant ce code sur le dessus de la tête dans le index.html sous <title> mettre 

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

    OriginalL'auteur Shadowbob

  4. 0

    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>

    OriginalL'auteur user6250141

  5. -1

    Si vous ne voulez #, allez y avec "PathLocationStrategy'. Il est quelque peu similaire à HashLocationStratedy.
    L'espoir, ce lien va vous aider à Angular2 de routage.

    il ne fonctionne pas non plus.
    J'ai pensé que vous avez manqué quelque chose.Suivez les étapes mentionnées dans ce lien. Il fonctionne très bien pour moi.

    OriginalL'auteur Bharathi Mohan