Angular halting after first ng-include in release mode

402 views Asked by At

I'm compiling an angular app using the yeoman/generator-grunt-angular system, which I have modified slightly to accommodate code shared with another app. "Release mode" is compiling all of the templates into the javascript, so that everything is loaded instantly. If I reference a template, like here:

<div ng-include="'components/navbar/navbar.html'" />
<div class="row">
  <div class="large-4 columns">
    <h3>Your Courses</h3>
    <div ng-include="'components/courses/course-list.html'" ng-controller="MyCoursesCtrl" />
    <form id="fileupload" 
          data-url="http://api.orienteer.io/upload_gpx"
          method="POST" enctype="multipart/form-data" 
          data-ng-controller="GpxFileUploadCtrl" 
          ng-submit="alert('gooo');">
      <span class="btn btn-success fileinput-button"  ng-class="{disabled: disabled}">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Upload a GPX File</span>
        <input type="file" name="gpx_file" ng-disabled="disabled">
        {{ status }}
      </span>
    </form>
  </div>
</div>

The templating halts after the first include. If I remove the first one, it halts after the second. The whole template is included, but nothing after it (in this case, the navbar is rendered, but nothing after it).

No errors are thrown, the templates are all happily residing in the template cache (as evidenced by the fact that they appear, they just stop behavior).

There are no problems with the code in development mode, and I am completely stumped as to how to debug this further. Is there some way I can switch on verbose logging, debugging, etc? I've already turned of code minification so I can read stuff, but without any errors being thrown, I don't know where to start.

EDIT Here are the versions of all of the dependencies that I'm using:

  "dependencies": {
    "modernizr": "2.8.x",
    "angular": "1.3.4",
    "jquery" : "1.x.x",
    "angular-animate" : "1.3.x",
    "angular-cookies" : "1.3.x",
    "angular-touch" : "1.3.x",
    "angular-sanitize" : "1.3.x",
    "angular-resource" : "1.3.x",
    "angular-ui-router" : "0.2.x",
    "angular-leaflet-directive" : "latest",
    "lodash" : "latest",
    "foundation" : "5.4.x",
    "jquery-file-upload" : "latest"
  },
2

There are 2 answers

2
Casper On BEST ANSWER

I was checking up on this subject today and I remembered a different notation used on W3Schools.

They used:

<div ng-include="'myUsers_Form.htm'"></div>

Instead of:

<div ng-include="'myUsers_Form.htm'" />

When I changed the first include to your style I encountered the same problem with the include after that one, but in the notation used by W3Schools its possible to include multiple files.

2
markthethomas On

Based on chat: A switch to more complete implementation of UI-router is likely to solve the apparent incompatibility w/ respect to the ng-include directive. https://github.com/angular-ui/ui-router