ng-table not being loaded appropriately when using angularAMD

Question

I'm using angularAMD with requirejs and when I try to supply the ng-table module to the controller, I'm getting Uncaught TypeError: Cannot read property 'module' of undefined from the ng-table module. The source of the error:

var app = angular.module('ngTable', []);

My code is:

'use strict';

requirejs.config({
  paths: {
    'angular': ['../lib/angularjs/angular'],
    'angular-route': ['../lib/angularjs/angular-route'],
    'angularAMD': ['../lib/angularAMD/angularAMD'],
    'ng-table': ['../lib/ng-table/ng-table']
  },
  shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'], 'ng-table': ['angular']}
});


define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("meadApp", ['ngRoute']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when("/results", angularAMD.route({
                templateUrl: 'partials/results.html', controller: 'resultsController', controllerUrl: './controllers/resultsController'
            }))
            .otherwise({redirectTo: "/results"});
    });

    return angularAMD.bootstrap(app);
});

resultController.js

define(['app', 'ng-table'], function (app) {
    app.controller('resultsController', function ($scope, $http) {    
            $scope.users = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];    
    });
});

results.html

<div>
    <table ng-table class="table">
        <tr ng-repeat="user in users">
            <td data-title="'Name'">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>
        </tr>
    </table>
</div>

score 2 · Answer 1 · answered Jun 11 '15 at 08:16

Make a shim of angular and export angular. Like this:

main.js:

requirejs.config({
  paths: {
    'angular': ['../lib/angularjs/angular'],
    'angular-route': ['../lib/angularjs/angular-route'],
    'angularAMD': ['../lib/angularAMD/angularAMD'],
    'ng-table': ['../lib/ng-table/ng-table']
  },
  shim: {
    'angular': { exports: 'angular' },
    'angularAMD': ['angular'],
    'angular-route': ['angular'],
    'ng-table': ['angular']}
});

I found this out from here: https://github.com/esvit/ng-table/pull/377#issuecomment-57934733

@marcoseu's answer didn't work for me. I found that I didn't need ngload for Restangular either, which is another 3rd party angular module loaded after angular has been bootstrapped. I'm not sure what's up with that, I must not understand it.

This solution works perfectly. Yeah, @marcoseu's answer didn`t work for me neither. — Jesús Castro, Jul 15 '15 at 17:11

score 0 · Accepted Answer · answered Apr 26 '15 at 13:00

0

Loading an existing angular module should be done using ngload. Add ngload to your main.js:

requirejs.config({
  paths: {
    'ngload': ['../lib/angularAMD/ngload'],
    ...
  },
  shim: { 'ngload': ['angularAMD'], ...}
});

Then, use it to load the ng-table:

define(['app', 'ngload!ng-table'], function (app) {
    app.controller('resultsController', function ($scope, $http) {    
            $scope.users = [
                {name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}
            ];    
    });
});

Please see 3rd Party AngularJS Modules for more details.

answered Apr 26 '15 at 13:00

marcoseu

3,892
2
16
35

I'm using scala play on the backend and I've included the angular dependencies using the webjars available for them and a webjar wasn't available for ngload library and so I went ahead with trying to load angular controllers dynamically without using angularAMD. I could've just included the ngload script without using a webjar which I didnt :). Thanks for the help anyway. – Apr 26 '15 at 18:43
@marcoseu, it does not work for me. I get this error: ' Unknown provider: NgTableParamsProvider <- NgTableParams <- HomeCtrl ' myCode: define(['app', 'ngload!ng-table'], function (app) { app.controller('myController', function ($scope, $http, NgTableParams) { NgTableParams.myconfig(); }); }); – Joander Vieira Cândido Mar 07 '16 at 13:11

score -1 · Answer 3 · answered Sep 16 '15 at 14:21

-1

If you have loaded angular.js before require.js config being loaded. Then you need to add follow code before config definition:

define('angular', function () {
    return angular;
});

answered Sep 16 '15 at 14:21

Nikita Koksharov

10,283
1
62
71

ng-table not being loaded appropriately when using angularAMD

3 Answers3