2017-02-21 2 views
0

J'ai deux ou trois sites dans mon s3 + CloudFront, par exemple:Ouvrir dans un nouvel onglet ne fonctionne pas comme prévu avec le site Web statique s3 et CloudFront

  • www.example.com/test/#/
  • www.example.com/test1/#/

www.example.com est le seau principal, le test et test1 étant les dossiers ci-dessous et sites séparés.

Maintenant, le problème est lorsque j'essaie d'ouvrir quelque chose dans un nouvel onglet, par exemple le tableau de bord. Quand est la navigation normale l'url devient: www.example.com/test/#/dashboard et cela fonctionne parfaitement. Mais quand est un nouvel onglet, il supprime le test, en devenant: www.example.com/#/dashboard et en me donnant un 404.

Est-ce un problème de configuration angulaire? Ou cloudfront et s3 problème?

Modifier, certaines des routes du code de configuration ci-dessous:

$urlRouterProvider.otherwise("/"); 
$stateProvider 
    .state('home', { 
    url: '/', 
    templateUrl:'test/javascripts/templates/welcome/views/welcome.html', 
    controller: 'WelcomeController' 
    }) 
    .state('dashboard', { 
    url: '/dashboard', 
    templateUrl: 'test/javascripts/templates/dashboard/views/dashboard.html', 
    controller: 'DashboardController' 
    }) 
+0

Il semble que ce soit un problème lié aux URL '#' angulaires. Pls collez vos routes et code pour vérifier. – Sravan

+0

@Sravan Ajouté le code le plus pertinent du fichier de routes ... –

Répondre

2

L'erreur semble être le problème avec le #URL's

Ajouter $locationProvider.html5Mode(true); au fichier de configuration.

app.config(["$stateProvider","$locationProvider", function($stateProvider,$locationProvider) { 

     $urlRouterProvider.otherwise("/"); 
     $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl:'test/javascripts/templates/welcome/views/welcome.html', 
      controller: 'WelcomeController' 
     }) 
     .state('dashboard', { 
      url: '/dashboard', 
      templateUrl: 'test/javascripts/templates/dashboard/views/dashboard.html', 
      controller: 'DashboardController' 
     }) 

    $locationProvider.html5Mode(true).hashPrefix('!') 
    }]); 

Maintenant, vous devez indiquer au navigateur du changement, de sorte que vous devez définir base href dans la balise HEAD.

<base href="/">

CHeck this link for more information

+0

Je vais mettre votre réponse à plat parce que cela m'a aidé un peu, mais j'ai ajouté la solution que j'ai trouvé, Merci quand même =) –

+0

@GustavoGabriel, np, la finale chose qui est nécessaire pour obtenir la solution. Content de vous aider. :) – Sravan

0

réponse @Sravan me souvenu de la base balise href dans le code HTML d'index, que j'avais fixé il y a longtemps. Je l'ai eu comme ceci:

<base href="/"> 

Mais puisque je travaille avec des dossiers à s3, je pense que le/pointait à la base de mon url et le retrait du test de l'URL. Donc, je devais juste supprimer le/devenant:

<base href="">