Angular + Ionic loading all content via XHR

Question

We have an Angular + Ionic app that we are planning on running through Cordova, but having an issue with performance that we are trying to track down.

What we are seeing in Chrome Dev tools Network tab when running either locally or on the built app, is the following:

• Duplicate loading of CSS
• XHR requests to get every single template file our Angular UI router links to, without having visited the routes yet

As an example:

And line 3167 (indicated with a star) from the angular.js source:

append: function(element, node) {
    var nodeType = element.nodeType;
    if (nodeType !== NODE_TYPE_ELEMENT && nodeType !== NODE_TYPE_DOCUMENT_FRAGMENT) return;

    node = new JQLite(node);

    for (var i = 0, ii = node.length; i < ii; i++) {
        var child = node[i];
        element.appendChild(child); *
    }
},

I've never seen anything like it - we've checked all the basics (duplicate script/css includes, etc), disabled Ionic caching, etc.

I'm stripping things down to the studs to see what could be causing this, but hoping someone else has seen this and can offer some advice on where to start looking.

UPDATE

The duplicate CSS appears to be due to our index.html file which bootstraps our Angular App was incorrectly pointed to as a state in the UI Router config.

So the root issue is the spurious/unexpected XHR pulls to all of the static files in the app (angular ui templates, directive templates).

Answer 1

The way I deal with html templates is to cache them all at compile time using gulp-ng-templates or grunt-angular-templates (depending which flavor of task manager you like nowadays).

Since we are dealing with apps, the content should better be eager-loaded rather than lazy-loaded (as long as you count their total size in MB), thus saving some bandwidth and improving the overall user experience. In addition it might just fix your issue.

The beauty of caching the templates at compile time is that your implementation doesn't need to know where they are coming from (server or the caching layer), and thus you don't need to change any code.

P.S. I understand that my answer will not fix your actual problem, but it might just solve 2 issues at the same time.

Answer 2

Well, when a state is activated, the templates are automatically inserted into the ui-view of its parent state’s template.

You should check how you have defined your states. And/or share your state definitions with us :)