ngRoute breaking when accessing a specific url

Question

Hello! I have a problem in ngRoute that I can not understand the reason.

Basically, when I try to access a route-specific URL from outside the application (not from an application link), I get the message Cannot GET/route.

My definition of route is as follows::

$routeProvider
  .when('/', {
    templateUrl: '/app/views/home.view.html',
    controller: 'MainController'
  })
  .when('/rota', {
    templateUrl: '/app/views/rota.view.html',
    controller: 'RotaController'
  })
  .otherwise({
    redirectTo: '/'
  });

$locationProvider.html5Mode(true);

When access http://localhost:3000/route, should render the 'route.view.html' view, but I get the error Cannot GET/route on screen and this console error:

Refused to execute inline script because it violates the following Content Security Policy Directive: "default-src 'self'". Either the 'unsafe-inline' keyword, the hash ('sha256-hzYGow+v/Bzjilvldnivqfrdxcaye9apuyt6mni40fq=') or a nonce ('nonce-...') is required to enable inline Execution. Also note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

If I access this route from within the application (by a navbar link, for example), I need to put /#/route to work. The idea of html5Mode would be to take this # of the route, but it is not possible, as it gives error without it.

Answer 1

I believe you have not configured your server to rewrite the routes to the application.

A basic rule is usually made so that if the server receives a request that results in a 404, it redirects to the index.html of your app.

For when accessing /rota, the server will search for a file in the following path /rota/index.html which will result in a 404 server.

Setting the rule for when to give one 404 redirect to your index.html, the server will search for the /rota/index.html, but before sending the 404 in Sponse, he will try to get the index.html defined in the rule.

Finding him, the index.html will be sent in Sponse to the route /rota.

So your app will initialize and verify that this with the route /rota address bar and internally resolve to the correct route within the app.

Take a look at the doc: https://docs.angularjs.org/guide/$Location#server-side