HTML template not found [duplicate]

Question

This question already has an answer here:

• angularjs unable to find templates directory, flask as backend 1 answer

I get page not found error when I try to load an injected page from my templates folder. index.html page is the page launched by default when I start the server and it also contains ng-view, so I can inject the pages specified in the angular config.

Here is my project structure:

 angular_routing/
      flask_service.py
      static/
        script.js
      templates/
        index.html
        home.html
        ....

This is my angular routing:

// configure our routes
    scotchApp.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'templates/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'templates/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'templates/contact.html',
                controller  : 'contactController'
            })

            .otherwise({
                templateUrl: '/',
                controller: 'mainController'
            });
//            $locationProvider.html5Mode(true);
    });

BTW, I tried prefixing the templateUrl with a '/' but it didn't work either.

Answer 1

The templates folder is for template files that will be rendered by Jinja from Flask. They are not served as normal static html files that would be accessible to Angular. Move the Angular templates to the static folder and access them from there. You can generate the urls with url_for if you're rendering the Angular routing code in a Jinja template.

templateUrl: '{{ url_for('static', filename='angular_templates/home.html') }}'
// or if the Angular is complete separate from Flask/Jinja,
// you'll have to just write out the path
templateUrl: 'static/angular_templates/home.html',

Answer 2

Check if the router is accessing the right pages. You can do this in Chrome via the developer console, then the Network tab.