Incomplete injection of dependencies, but no error reported.

[jimnorth55]

I am having an issue with Wiredep failing to completely inject bower dependencies. I am running Wiredep directly from the Node prompt in the root folder.

Here is a copy of the node command window with the output generated by wiredep. Looking at the output, all of the JS and CSS that should be injected is listed.

require('wiredep')({ src: 'index.html' });
{ packages:
   { 'animate.css':
      { main: [Object],
        type: [Object],
        name: 'animate.css',
        dependencies: {} },
     jquery:
      { main: [Object],
        type: [Object],
        name: 'jquery',
        dependencies: {} },
     bootstrap:
      { main: [Object],
        type: [Object],
        name: 'bootstrap',
        dependencies: [Object] },
     fontawesome:
      { main: [Object],
        type: [Object],
        name: 'font-awesome',
        dependencies: {} },
     angular:
      { main: [Object],
        type: [Object],
        name: 'angular',
        dependencies: {} },
     'angular-sanitize':
      { main: [Object],
        type: [Object],
        name: 'angular-sanitize',
        dependencies: [Object] },
     toastr:
      { main: [Object],
        type: [Object],
        name: 'toastr',
        dependencies: [Object] },
     moment:
      { main: [Object],
        type: [Object],
        name: 'moment',
        dependencies: {} },
     'angular-ui-router':
      { main: [Object],
        type: [Object],
        name: 'angular-ui-router',
        dependencies: [Object] },
     'extras.angular.plus':
      { main: [Object],
        type: [Object],
        name: 'extras.angular.plus',
        dependencies: [Object] },
     'angular-breadcrumb':
      { main: [Object],
        type: [Object],
        name: 'angular-breadcrumb',
        dependencies: [Object] },
     'angular-ui-utils':
      { main: [Object],
        type: [Object],
        name: 'angular-ui-utils',
        dependencies: [Object] },
     'angular-strap':
      { main: [Object],
        type: [Object],
        name: 'angular-strap',
        dependencies: [Object] },
     ngSmoothScroll:
      { main: [Object],
        type: [Object],
        name: 'angular-smooth-scroll',
        dependencies: [Object] },
     'angular-animate':
      { main: [Object],
        type: [Object],
        name: 'angular-animate',
        dependencies: [Object] },
     'angular-form-for':
      { main: [Object],
        type: [Object],
        name: 'angular-form-for',
        dependencies: {} },
     lodash:
      { main: [Object],
        type: [Object],
        name: 'lodash',
        dependencies: {} },
     'jquery-ui':
      { main: [Object],
        type: [Object],
        name: 'jquery-ui',
        dependencies: [Object] } },
  js:
   [ 'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\jquery\\dist\\jquery.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\bootstrap\\dist\\js\\bootstrap.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular\\angular.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-sanitize\\angular-sanitize.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\toastr\\toastr.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\moment\\moment.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-ui-router\\release\\angular-ui-router.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\extras.angular.plus\\ngplus-overlay.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-breadcrumb\\release\\angular-breadcrumb.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-ui-utils\\ui-utils.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-strap\\dist\\angular-strap.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-strap\\dist\\angular-strap.tpl.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\ngSmoothScroll\\angular-smooth-scroll.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-animate\\angular-animate.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-form-for\\dist\\form-for.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\lodash\\lodash.js',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\jquery-ui\\jquery-ui.js' ],
  css:
   [ 'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\animate.css\\animate.css',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\bootstrap\\dist\\css\\bootstrap.css',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\fontawesome\\css\\font-awesome.css',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\toastr\\toastr.css',
     'C:\\WebApplicationProjects\\PMS\\PMS.Web\\bower_components\\angular-form-for\\dist\\form-for.css' ] }
>

None of the CSS is being injected, and only two of the JS dependencies are injected as shown below

   <!-- bower:css -->
   <!-- endbower -->

 ...

    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular-breadcrumb/release/angular-breadcrumb.js"></script>
    <!-- endbower -->

Is there some way I can troubleshoot what is going on? I have searched several sources and spent most of the day on this and am getting nowhere. If you can point me in the right direction I would appreciate it.

Thanks, Jim

[stephenplusplus]

Can you paste in your bower.json file so I can test locally? Haven't heard of anything like this before.

[jimnorth55]

Stephen,

Here is my bower.json file. Thanks for looking into this.

{
  "name": "PMS.Web",
  "version": "0.1.0",
  "description": "Polaris Microsystems Web Site",
  "authors": [
    "Jim North"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components"
  ],
  "devDependencies": {},
  "dependencies": {
    "animate.css": "~3.2.6",
    "jquery": "~2.1.3",
    "bootstrap": "~3.3.4",
    "fontawesome": "~4.3.0",
    "angular": "~1.3.15",
    "angular-sanitize": "~1.3.15",
    "toastr": "~2.1.1",
    "moment": "~2.10.2",
    "angular-ui-router": "~0.2.13",
    "extras.angular.plus": "~0.9.2",
    "angular-breadcrumb": "~0.3.3",
    "angular-ui-utils": "~0.2.3",
    "angular-strap": "~2.2.1",
    "ngSmoothScroll": "~1.7.1",
    "angular-animate": "~1.3.15",
    "angular-form-for": "~3.0.6",
    "lodash": "~3.8.0",
    "jquery-ui": "~1.11.4"
  },
  "overrides": {
    "boostrap": {
      "main": ["dist/js/bootstrap.js", "dist/css/bootstrap.css"]
    }
  }
}

[jimnorth55]

Has anyone been able to reproduce this issue?

[ghost]

I am having a similar issue, css files are missing.

[stephenplusplus]

Is it possible there are references to the files that aren't being injected elsewhere in the source file?

Example:

<html>
  <head>
    <!-- since it's detected here... -->
    <!--<script src="bower_components/jquery/jquery.js"></script>-->
  </head>
  <body>
    <!-- ...it won't be injected here -->
    <!-- bower:js -->
    <!-- endbower -->
  </body>
</html>

We're removing this behavior for the next release.

[stephenplusplus]

I just ran a test using a new folder and the pasted bower.json file. After running bower install and the cli wiredep -s index.html, my file was updated to look like this:

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/toastr/toastr.css" />
<link rel="stylesheet" href="bower_components/angular-form-for/dist/form-for.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/toastr/toastr.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="bower_components/angular-breadcrumb/release/angular-breadcrumb.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.js"></script>
<script src="bower_components/ngSmoothScroll/angular-smooth-scroll.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-form-for/dist/form-for.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<!-- endbower -->

[ghost]

No, there are only references in the head section. I am missing the bootstrap.css, It worked 14 days ago, now It doesn't.

[stephenplusplus]

Our last release of wiredep was 12/10/14. Can you create a separate project with the bare minimum files to reproduce?

[ghost]

I have now tried with a new (minimal) project and still the same issue.

Node.js version: 0.10.35 Grunt version: 0.4.5 Wiredep: version 1.8.0 / 1.9.0 / 2.0.0

bower.json: { "name": "test", "version": "1.0.0", "dependencies": { "bootstrap": "~3.3.4" } }

bower:css bootstrap.css still missing. endbower

[stephenplusplus]

Do you have overrides set up? All that should be injected from bootstrap is: https://github.com/twbs/bootstrap/blob/v3.3.5/bower.json#L17

I would bet your project needs to depend on 3.3.4 of bootstrap or use overrides to find the CSS file you need.

[ghost]

That solved the problem.

Thank you very much :)