ui-Router templateUrl not able to find $templateCache template in app-release.js

Question

I use Gulp-angular-templatecache to cache my html templates into templates-cache.js and then I use Gulp-browsify to compile my app.js file to generate app-release.js file which contains all the code from both app.js and templates-cache.js files.

app.js includes all the dependencies including the generated templates-cache.js file but ui.route is unable to call the html files on templateUrl I followed angular guide at https://docs.angularjs.org/api/ng/service/$templateCache but I am still unable to find the issue.

app.js

import angular from "angular";
import uiRouter from "@uirouter/angularjs";
let template = require("../../templates-cache.js");

let app = angular.module("app", [uiRouter]);

app.config(function ($stateProvider) {

    let Default = {
        name: "default",
        url: "/",
        templateUrl: "home.html"
    };

    let Home = {
        name: "home",
        url: "",
        templateUrl: 'home.html'
    };

    $stateProvider.state(Home);

});

app-release.js

app.config(function ($stateProvider) {

    var Default = {
        name: "default",
        url: "/",
        templateUrl: "home.html"
    };

    var Home = {
        name: "home",
        url: "",
        templateUrl: 'home.html'
    };


    $stateProvider.state(Home);
});


},{"../../templates-cache.js":77,"@uirouter/angularjs":1,"angular":75}],77:[function(require,module,exports){
'use strict';

angular.module('template', []).run(['$templateCache', function ($templateCache) {

  $templateCache.put('home.html', '\n<div class="largeText">My Angular App</div>\n\n');

}]);

Error in Chrome Error in Chrome

Thank you for the help :)

Answer 1

The problem is here. I am not injecting template that is generated by gulp-angular-templatecache.

Fix

let app = angular.module("app", [uiRouter, "template"]);