0

I started to remodel my AngularJS (fully working) page to modular version.

I grouped my files to 4 modules:

-band
-user
-layout
-core

And main app.js with:

(function () {
    angular.module('zt', [

        // shared modules

        'zt.core',

        'zt.user',
        'zt.band',
        'zt.layout'

        // other modules will be lazy-loaded from router
    ]);
})();

Each module has it own controllers, services etc. and own module config file:

(function() {
    'use strict';

    angular.module('zt.user', []);
})();

And own route file:

(function () {
    'use strict';
angular.module('zt.user')
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider, AccessLevels) {

        $stateProvider
            .state('app.user', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.user
                }
            })

AccessLevels is inside zt.core module and it is simple constant:

(function() {
    "use strict";

    angular.module('zt.core')

        .constant('AccessLevels', {
            anon: 0,
            user: 1,
            mode: 2,
            admn: 3,
            suad: 4
        })

...

When I try to load page I've got an error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module zt due to: Error: [$injector:modulerr] Failed to instantiate module zt.user due to: Error: [$injector:unpr] Unknown provider: AccessLevels

All files are included ok

(also the same error in zt.band module) All typing and including are ok.

When I add AccessLevels manual to zt.band and zt.user route configs another strange errors appears:

Error: [$injector:unpr] Unknown provider: ztPlayerProvider <- ztPlayer <- soundManagerDirective

and:

Error: [$injector:unpr] Unknown provider: AuthServiceProvider <- AuthService <- ApplicationControler

ztPlayer is service in the same module zt.layout with soundManagerDirective !

and AuthService is inside shared zt.core module so it should be availiable inside ApplicationController inside zt.layouts module.

My include paths near end of the body tag:

<script src="/dist/js/core/core.module.js"></script>
        <script src="/dist/js/core/core.routes.js"></script>
        <script src="/dist/js/core/config.js"></script>
        <script src="/dist/js/core/config.lazyload.js"></script>

        <script src="/dist/js/core/services/auth.services.js"></script>
        <script src="/dist/js/core/services/storage.services.js"></script>
        <script src="/dist/js/core/services/ui-load.js"></script>

        <script src="/dist/js/core/controllers/auth.controller.js"></script>
        <script src="/dist/js/core/controllers/scroll.controller.js"></script>

        <script src="/dist/js/core/directives/auth.directives.js"></script>
        <script src="/dist/js/core/directives/main.directives.js"></script>
        <script src="/dist/js/core/directives/ui.directives.js"></script>
        <script src="/dist/js/core/directives/upload.directives.js"></script>

        <!-- /core module -->

        <!-- widget module -->

        <script src="/dist/js/widget/widget.module.js"></script>

        <!-- /widget module -->

        <!-- user module -->

        <script src="/dist/js/user/user.module.js"></script>
        <script src="/dist/js/user/user.routes.js"></script>

        <script src="/dist/js/user/services/user.services.js"></script>

        <script src="/dist/js/user/controllers/dashboard.controller.js"></script>
        <script src="/dist/js/user/controllers/profile.controller.js"></script>

        <!-- /user module -->

        <!-- band module -->

        <script src="/dist/js/band/band.module.js"></script>
        <script src="/dist/js/band/band.routes.js"></script>

        <script src="/dist/js/band/controllers/band.controller.js"></script>
        <script src="/dist/js/band/controllers/track.controller.js"></script>

        <script src="/dist/js/band/services/band.services.js"></script>
        <script src="/dist/js/band/services/song.services.js"></script>
        <script src="/dist/js/band/services/track.services.js"></script>

        <!-- /band module -->

        <!-- layout module -->

        <script src="/dist/js/layout/layout.module.js"></script>

        <script src="/dist/js/layout/services/player.services.js"></script>

        <script src="/dist/js/layout/controllers/application.controller.js"></script>
        <script src="/dist/js/layout/controllers/header.controller.js"></script>
        <script src="/dist/js/layout/controllers/message.controller.js"></script>

        <script src="/dist/js/layout/directives/player.directives.js"></script>
        <script src="/dist/js/layout/directives/setnganimate.directives.js"></script>

        <!-- /layout module -->

        <!-- other -->
        <script src="/dist/js/translate/translate.js"></script>
        <script src="/dist/js/filters/fromNow.js"></script>

I've tried a lot of things but nothing worked! I can't figure what is the problem of this.

Thanks!

3
  • you should place your app.js file at the end after loading all the modules..Rule of thumb before using module.it should initialize at-least Commented May 12, 2015 at 21:14
  • Thanks for reply, when a move app.js to the end another error appears: "Uncaught Error: [$injector:nomod] Module 'zt' is not available!" + error with AccessLevels not found. Commented May 12, 2015 at 21:26
  • looks like somewhere you are usinh module which haven't being initialized Commented May 12, 2015 at 21:54

0

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.