AngularJS ui-router not loading template

Question

My AngularJS app doesn't find the template landing.html, although I tried to make the correct declarations everywhere.

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
@@include('partials/head.html')
<body>

  @@include('partials/header.html')

    <main class="content">

      <ui-view></ui-view>

    </main>

  @@include('partials/footer.html')
</body>
</html>

main.js:

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', '$locationProvider', 
  function($stateProvider, $locationProvider) {
  $stateProvider
    .state('landing', {
      url: '/',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    })
      .state('faq', {
      url: '/faq',
      templateURL: 'faq.html'
  });
    $locationProvider
        .html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

The structure of my files is as follows:

/src
|
|--index.html
|--faq.html
|--js
|  |--main.js
|  |--controllers
|  |  |--LandingCtrl.js
|--templates
|  |--landing.html

I think the path for landing.html is correctly declared, but I'm still getting the following error:

angular.min.js:sourcemap:123 Error: [$compile:tpload] http://errors.angularjs.org/1.6.4/$compile/tpload?p0=templates%2Flanding.html&p1=404&p2=Not%20Found

Would anyone have an idea as to why the app can't find the template?

EDIT When I enter this in the browser URL: http://localhost:3000/templates/landing.html

Result is: Cannot GET /templates/landing.html

EDIT 2 Removing $locationProvider also removes the "landing.html not found" error msg, but the view that's supposed to be rendered inside of <ui-view> is still not shown.

What appens if you remove $locationProvider.html5Mode({ enabled: true, requireBase: false }); ? — JeanJacques
– JeanJacques, Commented Aug 7, 2017 at 13:38
why are you using locationProvider ? you can run the app without locationprovider — Tejinder Singh
– Tejinder Singh, Commented Aug 7, 2017 at 13:39
I thought I needed $locationProvider because I have a "back to top" link down at the bottom of the page, on which I had implemented the Angular $anchorScroll in LandingCtrl.js. I understand that if I don't use this (or don't declare HTML 5 mode in it), the app will add an extra symbol to page-internal links; I believe such as #!. — orlando21
– orlando21, Commented Aug 7, 2017 at 13:44

Tejinder Singh · Accepted Answer · 2017-08-09 06:37:57Z

in your index.html change <ui-view></ui-view> to <div ui-view></div>.

in your main.js change the code as below:-

angular.module('myApp', [
  'ui.router'
])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('landing', {
      url: '/landing',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    });
      $urlRouterProvider.otherwise('/landing');

}])
  .run(['$http', '$templateCache', function($http, $templateCache) {

    $http.get('templates/landing.html', {
      cache: $templateCache
    }).then(function(result) {
      console.log(result);
    });

  }]);

Should also mention that I am using grunt, so I changed Gruntfile.js to copy the template file into /dist, which wasn't done previously.

Collectives™ on Stack Overflow

AngularJS ui-router not loading template

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related