Remove warning for package "was not injected in your file" when using Grunt?

Question

I have "angular-i18n" installed as a bower dependency.

When I run grunt serve or grunt build I have receive warning:

angular-i18n was not injected in your file. Please go take a look in "/$APP_ROOT/bower_components/angular-i18n" for the file you need, then manually include it in your file.

How can I remove this message?

Does making grunt insert this file into my index.html remove this warning?

Answer 1

Background

It appears that your Grunt tasks are using wiredep to look at your Bower dependencies and inject the tags for loading their associated files (link for CSS, script for JS, etc) into your HTML.

wiredep does this by looking at the bower.json file on your project to figure out what you need, then looking in the bower.json file of each dependency to figure out what they need, and so on. Having developed a dependency tree, wiredep uses the main property in the bower.json files to determine what files from each needed package should be linked into your HTML.

When a package does not have an appropriate bower configuration (missing bower.json or missing/improper main property), wiredep warns you about that problem so that you know it couldn't automatically add what you need. In other words, it's telling you that not all assets have been added to your built HTML, and that you need to manually intervene to add what's missing.

General solution

Generally, there is nothing you can do in your own code to correct this. Manually linking the file in your HTML (outside of the wiredep marked areas so as to avoid having it overwritten) will ensure your project works. wiredep, however, will always warn you when it runs because the package itself still has the problem. You'd need to open an issue to the owner of the problem package in order to ask them to correct their packaging meta info.

The project you're having issues with

I searched bower for the angular-i18n package and found that the project is hosted at https://github.com/angular/bower-angular-i18n . If you look at angular-i18n's bower.json you can see that it is missing the main property. This is why the warning is being issued.

As it turns out, though, it seems appropriate that this project does not offer a main property. The documentation for angular-i18n shows that you should bower install it, then manually link to the file that is appropriate for your desired locale. It would not be appropriate for this package to list a main file because it provides many files, none of which should be dictated as necessary by the package--it's a developer choice.

A possible solution for this case

If the warning really bothers you, or you do not like the need to manually link to the file, you could fork this package to your own GitHub account and modify the bower.json file to point main to the file you want loaded. Then you would remove angular-i18n as a dependency for your project, and add your fork's repo as a dependency instead.

Caveats:

1. This may cause issues keeping up to date if you are unfamiliar with maintaining Git repos/forks.
2. This will only work if angular-i18n is listed as an explicit dependency of your own project and is not being loaded in as a dependency for another project. If another project is loading this package, you'd have to start forking projects all the way down the tree such that you could override the configuration of each.

All in all, in this case it's probably best to manually link to the file you want and ignore the warning.