AngularJS + RequireJS not working

Question

I am using AngularJS with RequireJS.

NEW QUESTION: RequireJS does not load any controllers. I am using this tutorial.

OLD QUESTION: RequireJS loads the main.js file, the bootstrap.min.js file and jQuery. This works good. But it does not load angular for some reason.

I am using chrome, and in the developer tools tab "network" there are only the 3 files mentioned above loaded.

console.log(typeof angular); equals to undefined. ( I have tried that in the developer console )

There is no error message shown in the console!

SOLUTION: I fixed it by adding 'angular' to the deps array.

My main.js code is: // Require JS Configuration

require.config({ // Code format changed
// alias library paths
paths: {
    'jquery': '../bower_components/jquery/dist/jquery.min',
    'domReady': '../bower_components/requirejs-domready/domReady',
    'angular': '../bower_components/angular/angular.min',
    'angular-route': '../bower_components/angular-route/angular-route.min',
    'ngFx': '../bower_components/ngFx/dist/ngFx.min',
    'angular-ui-router': '../bower_components/angular-ui-router/release/angular-ui-router.min',
    'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min'
},

// angular does not support AMD out of the box, put it in a shim
shim: {
    'angular': {
        exports: 'angular'
    },
    'angular-route': {
        deps: [ "angular" ]
    },
    'ngFx': {
        deps: [ "angular" ]
    },
    'angular-ui-router': {
        deps: [ "angular" ]
    },
    'bootstrap': {
        deps: [ "jquery" ]
    }
},

// Kick start application
deps: [
    './bootstrap',
    'domReady',
    'angular',
    'angular-route',
    'ngFx',
    'angular-ui-router',
    'bootstrap'
]
});

My bootstrap.js file:

define([
   'require',
   'angular',
   'app',
   'routes'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});

My app.js file:

define([
    'angular',
    './controllers/index',
    './directives/index',
    './filters/index',
    './services/index'
], function (ng) {
    'use strict';

    return ng.module('app', [
        'app.services',
        'app.controllers',
        'app.filters',
        'app.directives',
        'ngFx',
        'ngRoute'
    ]).config(function ($urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
    });
});

Folder structure:

angular
    controllers
        index.js
        menu.js
        module.js
    directives
    filters
    services

    app.js
    bootstrap.js
    main.js
    routes.js
bower_components
    ...

Thank you for your help! :-)

You're unnecessarily declaring multiple exports properties for Angular. The only one you should need is for 'angular', get rid of the rest. — miqh
– miqh, Commented Oct 10, 2014 at 7:43

Mikalai · Accepted Answer · 2014-10-10 07:31:16Z

1

I think you should use angular.bootstrap with RequireJS. Also you should add angular to deps. Here api reference:

https://docs.angularjs.org/api/ng/function/angular.bootstrap

answered Oct 10, 2014 at 7:31

Mikalai

1,5258 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amahrt Over a year ago

Okay, I have setup this using this Tutorial - Adding Angular to the deps worked fine. Now there is the problem, that the controllers are not beeing loaded from the bootstrap.

amahrt · Accepted Answer · 2014-10-10 09:16:45Z

0

The following fixed my problems:

Add the dependencies to the main.js's deps array.
Twitter Bootstrap and the Bootstrap.js file were running into a name conflict. I solved this issue by renaming the 'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min' to 'tw-bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min' and renamed all other relations.

answered Oct 10, 2014 at 9:16

amahrt

5231 gold badge5 silver badges13 bronze badges

Comments

Ajay Kumar · Accepted Answer · 2017-08-04 10:23:43Z

Looking for the solution for same issue last couple of hours, dig out every possible way but finally got the solution by Renaming angular module name 'app' to something else i.e 'myApp'. then it start working.

Amended code here

define([
   'require',
   'angular',
   'app',
   'routes'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['myApp']);
    });
});
My app.js file:

define([
    'angular',
    './controllers/index',
    './directives/index',
    './filters/index',
    './services/index'
], function (ng) {
    'use strict';

    return ng.module('myApp', [
        'app.services',
        'app.controllers',
        'app.filters',
        'app.directives',
        'ngFx',
        'ngRoute'
    ]).config(function ($urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
    });
});

Collectives™ on Stack Overflow

AngularJS + RequireJS not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related