Angular state provider not displaying full URL - angularjs

Question

I just inherited an application where there are several ui-sref="portal.main.content" in the code.
What I'm confused about is, to navigate to this state, we need to enter /#/portal/main/content.
However it is rendered on the page without the #. So it will work when clicking on the page, however it won't work if I try to open into a new tab as that page doesn't exist. What am I missing here?

Answer 1

The problem comes from the fact that your application is served from a server environment that deals with urls as if they were real paths for real resources on the server file system. Therefore, when your are in a single page, it's not reloaded when you navigate to another state url, because ui-router handle this internally, consequently doesn't produce 404 or 403 errors, but when you load a page first time, it's required from the server and gives you 404 and 403 errors because the resource you're looking for doesn't exists or is forbidden.
What you have to do is to configure your server side environment to target the index.html page when your are not refering to a file (like css and js files), so all url will end up in the index.html page with an url to be handled by the ui-router. Each server side technology (Apache, IIS, node.js, etc) will have a different way to handle this, but mostly have a URL Rewrite module and similar ways to handle this.
Also, if it's not a problem by using the hash like url, you can disable html5Mode to prevent ui-router to do such thing. You can achieve this by injecting $locationProvider on your .config and disabling it like so: $locationProvider.html5Mode(false);
For example:
angular.module('myApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'aboutCtrl'
});
$locationProvider.html5Mode(false);
});