Popcorn was not injected in your file

Question

While staging with grunt (grunt serve) I am getting:

Running "bower-install:app" (bower-install) task

popcornjs was not injected in your file.
Please go take a look in "app\bower_components\popcornjs" for the file you need, then manually include it in your file.

I have added Popcorn.js to bower.json:

{
    "name": "NAME",
    "version": "0.0.0",
    "dependencies": {
        "angular": "1.2.6",
        .
        "popcornjs": "~1.3.0",
        .
        "angular-slugify": "1.0.0"
    },
    "devDependencies": {
        "angular-mocks": "1.2.6",
        "angular-scenario": "1.2.6"
    }
}

So as to my index.html:

<s_cript src="bower_components/popcornjs/popcorn.js"></script>
<s_cript src="bower_components/popcornjs/modules/player/popcorn.player.js"></script>
<s_cript src="bower_components/popcornjs/players/youtube/popcorn.youtube.js"></script>
<s_cript src="bower_components/popcornjs/plugins/code/popcorn.code.js"></script>

.'.'

Am I doing missing something? The other libraries working fine.

Answer 1

I just did a quick search on popcornjs. The repo you pull from when you say bower install --save popcornjs is https://github.com/mozilla/popcorn-js/. That repo has a bower.json file, and that file has a main property in it. That property tells grunt-bower-install what file to inject in your HTML.

However, you are using version ~1.3.0, which would pull down this: https://github.com/mozilla/popcorn-js/tree/v1.3.0. That doesn't have a bower.json, thus grunt-bower-install has no way of knowing what file to include.

The solution is to manually include it in your HTML, or upgrade to the newer version that uses Bower properly.