Search code examples
angularjswebpackangular-bootstrap

Webpack, Angular-UI-Bootstrap not loading properly


Initially, I was trying to get a bootstrap dropdown to load, but the directive wasn't working properly. Suspecting an issue with loading ui.bootstrap, I tried with a simple progressbar and it's still not loading. Long story short, I think ui.bootstrap is loading, but for some reason it's not launching correctly. I'm using webpack. Can anyone see what I'm doing incorrectly here? I'm not getting any errors on load.

My thoughts now: I haven't loaded the directive properly. Perhaps the templates aren't loading.

Bundle JS:

/* 3 */
/***/ function(module, exports, __webpack_require__) {

'use strict';

__webpack_require__(4);
module.exports = 'ui.bootstrap';

/***/ },

Entry JS:

var angular = require('angular');
var uiBootstrap = require('angular-ui-bootstrap');
var uiRouter = require('angular-route');
var moment = require('moment');
var angularCalendar = require('angular-bootstrap-calendar');
var layout = require('./js/angular/layout/layout.module.js');
var layoutController = require('./js/angular/layout/layout.controller.js');

angular.module('app', ['layout','ngRoute','ui.bootstrap','mwl.calendar']);
var app = angular.module('app');

Layout Controller:

angular.module('layout', []);
angular
.module('layout')
.controller('Layout', Layout);

Layout.$inject = ['$log'];

function Layout($log) {
  /*jshint validthis: true */
  var vm = this;
}

Template:

<body ng-app="app" class="container">
<div ng-controller="Layout as layout">
    <h1>{{layout.content.model.layout.header}}</h1>
    <div class="nav">
        <uib-progressbar value="55"></uib-progressbar>
    </div>
</div>
</body>

Solution

  • Fixed: angular-ui-bootstrap wasn't in my package.json for some reason.