I've recently developed a directive for my Angular app, using templateUrl to access the template. Everything worked smoothly on my local server, but upon hosting it on Firebase, an error message kept popping up -
WARNING: Tried to load angular more than once
In addition, the page seemed stuck in a loop, consistently adding index.html to the URL. You can take a look at the app here. If you navigate to the companies or jobs tab from the navigation bar, you'll notice where the directive is employed. I'm struggling to determine the correct path that would resolve this issue. Below is the app's structure -
.
├── 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 mentioned, the template resides in the templates folder. Any assistance would be greatly appreciated. Thank you.
Update - Following this informative response, it appears that the directive is unable to locate the template, thereby repeatedly loading the index.html due to the snippet below -
.otherwise({
redirectTo: '/'
});
All I need to do is identify the exact path for the template.
This represents the contents of the firebase.json file -
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}