Multiple directives asking for template on

Question

Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on:

(On console)

Inside index.html

<script src="js/dashboard/dashboard.module.js"></script>
<script src="js/dashboard/dashboard.component.js"></script>
<script src="js/dashboard/statbox.component.js"></script>

Inside dashboard.module.js

var dashboardModule = angular.module('dashboard', ['ngRoute']);

Inside dashboard.component.js

angular.module('dashboard').component('dashboard', {
templateUrl: 'templates/dashboard/dashboard.template.html',
controller: ['$scope', '$routeParams', '$http', '$rootScope', '$log', function DashboardController($scope, $routeParams, $http, $rootScope, $log) {
    ...stuff NOT REFERENCING STATBOX by any means...
}]
});

Inside statbox.component.js

angular.module('dashboard').component('statbox', {
templateUrl: 'templates/dashboard/statbox.template.html',
controller: ['$http', '$rootScope', '$log', function StatboxController($http, $rootScope, $log) {
    ... some random get request ...
}]
});

And inside app.js

var app = angular.module('buttonMasher', ['ngRoute', 'dashboard', ...]);

Inside dashboard.template.html

    ... stuff ...
    <div id="history">
        ... stuff ...

        <p><b>Statbox</b></p>
        <statbox></statbox>
    </div>

Inside statbox.template.html

<div id="statbox">
<p>{{$ctrl.statboxText}}</p>

What am I doing wrong and why do I get this multiple directives error?

Whenever I comment out <script src="js/dashboard/statbox.component.js"></script> from the index.html everything works but statbox controller is not getting loaded.

(Full project is here: Github: carloworks/masher - One can clone and run spring with profile "dev" enabled.)

please add the html code where you invoke both the components — Karim, Mar 27 '17 at 20:56

Karim · Accepted Answer · 2020-10-26T10:44:55.443

12

Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on

Most likely it's because you included the .js twice in your index.html and the compiler at the time of binding the directive doesn't know which template to choose.

you should check:

the compiled html page to see if you included twice statbox.js
make sure you don't have multiple spots in your code where you define the same .component('statbox',{})

edited Oct 26 '20 at 10:44

answered Mar 27 '17 at 21:08

Karim

8,454
3
25
33

I have not included twice any js file – Jue Debutat Mar 27 '17 at 21:11
i'm talking about the statbox .js file – Karim Mar 27 '17 at 21:11
So I should remove it and only have dashboard included? How is the controller of the statbox going to work then? – Jue Debutat Mar 27 '17 at 21:19
no just focus on stabox component, should check for all the occurrency of .component('statbox' in your code, in my opinion you included twice the js or declared twice the component – Karim Mar 27 '17 at 21:25
2

worked for me.. Thanks. mistakenly included js twice – pranavjindal999 Aug 01 '17 at 10:54
I had put the js file into my pom.xml minify section twice when I saw this error. – brt Jun 01 '20 at 19:25

score 2 · Answer 2 · answered May 25 '17 at 13:40

2

Late to the party here but in my case it happened because I stupidly named the directive the same thing as the variable that was being passed into it so when the directive was being used it was trying to recursively include itself!

answered May 25 '17 at 13:40

David

589
6
21

1

YES. This is what helped me figure this out. In my case another developer setup a directive and used the exact directive name in his scope setup. So it was probaly same as your problem. – enorl76 Jan 04 '19 at 00:01

score 1 · Answer 3 · answered Jan 30 '18 at 15:31

I had this issue with Typescript. I renamed some ts files and visual studio (2015) kept the old generated js files. Somehow, angular used both new and old js files, and I ended up with this error. I did a clean (which deletes all generated js files), build and it worked!

Multiple directives asking for template on

3 Answers3