angular inject module into multiple modules

Question

I'm loading a module on my base html page called userFromServer. I'd like to inject it into both the main app module and also the mixpanel module. However I'm getting an injection error if I try to inject userFromServer into analytics.mixpanel(angular mixpanel). Is this a circular dependency error or am I missing something? should userFromServer be available to all modules? How can I inject userFromServer into both modules?

var app  = angular.module('App', ['userFromServer', 'analytics.mixpanel']) 
// main app with currentUser injectable
var mixp = angular.module('analytics.mixpanel', ['userFromServer'])
mixp.config(['$mixpanelProvider', 'currentUser', function($mixpanelProvider, currentUser) {
 // use currentUser here
}]);

userFromServer module

<body ng-app="App" ng-cloak>
  <base href="/">

  <div class="container">
    <div ng-view=""></div>
  </div>

  <script type="text/javascript">
    angular.module('userFromServer', [])
      .service('currentUser', function() {
        <% if logged_in %>
          this.name = '<%= @User.name %>';
          this.first_name = '<%= @User.first_name %>';
          this.id = '<%= @User.id %>';
          this.uuid = '<%= @User.profile.uuid %>';
        <% end %>
      })
  </script>


</body>

the stack trace is:

Failed to instantiate module App due to:

Failed to instantiate module analytics.mixpanel due to:

Unknown provider: currentUser

what is the error that you are getting? also please include the userFromServer modelu definition. — victor sosa
– victor sosa, Commented Sep 7, 2016 at 13:19
Please, provide full error message (including call stack) and the code for relevant modules. The listed code doesn't contain anything that could cause an error (except the fact that there's no userFromServer). Also, you're confusing injection with loading. Modules are being loaded, there's no problem with circular dependency. Dependencies are injected. — Estus Flask
– Estus Flask, Commented Sep 7, 2016 at 13:19

Estus Flask · Accepted Answer · 2016-09-07 13:44:56Z

1

This happens because currentUser service instance is injected into config block. Only service providers can be injected here.

Since currentUser is a constant object that doesn't depend on other services and it should be available during config phase, it may be constant service:

angular.module('userFromServer', [])
  .constant('currentUser', {
    <% if logged_in %>
      name: '<%= @User.name %>',
      first_name: '<%= @User.first_name %>',
      id: '<%= @User.id %>',
      uuid: '<%= @User.profile.uuid %>'
    <% end %>
  })

answered Sep 7, 2016 at 13:44

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

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

Comments

Aniket Sinha · Accepted Answer · 2016-09-07 13:18:30Z

1

Since your parent module App already has userFromServer injected in it, you don't need to inject it again in analytics.mixpanel.

answered Sep 7, 2016 at 13:18

Aniket Sinha

6,0316 gold badges39 silver badges50 bronze badges

3 Comments

Estus Flask Over a year ago

Actually, you need to load it for consistency it if both modules depend on this module. This is what modularity is about. Modules can be used or tested apart from each other this way.

Aniket Sinha Over a year ago

@estus The parent module App has already listed both analytics.mixpanel and userFromServer as it's dependency. So there's no need to inject userFromServer as a dependency separately for sub-module analytics.mixpanel again. I agree that if two completely independent modules have a dependency, they you can inject it separately, but here they are not independent, rather 1st module App already has 2nd module analytics.mixpanel as it's dependency.

Estus Flask Over a year ago

If App directly depends on userFromServer and analytics.mixpanel is removed from the app at some point, the app will stop working. Angular allows modules to be loaded in several places exactly to cover such cases, this is a feature of the framework and there's no need to avoid this.

Collectives™ on Stack Overflow

angular inject module into multiple modules

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related