使用Grunt html2js和concat，如何從concat js文件引用HTML文件

Question

我有一個非常大的模塊化AngularJS應用程序。 我將Grunt設置為使用html2js從多個html文件創建一個JS文件。

    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'
        }
    },

然后，我在所有js文件和新創建的template.js文件上運行concat：

    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'
        }
    },

我現在有一個包含所有js文件和html文件的文件：app.js

我在index.html中引用了dist / app.js文件

我遇到的問題是我的應用程序內部，我引用了一些HTML文件，例如：

// 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')
    };
});

運行部署的應用程序時，出現錯誤，指出它找不到那些文件。 當我在本地運行我的應用程序時，它運行良好，因為文件位於正確的路徑中。

問題是：部署應用程序時，如何在代碼中引用這些html文件，因為它們現在位於dist / app.js中

我還在ui路由器中引用了html文件：（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'
        });
}

}）（）;

Answer 1

嘗試在您的grunt任務中使用ngtemplates：

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