angularjsgruntjsyeomanyeoman-generator-angulargrunt-usemin

Having sub directories under views using yo angular generator


So I have started yo angular for a new project and it's great, the only issue is that I like to structure my views and have partials etc, for example a great structure for me is something like the following:

app/views/_partials/modals
app/views/_partials/menus
app/views/_partials/buttons
app/views/index.html
app/views/about.html

However, it appears that the angular generator doesn't look in sub directories when building into the dist folder and I get all sorts of missing includes and errors.

Can I change Grunt to look into these sub directories and process the views accordingly so that they appear within my app after building?

I located an interesting block that I think could be responsible in my Grunt file:

ngtemplates: {
  dist: {
    options: {
      module: 'myApp',
      htmlmin: '<%= htmlmin.dist.options %>',
      usemin: 'scripts/scripts.js'
    },
    cwd: '<%= yeoman.app %>',
    src: 'views/{,*/}*.html',
    dest: '.tmp/templateCache.js'
  }
},

Or is it something in the usemin block? I'm confused (relatively new to Angular):

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
  options: {
    assetsDirs: [
      '<%= yeoman.dist %>',
      '<%= yeoman.dist %>/images',
      '<%= yeoman.dist %>/styles'
    ],
    patterns: {
      js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
    }
  }
},

Solution

  • Ok, so I figured this one out, the issue was in the ngtemplates block and my code now looks like this:

    ngtemplates: {
      dist: {
        options: {
          module: 'myApp',
          htmlmin: '<%= htmlmin.dist.options %>',
          usemin: 'scripts/scripts.js'
        },
        cwd: '<%= yeoman.app %>',
        src: 'views/**/**/*.html',
        dest: '.tmp/templateCache.js'
      }
    },
    

    Notice the src attribute has changed from:

    src: 'views/{,*/}*.html',
    

    to:

    src: 'views/**/**/*.html',
    

    This seems to capture all my templates within the _partials directories