6

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"
      }
    ]
  }
}
Community
  • 1
  • 1
doctorsherlock
  • 1,334
  • 4
  • 19
  • 41
  • Does that template contain the ng-app directive by chance? That message can happen if you've already got ng-app in the main template then try to load another one that has ng-app in it. – stevenelberger Sep 04 '16 at 17:14
  • No, ng-app is only in the index.html file. – doctorsherlock Sep 04 '16 at 17:17
  • Depends on your server configuration, but if `'/'` refers to `index.html` in your root directory, then I'd imagine the correct path would be `'/templates/searchbox-template.html'` – stevenelberger Sep 04 '16 at 17:24
  • I tried this, not working. – doctorsherlock Sep 04 '16 at 17:30
  • 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. – stevenelberger Sep 04 '16 at 17:37
  • Yeah , you are right. It works if I put it in views folder. So is there a way to serve files from other folders as well? – doctorsherlock Sep 04 '16 at 17:44
  • Of course, but how you do that depends on your server. What are you using? I'll also write the solution to the problem you had here below. – stevenelberger Sep 04 '16 at 17:46
  • I am using firebase, so basically i just do `grunt build` which created the `dist` folder and the host it on firebase using `firebase deploy`.I dont have to anything else. I am adding the firebase config file, maybe that will help. – doctorsherlock Sep 04 '16 at 17:49
  • I don't see the `dist` directory above. Is it the parent directory to `app`? If it doesn't exist, I'd change `dist` to `app` instead. You want the entire `app` directory to be public. – stevenelberger Sep 04 '16 at 17:52
  • `dist` folder is at the same level as `app`. I am adding the full structure of the directory to the question. – doctorsherlock Sep 04 '16 at 17:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122624/discussion-between-stevenelberger-and-doctorsherlock). – stevenelberger Sep 04 '16 at 18:02

2 Answers2

2

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'
      }
    },
stevenelberger
  • 1,368
  • 1
  • 10
  • 19
0

Don't redirect to index page. because your app is running on index.html
So whenever you will redirect to index page the app will start again.
Instead of that use some another page with blank url and redirect to it.
Like:-
create one js as main.js or home.js with blank url, like '/'.
So whenever you ll redirect to '/' your app will not initiate again and again. and you ll not get any such warning.

ojus kulkarni
  • 1,877
  • 3
  • 25
  • 41