Issue with 'ui.router' and dist templates

[tarlepp]

First of all, this is a great project! And then to the point...

I'm using ui-router on my application and I have following structure on my application config:

angular.module('frontend')
    .config(
        ['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('board', {
                    abstract: true,
                    template: '<ui-view/>'
                })
                .state('board.books', {
                    url: '/books',
                    templateUrl: '/books/books.html',
                    controller: 'BooksController'
                })
                .state('board.authors', {
                    url: '/authors',
                    templateUrl: '/partials/authors/authors.html',
                    controller: 'AuthorsController'
                })
            ;

            // For any unmatched url, redirect to /state1
            $urlRouterProvider.otherwise('/board.books');
        }]
    );

And my directory structure is following:

app
├── partials
│   └── Authors
│       └── authors.html
└── books
    ├── books.html
    ├── books.js
    └── books-controller.html

And in my gulpfile.js I have just following to get my partials to be shown:

/**
 * Partials
 */
gulp.task('partials', function () {
    return gulp.src('./src/app/partials/**')
        .pipe(gulp.dest('./dist/partials'));
});

/**
 * Dist
 */
gulp.task('dist', ['vendors', 'assets', 'partials', 'styles-dist', 'scripts-dist'], function() {
    return gulp.src('./src/app/index.html')
        .pipe(g.inject(gulp.src('./dist/vendors.min.{js,css}'), {ignorePath: 'dist', starttag: '<!-- inject:vendor:{{ext}} -->'}))
        .pipe(g.inject(gulp.src('./dist/' + bower.name + '.min.{js,css}'), {ignorePath: 'dist'}))
        .pipe(g.htmlmin(htmlminOpts))
        .pipe(gulp.dest('./dist/'));
});

gulp.task('production', g.serve({
    port: 3000,
    root: ['./dist'],
    middleware: function(req, res, next) {
        return historyApiFallback(req, res, next);
    }
}));

And this just works with gulp serve like it should be, but if I run gulp dist and then my own gulp production my BooksController cannot find necessary template. That just returns me 404 Not Found http://myurlhere/books/books.html

How can I solve this?

[joakimbeng]

@tarlepp this has to do with the template paths being prefixed with the application name (i.e. bower.name), see #12. So instead of having /books/books.html and /partials/.. you should prefix those paths with your application name, e.g. /my-nice-app/books/books.html.

If you don't want to use the application prefix in the paths you can remove the prefix option passed to g.ngHtml2Js in the gulpfile.

[tarlepp]

I have tried that. If I do it like this:

.state('example.books', {
    url: '/books',
    templateUrl: '/frontend/books/books.html',
    controller: 'BooksController'
})

But that will give me always 404, from that template.

And if I remove that frontend then my gulp serve is working but when I run gulp dist and try my application with that I got 404 for that template.

[joakimbeng]

Hmm, that's strange. How does your ./.tmp/frontend-templates.js look like after you've run gulp serve? I.e. how does the generated path for books.html look like?

[tarlepp]

You can see file contents from https://gist.github.com/tarlepp/d8a69b166569fcf9dca9

[joakimbeng]

@tarlepp aha, now I see what's wrong. The module frontend-templates needs to be included in the list of dependencies for the frontend module. Or if you don't want that extra module you can change the moduleName option for the ngHtml2Js-pipe.

Did that help?

[tarlepp]

Aah! Stupid me I must say.

Now it works like it should, thanks for help! Really thanks.

[joakimbeng]

@tarlepp great! No problem :)