user2954587 user2954587 - 1 year ago 70
AngularJS Question

angular inject module into multiple modules

I'm loading a module on my base html page called

. 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
(angular mixpanel). Is this a circular dependency error or am I missing something? should
be available to all modules? How can I inject
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>

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


the stack trace is:

Failed to instantiate module App due to:

Failed to instantiate module analytics.mixpanel due to:

Unknown provider: currentUser

Answer Source

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: '<%= %>',
      first_name: '<%= @User.first_name %>',
      id: '<%= %>',
      uuid: '<%= @User.profile.uuid %>'
    <% end %>