davej / angular-classy

Cleaner class-based controllers with Angular 1
http://davej.github.io/angular-classy/
813 stars 27 forks source link

Compatibility with AngularJS 1.3.0 #36

Closed vwal closed 10 years ago

vwal commented 10 years ago

It seems angular-classy does not like at least the final release of AngularJS 1.3.0 (I haven't tested with the release candidates). When I attempt to load angular-classy with 1.3.0, the console spits out bunch of issues:

Bind hotkeys  content_script.js:84
Uncaught Error: [$injector:nomod] Module 'templates' 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=templates angular.js:80(anonymous function) angular.js:80(anonymous function) angular.js:1797ensure angular.js:1721module angular.js:1795angular.module angular-classy.js:91getNextRequires angular-classy.js:26getNextRequires angular-classy.js:39getActiveClassyPlugins angular-classy.js:42angular.module angular-classy.js:96(anonymous function) app.js:3
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module templates due to:
Error: [$injector:nomod] Module 'templates' 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=templates
    at http://mydomain.com:50000/vendor/angular/angular.js:80:12
    at http://mydomain.com:50000/vendor/angular/angular.js:1797:17
    at ensure (http://mydomain.com:50000/vendor/angular/angular.js:1721:38)
    at module (http://mydomain.com:50000/vendor/angular/angular.js:1795:14)
    at http://mydomain.com:50000/vendor/angular/angular.js:4064:22
    at forEach (http://mydomain.com:50000/vendor/angular/angular.js:335:20)
    at loadModules (http://mydomain.com:50000/vendor/angular/angular.js:4048:5)
    at http://mydomain.com:50000/vendor/angular/angular.js:4065:40
    at forEach (http://mydomain.com:50000/vendor/angular/angular.js:335:20)
    at loadModules (http://mydomain.com:50000/vendor/angular/angular.js:4048:5)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=templates&p1=Error%…mydomain.com%3A50000%2Fvendor%2Fangular%2Fangular.js%3A4048%3A5)
    at http://mydomain.com:50000/vendor/angular/angular.js:80:12
    at http://mydomain.com:50000/vendor/angular/angular.js:4087:15
    at forEach (http://mydomain.com:50000/vendor/angular/angular.js:335:20)
    at loadModules (http://mydomain.com:50000/vendor/angular/angular.js:4048:5)
    at http://mydomain.com:50000/vendor/angular/angular.js:4065:40
    at forEach (http://mydomain.com:50000/vendor/angular/angular.js:335:20)
    at loadModules (http://mydomain.com:50000/vendor/angular/angular.js:4048:5)
    at createInjector (http://mydomain.com:50000/vendor/angular/angular.js:3974:11)
    at doBootstrap (http://mydomain.com:50000/vendor/angular/angular.js:1484:20)
    at bootstrap (http://mydomain.com:50000/vendor/angular/angular.js:1505:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=app&p1=Error%3A%20%…mydomain.com%3A50000%2Fvendor%2Fangular%2Fangular.js%3A1505%3A12) angular.js:80(anonymous function) angular.js:80(anonymous function) angular.js:4087forEach angular.js:335loadModules angular.js:4048createInjector angular.js:3974doBootstrap angular.js:1484bootstrap angular.js:1505angularInit angular.js:1399(anonymous function) angular.js:25579j jquery.js:3073k.fireWith jquery.js:3185n.extend.ready jquery.js:3391I

I've tried both the stable and the beta versions of classy with the same result.

The scripts loaded in this particular case are as follows:

<script type="text/javascript" src="vendor/foundation/js/vendor/modernizr.js"></script>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="vendor/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="vendor/moment/min/moment.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="vendor/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="vendor/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="vendor/restangular/dist/restangular.min.js"></script>
<script type="text/javascript" src="vendor/angular-classy/angular-classy.js"></script>

Disabling angular-classy gets rid of the error.

davej commented 10 years ago

Are you using beta 5 or a pull from master? What is the templates module?

vwal commented 10 years ago

It was installed with bower.

I should also mention that in this case the scripts go through a minification process, which could be cause for the trouble, I haven't investigated it yet. I'm using a Yeoman scaffold (generator-ghurt) for Angular front end / hapijs back-end, and "templates" is a structure generated by it. It is imported in app.js:

'use strict';

angular.module('app', ['templates', 'common', 'ngRoute', 'ngAnimate'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/app.view.html',
                controller: 'AppCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
        $locationProvider.html5Mode(true);
    }])
    .controller('AppCtrl', ['$scope', function ($scope) {
            $scope.message = 'Hello World';
            $scope.templateUrl = 'app/app.view.html';
        }
    ]);
angular.module('templates', ['app/app.view.html']);

angular.module('app/app.view.html', []).run(['$templateCache', function($templateCache) {
    'use strict';
    $templateCache.put('app/app.view.html',
        '<h1>{{message}}</h1>');
}]);
vwal commented 10 years ago

So it seems the second round of minification is the problem. I pulled classy from a CDN (//cdn.jsdelivr.net/angular.classy/0.4.2/angular-classy.min.js) and the problem went away. The scaffold includes a Grunt script that does the automatic build that includes minification, so I'll have to see how to exclude specific vendor scripts from minification (especially since it is already minified).

davej commented 10 years ago

Well 0.4.2 is a different version so that may not necessarily be the problem. Try this version from the rawgit CDN: https://rawgit.com/davej/angular-classy/6ae36fad10c2477d07f12b3f99ac31a1048ec46f/angular-classy.min.js

vwal commented 10 years ago

Ah, you're right.. the problem returned with that version. :-/

davej commented 10 years ago

Hmm, it definitely works with 1.3 because I have it running with 1.3 on a personal site.

I have a feeling that it might be a conflict between Classy and those funny module names that the template module creates (e.g. 'app/app.view.html'). Give me 10 minutes to look into this and see if I can figure it out.

davej commented 10 years ago

Could you tell me if this version works: https://rawgit.com/davej/angular-classy/32b774c551c36d66f9688f6a2ecf3f0132d2ba9e/angular-classy.min.js

davej commented 10 years ago

I have identified the issue and it is indeed a Classy bug related to lazy-loaded requires in module definitions. It will be fixed for beta 6, which will be released on Tuesday or Wednesday. For the moment, you can roll back to beta 4 which should work fine.

bower install angular-classy#1.0.0-beta.4
davej commented 10 years ago

Good bug-catching by the way :-)

vwal commented 10 years ago

Yes, beta4 seems to work! :-) Thanks for the quick assessment of the issue (and yay.. it wasn't just me abusing the script! :-D).

davej commented 10 years ago

Beta 6 released, so you can now bower install it.

https://github.com/davej/angular-classy/releases/tag/v1.0.0-beta.6

vwal commented 10 years ago

Cool! It works! Thanks for the quick fix!!