Home Yeoman angular generator and bootstrap templates
Reply: 0

Yeoman angular generator and bootstrap templates

user3002 Published in May 27, 2018, 3:37 am

So, I have an application that I have built using yo angular and all has been working for a while. I have overridden some of the bootstrap templates (specifically the datepicker) and I have updated my grunt task to include these files when creating my templateCache:

ngtemplates: {
    dist: {
        options: {
            module: 'sapphire',
            htmlmin: '<%= htmlmin.dist.options %>',
            usemin: 'scripts/scripts.js'
        cwd: '<%= yeoman.app %>',
        src: [
        dest: '.tmp/templateCache.js'

The problem is when locally testing. It doesn't use the new template, which is annoying. I have been using injector to inject my project files into my index.html, so I created this:

html: {
    options: {
        transform: function (filePath) {
            return '<script type="text/ng-template" src="\'' + filePath.replace('/src/', '') + '\'"></script>';
    files: {
        '<%= yeoman.app %>/index.html': [
            '<%= yeoman.app %>/uib/**/*.html'

Which adds my templates to the bottom of the index.html like this:

<!-- injector:html -->
<script type="text/ng-template" src="'uib/template/datepicker/datepicker.html'"></script>
<script type="text/ng-template" src="'uib/template/datepicker/day.html'"></script>
<script type="text/ng-template" src="'uib/template/datepicker/month.html'"></script>
<script type="text/ng-template" src="'uib/template/datepicker/year.html'"></script>
<script type="text/ng-template" src="'uib/template/timepicker/timepicker.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-account-match.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-complaint.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-customer-services.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-match.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-order-match.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-product-match.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-stock-match.html'"></script>
<script type="text/ng-template" src="'uib/template/typeahead/typeahead-user-match.html'"></script>
<!-- endinjector -->

These templates are put under the JavaScript files. I have tried them above and still it doesn't work. Does anyone know why?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.302982 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO