Template path instead of it self in AngularJS

Question

I'm using Angular ui-Router and ui-View to serve them in the app. This is my routes index:

function routeConfig($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });    

    $stateProvider
        .state('app', {
            url: '',
            template: require('./pages/generic/generic.html'),
            data: {
                public: true
            },
        })
        .state('app.main', {
            url: '/',
            template: require('./pages/main/main.html'),
            controller: 'MainCtrl',
            controllerAs: 'Ctrl'
        });
...

Instead of template it self i see path to it. Also when i'm using templateUrl i have Cannot GET /template-file-path for the template file. Why is it happending? I'm using webpack with webpack server. Thx for help.

Answer 1

If your application's file structure is like

myDemoAppName -> app -> pages -> main -> main.html

and your server serves your files on myDemoAppName path

You should use templateUrl: '/app/pages/main/main.html'