0

I have a very large modularized AngularJS Application. I setup Grunt to create a single JS file from the multiple html files using html2js.

    html2js: {
        options: {
            base: 'dol',
            module: 'dol.templates',
            singleModule: true,
            useStrict: true,
            htmlmin: {
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true
            }
        },
        main: {
            src: ['app/modules/reporting/views/*.html'],
            dest: 'tmp/templates.js'
        }
    },

I then run concat on all of my js files and that newly created templates.js file:

    concat: {
        options: {
            separator: ';'
        },

        dist: {
            src: ['tmp/*.js', 'app/app.js', 'app/app.controller.js', 'app/common/directives/directives.js', 'app/app.factory.js', 'app/modules/reporting/controllers/reports.controller.js', 'app/modules/reporting/reports.routes.js', 'app/xenon.custom.js'],
            dest: 'dist/app.js'
        }
    },

I now have one file with all of my js files and html files: app.js

I am referencing that dist/app.js file in my index.html

The issue I am having is inside my application I reference some of the HTML files like such:

// Layout Related Directives
directive('reportsSummary', function () {
    return {
        restrict: 'E',
        templateUrl: appHelper.templatePath('modules/reporting/views/reportssummary.view')
    };
}).
directive('reportsSidebarMenu', function () {
    return {
        restrict: 'E',
        templateUrl: appHelper.templatePath('modules/reporting/views/reports.sidebar.menu')
    };
}).
directive('reportsFooter', function () {
    return {
        restrict: 'E',
        templateUrl: appHelper.templatePath('modules/reporting/views/reports.footer')
    };
});

When I run my deployed application, I get an error stating that it cannot find those files. When I run my app locally, it runs fine because the files reside in the proper paths.

Question is: When deploying the app, how do I reference those html files in my code since they now reside in dist/app.js

I also reference the html files in my ui-router: (function () { 'use strict';

angular
    .module('dol')
    .config(reportsConfig);

reportsConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

function reportsConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/reports');

    $stateProvider.state('reports',
        {
            url: '/reports',
            templateUrl: 'app/modules/reportspage/views/reports.view.html',
            controller: 'reportsController'
        });
}

})();

anad2312
  • 787
  • 2
  • 8
  • 20

1 Answers1

0

Try using ngtemplates in your grunt task:

https://www.npmjs.com/package/grunt-angular-templates

Preston Van Loon
  • 1,061
  • 6
  • 11
  • I do not want to cache the templates. Furthermore, if I combine them all into one .js file, how would my ui-router access that html file from inside the newly created app.js file? My ui-router uses this relative path to find the html file: templateUrl: 'app/modules/reportspage/views/reports.view.html' Now that all my html is combined into one file in the dist/app.js file, how does my ui-router know to look in the dist/app.js file versus the specified relative path? When I run it locally, the html files all exist, but when I combine the html files on deployment, I use dist/app.js. – anad2312 Jul 10 '15 at 20:27
  • 1
    Why wouldn't you want to cache the templates? The template cache essentially says "if you are looking for `app/modules/reportspage/views/reports.view.html`, here it is" and returns the body of the html page. – Preston Van Loon Jul 10 '15 at 21:05