Path for templates in angular directive?

Question

I have created a directive for my angular app, in the directive I am using templateUrl to get the template.

templateUrl: 'templates/searchbox-template.html',

This worked fine on my local server but when I host it on firebase it gives this warning repeatedly-

WARNING: Tried to load angular more than once

Also the page gets stuck in a loop, repeatedly adding index.html to page. You can see the app here, if you go to the companies or jobs tab from the navigation bar which is where I have used the directive. I am not able to figure out what path should I use to stop this. Here is the structure of the app -

.
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   ├── styles
│   ├── templates
│   └── views
├── bower_components
│   ├── angular
│   ├── angular-mocks
│   ├── angular-route
│   ├── animate.css
│   ├── bootstrap
│   ├── jquery
│   └── jssocials
├── bower.json
├── dist
│   ├── 404.html
│   ├── favicon.ico
│   ├── fonts
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   └── styles
├── firebase.json


.
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   ├── controllers
│   │   ├── directives
│   │   └── services
│   ├── styles
│   │   └── main.css
│   ├── templates
│   │   └── searchbox-template.html
│   └── views
│       ├── about.html
│       ├── companiesall.html
│       ├── company.html
│       ├── contact.html
│       ├── jobsall.html
│       └── main.html

As you can see my template is in the templates folder. Please help me with this. Thank you.

Update - Accoring to this answer , the directive is not able to find the template hence loads the index.html again and again because of this -

.otherwise({
        redirectTo: '/'
      });

I just need to figure out the right path for the template.

This is contents of firebase.json json file -

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Answer 1

Does '/' map to the view main.html? If so, it sounds like your server is only serving files statically under the views directory and not allowing access to the templates directory. To test it, try taking the template from templates and put it under views, then change the templateUrl accordingly.

Just as you mentioned, Angular isn't able to access/find the directory so it defaults to the otherwise function, loading main.html which restarts the problem again and again ad infinitum.

Edit:

In case anyone else has this problem, the dist directory was the production version and used $templateCache to serve the views from a single file, but during the step in which the views were combined into one file the templates directory was not taken into consideration and so it was unable to be found. So in your Gruntfile.js, change src for templates to contain the other folder as well like this:

ngtemplates: {
      dist: {
        options: {
          module: 'jobSeekerApp',
          htmlmin: '<%= htmlmin.dist.options %>',
          usemin: 'scripts/scripts.js'
        },
        cwd: '<%= yeoman.app %>',
        src: ['views/{,*/}*.html', 'templates/{,*/}*.html'],
        dest: '.tmp/templateCache.js'
      }
    },