Angular UI router state doesn't render template though loads them

Question

I've got two states -- a global layout state where all the others should render, and a login state. When my application boots up, it throws no errors, but the templates doesn't render, although in debugging session I've seen that they were loaded. Here's the main page:

<!DOCTYPE html>
<html>
   <head><head>
   <body>
       <div ui-view></div>
   </body>
</html>

Here is my app module:

import angular from 'angular';
import '@uirouter/angularjs';
import routing from './app.config';
import '../login'

const requires = ['ui.router', 'app.login'];

angular.module('app', requires).config(routing);

angular.bootstrap(document, ['app']);

Here goes the app.config.js:

export default function routing($stateProvider, $urlRouterProvider) {
    "ngInject";

    $stateProvider.state('app', {
        abstract: true,
        template: require('./layout/layout.html')
    });
    $urlRouterProvider.otherwise('/');
}

Here comes the layout:

<div ui-view></div>

And here goes the login module:

login.config.js

export default function loginConfig($stateProvider) {
    "ngInject";

    $stateProvider.state('app.login', {
        url: '/login',
        controller: 'LoginCtrl as $ctrl',
        template: require('./login.html')
    });
}

login.controller.js

class LoginCtrl {
    constructor() {
        "ngInject";
    }

    btnClicked() {
        console.log("YAY!");
    }
}

login.html

<div>
     <button ng-click="$ctrl.btnClicked()"></button>
</div>

index.js

import angular from 'angular';
import loginConfig from 'login.config';
import LoginCtrl from 'login.controller';

let loginModule = angular.module('app.login', []);
loginModule.config(loginConfig);
loginModule.controller('LoginCtrl', LoginCtrl);

export default loginModule;

I use webpack + ng-annotate-loader for build. As I've already mentioned, though it can be seen that all the templates are loaded and added into the views, the main ui-view on the index.html page remains empty when rendered, and the entire page is blank. What can cause this problem?

@AlekseySolovey I've got angular.bootstrap(document, ['app']);, it does that automatically. — AlexNikolaev94

AlexNikolaev94 AlexNikolaev94 · Accepted Answer · 2018-05-25T11:40:12

0

votes

The problem was solved adding $locationProvider.html5Mode(false); to the app.config.js

Angular UI router state doesn't render template though loads them

1 Answers