CODEWITHSUNDEEP
javascriptangularjsyeoman
Galactic Ranger
Galactic Ranger

Reputation: 882

Angular unknown provider error

I am having an issue with angular and yeoman when running grunt serve which minifies and outputs my angular app to my dist directory for production. When running my app in my local host everything seems to work fine but after doing a build something is happening that is not clear to me at the moment. Any help would be greatly appreciated.

This is the controller that I introduced to my project that is causing the issue:

var myPlayer

angular.module('myapp')
.controller('ShowCaseTabCtrl', function ($scope) {
    $scope.tabs = [
        {
            title:"Video",
            content:'templates/showcased-video.html',
        },
        {
            title:"Gallery",
            content:'templates/showcased-gallery.html',
        }
    ];
    // here I am firing this method on ng-include onload to ensure video js
    // is being properly instantiated
    $scope.initVideo = function() {
        videojs('showcase-video', {
            'controls': true,
            'autoplay': false,
            'preload': 'auto',
            'poster': 'images/posters/poster.jpg'
        }, function(){
            myPlayer = this;
            myPlayer.dimensions(900, 600);
            myPlayer.poster('images/posters/poster.jpg');
            myPlayer.src([
                { type: 'video/mp4', src: 'video/myvideo.mp4' },
                { type: 'video/ogg', src: 'video/myvideo.ogv' }
            ]);
        });

    }
});

This my view of the controller above:

<section ng-controller="ShowCaseTabCtrl">
<div class="mod-wrap full-bleed">
    <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" content="{{tab.content}}" active="tab.active">
            <ng-include src="tab.content" onload="initVideo()"></ng-include>
        </tab>
    </tabset>
</div>

Error I am getting after running grunt serve from yo-angular generator:

Error: [$injector:unpr] Unknown provider: aProvider <- a

Upvotes: 1

Views: 643

Answers (1)

ryeballar
ryeballar

Reputation: 30108

The cause is probably the minification of your js files.

Try the array notation in declaring your controllers, services and filters.

e.g.

controller('ShowCaseTabCtrl', ['$scope', function ($scope) {
   // Your code here
}]);

The reference is in the 5th step of the Angular Phonecat tutorial.

Upvotes: 3

Related Questions