0

File Structure:

--app
  --partials
    --navbar.html
 --submit
    --submission.html
index.html

I have an ng-include inside of my submissions.html:

<ng-include src="'app/partials/navbar.html'" ></ng-include>

Nothing shows up. However, if I stick the same thing into index.html, the navbar shows up. I thought it might have to do with relative apths to the current html file, so I tried src="'../partials/navbar.html'" with no luck either.

Is there something special that needs to be done to get an ng-include to show inside of an ng-view template?

Similar Questions that did not help:

Community
  • 1
  • 1
Douglas Gaskell
  • 9,017
  • 9
  • 71
  • 128
  • are you sure the template is loading? Are you using html5mode in routing? – charlietfl Sep 28 '16 at 23:03
  • @charlietfl the template in the `ng-include` does not even load when the `ng-include` is inside of the `ng-view`. – Douglas Gaskell Sep 28 '16 at 23:07
  • but the template will load without it? if so that's really weird...but it sounds more like the route is failing. You can add a route change error handler to find out – charlietfl Sep 28 '16 at 23:09
  • @charlietfl Davids comment about using `~/` worked. – Douglas Gaskell Sep 28 '16 at 23:12
  • should only need the `/`. In future...simple way to check is in browser dev tools network ...can see all requests and paths there. Would have been returning a 404 – charlietfl Sep 28 '16 at 23:12
  • @charlietfl it was a false positive, I added the ng-include to index.html for a sec and though it was working. – Douglas Gaskell Sep 28 '16 at 23:14
  • look in dev tools network and get more clues – charlietfl Sep 28 '16 at 23:15
  • @charlietfl I did, that's how I know it's not loading at all. – Douglas Gaskell Sep 28 '16 at 23:16
  • are you using html5mode and if so have you set a base tag? Again...the clues are in dev tools network – charlietfl Sep 28 '16 at 23:16
  • Yes and yes. I also tied putting the navbar.html in the root and referencing that with no success. :/ – Douglas Gaskell Sep 28 '16 at 23:22
  • all i can say again is inspect the requests themselves – charlietfl Sep 28 '16 at 23:25
  • There is no request for the file at all unless the ng-include is in index.html. – Douglas Gaskell Sep 28 '16 at 23:25
  • then the route is probably not working probably..any request for route template? As per my prior suggestion add a route change error handler and find out what it tells you – charlietfl Sep 28 '16 at 23:31
  • The routes route between the templates just fine, I can go from one route to the next and their templates load.. Any `ng-include` s inside of them do not, and there are no requests for the files in the ng-include src. Sorry, I do have a `$routeChangeError` handler and there are no errors. – Douglas Gaskell Sep 28 '16 at 23:36
  • have you tried different browsers? is the ng-inclde tag in the live html? – charlietfl Sep 28 '16 at 23:39
  • I have not tried a different browser, the ng-include tag is not in the HTML. I'm probably gonna open a bounty on this once I can, the whole thing is making very little sense to me. I've found working examples that are no different. – Douglas Gaskell Sep 28 '16 at 23:39
  • oh yeah... it may have been replaced with a comment in live html. angular does that with some directives – charlietfl Sep 28 '16 at 23:40
  • Oh dear. It works on Edge, but not in Chrome. Chrome 53.0.2785.116 m to be exact. Trying firefox once it downloads – Douglas Gaskell Sep 28 '16 at 23:41
  • is angular version fairly recent? – charlietfl Sep 28 '16 at 23:43
  • Angular v1.5.8. Completely cleared Google Chromes cache and all other data and it now works. That seems... like a potential issue. – Douglas Gaskell Sep 28 '16 at 23:45
  • simple fix for that is disable cache in dev tools...always recommended – charlietfl Sep 28 '16 at 23:46
  • Will definitely do, you've been so helpful . You can just answer with clearing cache as that's what ended up working and I'll accept it. Will that be an issue for users though? Just for kicks, I changed the location of the ng-include in the file and the location of the navbar did not change till I cleared my cache. – Douglas Gaskell Sep 28 '16 at 23:48

2 Answers2

0

Angular cannot find "app" in the directory path. Try adding a tilde at the beginning:

<ng-include src="'app/partials/navbar.html'" ></ng-include>

Should be:

<ng-include src="'~/app/partials/navbar.html'" ></ng-include>
Raydot
  • 1,458
  • 1
  • 23
  • 38
  • Dave, the double quote is necessary for ng-include to work with a path as I'm passing in the path as a string. Without it it doesn't work at all, anywhere. I already mentioned that this works, just not inside of `ng-view` – Douglas Gaskell Sep 28 '16 at 22:54
  • this is incorrect `src` in this case reads an expression...the extra quote is needed to denote string – charlietfl Sep 28 '16 at 23:01
  • Oh crikey, you're right. So then my second suspicion is that the Angular doc can't "see" the App path. Index can see it because the two files are at the same level but maybe you need a leading Tilde or Slash: or – Raydot Sep 28 '16 at 23:06
  • @DaveKaye it was the tilde! I never thought to try that, I tried the slash, but no tilde. What does that even do? – Douglas Gaskell Sep 28 '16 at 23:09
  • ~/ navigates from the server "base" path. – Raydot Sep 28 '16 at 23:10
  • browser ignores tilde...that's an mvc server side thing – charlietfl Sep 28 '16 at 23:12
  • Yes, browser has it's own version of where "root" is located but many add-on languages (Perl, PHP, Angular) will accept tilde as the "base" path per the Unix standard since like the late 70's. – Raydot Sep 28 '16 at 23:14
  • @DaveKaye I am so sorry. It was a false positive, right before I checked it I added it back to index.html to test something else :/ – Douglas Gaskell Sep 28 '16 at 23:14
  • Well, I'm still betting it's something like that. Have you defined your paths to Angular? – Raydot Sep 28 '16 at 23:14
  • @DaveKaye I've defined the routeProvider paths, if that's what you mean. That how I get to the submit page. – Douglas Gaskell Sep 28 '16 at 23:23
  • Do you get an error message in the JS console? Can you post your code to Plunker? – Raydot Sep 28 '16 at 23:24
  • No errors, no request for the file either, I cannot post the code in a working fashion to plunker without sharing internal code. Though I did find this plunkr that does exactly what I am trying to do, except that it works. Puzzling over that now. http://plnkr.co/edit/XaPLhjQPUBgZZryzFW1U?p=preview – Douglas Gaskell Sep 28 '16 at 23:37
  • In the plunk all files are at the same level. Does it help to back up to App? ../../App/etc... – Raydot Sep 28 '16 at 23:41
0

The issue turned out to be my browser cache in Google Chrome. The ng-include was not showing up in the HTML untill I manually cleared my cache. Each time the ng-include is changed or moved in that file, I have to clear my cache, this is not necessary if it is in index.html.

After some testing, this issue does not exist in Edge, but it does exist in Firefox.

Chrome version: 53.0.2785.116 m

Douglas Gaskell
  • 9,017
  • 9
  • 71
  • 128