Python Flask Angular application state not refreshing

Question

I am working on flask + Angular + MongoDb application. I am using state provider in angular. states are loading perfectly fine from application. but when i refresh the page it is throwing 404 error.

App.py: (Flask)

   application = Flask(__name__)
    @application.route('/')
    def showMachineList():
        print ("Inside the show machine list function")
        return application.make_response(open('templates/index.html').read())

App.js ( Angular)

angular.module('testapp', ['ngCookies', 'ngResource',
        'ngSanitize', 'ui.router', 'ui.bootstrap','ngMaterial','ngCookies'
    ])
    .config(function($urlRouterProvider, $locationProvider,$interpolateProvider) {
        $urlRouterProvider.otherwise('/');
        //$interpolateProvider.startSymbol('//').endSymbol('//');
        $locationProvider.html5Mode(true).hashPrefix('!');
    });

State

angular.module('testapp')
  .config(function ($stateProvider) {
    console.log("inside create outage request")
    $stateProvider
      .state('cor', {
        url: '/cor',
        template: '<cor></cor>'
        //templateUrl: '/static/client/app/acn/acn.html'
      });
  });

I have added the <base href="/"> in index.html as well. when i refresh the page with "http://localhost:5000/cor" its throwing 404. Can you let me know what i am missing?

Adam Byrtek · Accepted Answer · 2017-05-06 12:57:09Z

1

This is fairly common problem with Single Page Applications. Looks like your Angular app can handle the cor state properly on the client-side, but your web server has no way to know that the /cor path should be routed to the same Angular application on the initial load.

Try adding a second route to your endpoint:

@application.route('/')
@application.route('/cor')
def showMachineList():
    ...

Alternatively, you could use a catch-all route to handle any path suffix.

answered May 6, 2017 at 12:57

Adam Byrtek

12.2k2 gold badges35 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Laurent LAPORTE · Accepted Answer · 2017-05-06 06:03:11Z

0

When you refresh the page the browser send the URL "http://localhost:5000/cor" to the server. As I can see in your code, there's no /cor route defined, only /. I think you have to define one.

@application.route('/cor')
def showMachineList():
    with open('templates/index.html') as fd:
        content = fd.read()
    return application.make_response(content)

The problem may be in your template: the one where you define the link to cor. You should have something like this:

<a href="#cor">link to cor</a>

I make the assumption that you have written this instead:

<a href="/cor">link to cor</a>

edited May 6, 2017 at 6:03

answered May 6, 2017 at 5:48

Laurent LAPORTE

23.2k7 gold badges64 silver badges111 bronze badges

2 Comments

Fla-Hyd Over a year ago

But i have defined in the state and i think it should have to load from the Angular state as well.

Laurent LAPORTE Over a year ago

You may have a bug in your HTML template.

Collectives™ on Stack Overflow

Python Flask Angular application state not refreshing

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related