8

I'm trying to use ng-polymer-elements with angular and requirejs. I did follow this instructions https://github.com/GabiAxel/ng-polymer-elements and I had not success. When I do remove the instance "ng-polymer-elements" from my requires at the "main.js" everything works correctly. Someone can help me,please? thanks.

A little issue part:

Uncaught Error: [$injector:modulerr] Failed to instantiate module Coderup due to: Error: [$injector:nomod] Module 'Coderup' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

main.js

    require.config({
        paths: {
             angular: '../bower_components/angular/angular',
            'angular-animate': '../bower_components/angular-animate/angular-animate',
            'angular-cookies': '../bower_components/angular-cookies/angular-cookies',
            'angular-mocks': '../bower_components/angular-mocks/angular-mocks',
            'angular-resource': '../bower_components/angular-resource/angular-resource',
            'angular-sanitize': '../bower_components/angular-sanitize/angular-sanitize',
            'angular-scenario': '../bower_components/angular-scenario/angular-scenario',
            'angular-touch': '../bower_components/angular-touch/angular-touch',
             bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
            'ng-polymer-elements' : '../bower_components/ng-polymer-elements/ng-polymer-elements.min',
             platform : '../bower_components/platform/platform',
            'uiRouter' : '../bower_components/angular-ui-router/release/angular-ui-router',
            jquery : '../bower_components/jquery/dist/jquery.min'
        },
        shim: {
            angular: {
                deps: ['platform'],
                exports: 'angular'
            },
            platform : {
                exports : 'platform'
            },
            jquery : {
                exports: 'jquery'
            },
            'ng-polymer-elements' : [
                'angular'
            ],
            'uiRouter': [
                'angular'
            ],
            'angular-cookies': [
                'angular'
            ],
            'angular-sanitize': [
                'angular'
            ],
            'angular-resource': [
                'angular'
            ],
            'angular-animate': [
                'angular'
            ],
            'angular-touch': [
                'angular'
            ],
            'angular-mocks': {
                deps: [
                    'angular'
                ],
                exports: 'angular.mock'
            }
        },
        priority: [
            'angular'
        ],
        packages: [

        ]
    });

    window.name = 'NG_DEFER_BOOTSTRAP!';

    require([
        'angular',
        'app',
        'uiRouter',
        'ng-polymer-elements',
        'controllers/config',
        'directives/config'
    ], function(angular,app) {
        'use strict';

        /* jshint ignore:start */
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        /* jshint ignore:end */

        angular.element().ready(function() {
            angular.bootstrap(document, [app.name]);
        });
    });

app.js

    define(['angular', 'uiRouter' ,'ng-polymer-elements'], function (angular) {
        'use strict';

        var app = angular.module('Coderup', ['ui.router','ng-polymer-elements', 'appControllers', 'appDirectives'])
            .config(function ($stateProvider, $urlRouterProvider) {

                var dirView = "../views/";
                $urlRouterProvider.otherwise("/learn");

                $stateProvider
                    .state('learn', {
                        url: "",
                        controller: 'DadController'
                    })
                    .state('route1', {
                        url: "/route1",
                        views: {
                            "container": {
                                templateUrl: dirView + "teste.html"
                            }
                        }
                    });
            });
        return app
    });

The issue:

Uncaught Error: [$injector:modulerr] Failed to instantiate module Coderup due to:
Error: [$injector:nomod] Module 'Coderup' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=Coderup
    at http://localhost:9000/bower_components/angular/angular.js:80:12
    at http://localhost:9000/bower_components/angular/angular.js:1797:17
    at ensure (http://localhost:9000/bower_components/angular/angular.js:1721:38)
    at module (http://localhost:9000/bower_components/angular/angular.js:1795:14)
    at http://localhost:9000/bower_components/angular/angular.js:4064:22
    at forEach (http://localhost:9000/bower_components/angular/angular.js:335:20)
    at loadModules (http://localhost:9000/bower_components/angular/angular.js:4048:5)
    at createInjector (http://localhost:9000/bower_components/angular/angular.js:3974:11)
    at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1484:20)
    at Object.bootstrap (http://localhost:9000/bower_components/angular/angular.js:1505:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=Coderup&p1=Error%3A…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1505%3A12) 

Guys please, help me to resolve it. You can get this project by git.

 git clone https://[email protected]/vcrzy/coderup.git
 npm install
 run mongod
 cd /app
 node app.js
 go http://localhost:9000
10
  • I don't really get the point of require at times. Anyway, you should make angular depend on jquery if you're going to use both. Is there somewhere online we can look at this? Or a plunker? Looks okay to me.
    – ProLoser
    Nov 9, 2014 at 7:22
  • I'm just building a structure with requireJs. To do without it is easy, I want to have 2 ready architectures. One for a giant and another one for a midget, but ultimately is just for learn. I 'll put it in the cloud.I Think so my issue is a conflict with bootstrap and polymer, polymer should be loaded before him but it aren't happening. Thanks Nov 9, 2014 at 13:37
  • @vcrzy Can you provide a jsFiddle for your app? The root of the error perhaps is in on of the other files
    – YAAK
    Nov 11, 2014 at 20:33
  • Sorry!! git clone [email protected]/vcrzy/coderup.git Nov 12, 2014 at 19:04
  • make sure your controllers/config and directives/config depend on angular. Further, you can declare angular to depends on jquery to get the advantage of full jquery element for directives link function.
    – erandac
    Nov 14, 2014 at 11:36

1 Answer 1

1

You probably have an issue with files loading order. You need to shim your app, with all dependencies, add something along these lines to the shim section:

app: [
  'angular',
  'ng-polymer-elements',
  ...
  // list all other deps
]

The best way to troubleshoot this issue is to watch the Network tab and see the sequence of how files are being loaded, and make sure they load in the right order.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.