Several directives requesting a template for

Question

Error: [$ compile: multidir] Several directives [statbox, statbox] requesting a template:

(On the 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 am I getting this error with several directives?

Whenever I comment <script src="js/dashboard/statbox.component.js"></script> from index.html everything works, but the statbox controller does not load.

(The full project is here: Github: carloworks / masher - You can clone and run spring with the "dev" profile enabled.)

Answer 1

Error: [$ compile: multidir] Several directives [statbox, statbox] request a template on

this error most likely occurs when you include the .js file twice in your index.html, and the compiler does not know which template to choose when binding the directive.

you have to check

• compiled HTML page to see if you included statbox.js twice
• make sure your code doesn’t have multiple places where you define the same .component('statbox',{})

Answer 2

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

Answer 3

I had a problem with Typescript. I renamed some ts files, and visual studio (2015) saved the old js files created. Anyway, angular used both new and old js files, and I ended up with this error. I did a clean one (which removes all the generated js files), builds and works!