My build.js
is using ngHtml2js
to convert partials in directives into js files.
gulp.task('partials', function () {
return gulp.src('src/{components,app}/**/*.html')
.pipe($.ngHtml2js({
moduleName: 'testApp'
}))
.pipe(gulp.dest('.tmp'))
.pipe($.size());
});
Where, my directives are situated in components folder in components->directives.
The issue is that when I try to deploy the dist folder, the static partial calls from the routes JS files gets fired, and I get a 404.
angular.module(ModuleName)
.directive('collapseWindow', ['$parse', function (parse) {
return {
templateUrl:'/components/directives/collapse.html',
transclude:true,
restrict: 'A'
In my understanding, the ngHtml2js converts the partials into module.run blocks as
module.run(['$templateCache', function($templateCache) {
$templateCache.put('components/directives/collapse.html',
'<div class="collapsible">\n' ...
But then, why am I getting a 404 error such as
GET http://localhost:3000/components/directives/collapse.html 404 (Not Found)
Solved it. The reason was templateUrl were given absolute paths (with '/' at beginning), but templateCache uses relative paths. Thus removing the '/' from templateUrls solved the issue
You need to add the template module as a dependency in your Angular application module. Also ensure that your template cache js file has been loaded in browser before your application code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With