Angular CLI and bower

Hi everyone and sorry if it is not the right place to ask this.

I am currently working on a project with angular-cli, I can currently add files to the vendor folder using the ember-cli-build.js file. But I also need to use packages from bower in my project and it seems like currently angular-cli does not support this functionnality. I was wondering the bower support was in the roadmap or not at all ?

I managed to do what i want by modifying the angular2-app.js file and adding this:

Angular2App.prototype._getVendorNpmTree = function () {
  var vendorNpmFiles = [
    'systemjs/dist/system-polyfills.js',
    'systemjs/dist/system.src.js',
    'es6-shim/es6-shim.js',
    'angular2/bundles/angular2-polyfills.js',
    'rxjs/bundles/Rx.js',
    'angular2/bundles/angular2.dev.js',
    'angular2/bundles/http.dev.js',
    'angular2/bundles/router.dev.js',
    'angular2/bundles/upgrade.dev.js'
  ];

  if (this.options.vendorNpmFiles) {
    vendorNpmFiles = vendorNpmFiles.concat(this.options.vendorNpmFiles);
  }

  var vendorNpmTree = new Funnel('node_modules', {
    include: vendorNpmFiles,
    destDir: 'vendor'
  });

 /* added code to look for files in the bower_components folder */
  var bowervendorNpmTree = new Funnel('bower_components',{
     include:vendorNpmFiles,
     destDir: 'vendor' 
  });

  var assets = mergeTrees([vendorNpmTree,bowervendorNpmTree]);
  return assets;
};

Is this an acceptable way to do it ?

Thank you very much for your answers, Best Regards,

David

[nosachamos]

Isn’t the .bowerrc a problem for prod builds? You definitely don’t want the whole bower_components in your production build, but instead just pick the css and js so they can be bundled, minified, etc.

Bower is still a very popular frontend package manager, and no doubt the simpler when it comes to managing conflicting versions of dependencies and packages. Ember cli is a huge success, entirely based on bower. IMHO skipping bower and relying entirely on npm is not a good move. NPM may become the best package manager for the frontend, but as of right now, for many workflows bower is still needed.

[filipesilva]

@praditha the CLI has changed a lot since this issue was first discussed. Nowadays to use bower libraries you shouldn’t need to configure the bower path.

Instead, add global scripts/styles as described in the following wiki pages:

• https://github.com/angular/angular-cli/wiki/stories-global-scripts
• https://github.com/angular/angular-cli/wiki/stories-global-styles

Remember that this path is relative to your app root (usually src/), not to the project root.