All geek questions in one place

AngularJS: Relative link paths break when html5mode (true) is enabled

I searched and I found "solutions" to this problem, but I still cannot get it to work correctly.

Scenario:

I create an Angular website (version 1.2) using a UI router and run it on the Node server on localhost. I am trying to make it a “pretty” url with $ locationProvider and turning html5 (true). My site works fine when I click on it, but when I try to go to the relative link path or update the link path, the page breaks. I also intend to deploy this webapp to Heroku upon completion:

RELATIVE COMMUNICATION:

http://localhost:8000/locksmith-services

PAGE OUTPUT RESULT

 Cannot GET /locksmith-services


The steps I took:

1.) In my "index.html" <head>, I set my base url to:

 <base href="/"></base>

2.) In my app.js file (for Angular), I wrote it as follows:

 // App Starts angular .module('app', [ 'ui.router', 'ngAnimate', 'angular-carousel' ]) .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state('home', { url: '/', templateUrl: 'pages/home.html', controller: 'homeCtrl' }) .state('services', { url: '/locksmith-services', templateUrl: 'pages/locksmith-services.html', controller: 'servicesCtrl' }) .state('locations', { url: '/locksmith-locations', templateUrl: 'pages/locksmith-locations.html' }) .state('payment', { url: '/locksmith-payment', templateUrl: 'pages/locksmith-payment.html' }) // use the HTML5 History API $locationProvider.html5Mode(true); }])

3.) In my navigation I have html written as:

 <div class="wrapper"> <a ui-sref="home"> <img src="images/logo.png" class="logo" alt="Austin Texas Locksmith" /> </a> </div> <nav class="row navigation"> <a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">Services</a> <a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a> <a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a> </nav>

4.) My file server.js (node ​​server)

 var express = require('express'); var app = express(); app.use(express.static(__dirname + '/front')); var port = process.env.PORT || 8000; app.listen(port);

What would be the best solution? Thanks in advance for your help.

+5
source share
2 answers

Thanks to @trehyu for helping me get the answer.

As he wrote, I need to configure something in my server.js file, which redirects the user to my "index.html" file.

So, depending on your file structure ...

BEFORE (not working)

 var express = require('express'); var app = express(); app.use(express.static(__dirname + '/front')); var port = process.env.PORT || 8000; app.listen(port);

AFTER (working)

 var express = require('express'); var app = express(); app.use('/js', express.static(__dirname + '/front/js')); app.use('/build', express.static(__dirname + '/../build')); app.use('/css', express.static(__dirname + '/front/css')); app.use('/images', express.static(__dirname + '/front/images')); app.use('/pages', express.static(__dirname + '/front/pages')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('/front/index.html', { root: __dirname }); }); var port = process.env.PORT || 8000; app.listen(port);

I hope this helps someone else!

+7
source

If HTML5mode is set to true, you need to configure something on your server, which automatically redirects the user to your index page so that the AngularJS user interface can take over from there.

The reason for this is that without a hash (#) in the URL, it takes it as a literal URL and tries to navigate there when you update or paste the URL directly.

I'm not very familiar with Node, so I'm not sure how you will do it, but there is a frequently asked questions page in the UI Router GitHub that should help you get started: https://github.com/angular-ui/ui- router / wiki / Frequently-Asked-Questions # how-to-configure-your-server-to-work-with-html5mode

+3
source

Source: https://habr.com/ru/post/1203501/

More articles:


All Articles