Angular CLI and bower

[dgoexail]

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

[filipesilva]

Hm, this is somewhat of a tough cookie.

I'm not very knowledgeable of SystemJS, but I get the impression that as far as bower modules are concerned, they should be loaded as globals, and maybe shimmed.

A lot of bower packages also require custom css as well. Using sass you could load it there, otherwise you probably need to do it in index.html.

Either way, the bower_components needs be added to the funnels for this to work.

/cc @hansl @jkuri

[jkuri]

Hi @dgorobopec,
yes, this works but only until you'll update angular-cli to the newer version. Right now, I would personally set directory path in .bowerrc to public/bower_components; everything from the public dir gets copied as is into the dist dir. Not sure this is the solution you are looking for, but AFAIK we won't add bower_components into some separate funnel as we are skipping bower in the ng new already. Are you sure that the packages you are using are not on npm?

[dgoexail]

Well i am kind of new in the world of web development so i may not proceed how i should.
Some of the packages i install through bower are also available in npm but not in a browserified state (i don't know if it is the correct way to call it), i mean when i try to use them errors of 'require is not defined' are outputted in the console.
I though that bower was a package manager aiming for frontend and providing packages directly compatible with browser in opposition with npm which is more 'node' oriented.

I do not know if i was clear enough with my explanation. I will keep the modification i did for now but will look in a way to manage all my packages with npm.

[dgoexail]

@jkuri , I misunderstood what you explained, it was too early in the morning ^^
The .bowerrc file solution is a good solution i'll implement it.

Thank you very much for your help, both of you @jkuri @filipesilva .

[filipesilva]

Glad to hear it's working for you now!

On Thu, Apr 7, 2016, 11:07 dgorobopec notifications@github.com wrote:

Closed #397 #397.

—
You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub
#397 (comment)

[zpydee]

Thanks for this thread. .bowerrc solved my problem too (using vaadin-components, must use bower)

[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.

[praditha]

Hi, sorry I'm still newbie on angular 2 and I still don't understand how to use the .bowerrc file.

Currently I put my bower_components folder at the root of my project (same level as node_modules folder).
I've tried to create a new file .bowerrc at the root of project and I just put bower_components on it.

Then I tried to ng build the project, but the bower_components is not copied to folder dist.

Here is my project structure:

| bower_components
| dist
| node_modules
| src
|    | app
|    |   | ...
| .bowerrc     <-- here I put bower_components path
| bower.json
| package.json

Is there something I've missed ?

[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.

[praditha]

Wow, @filipesilva those are nice feature.
If I load the javascripts and styles files globally, it mean I don't need to put the loader script (<script src="script.js"> or <link rel="stylesheet" href="styles.css">) on html file right,.?

[filipesilva]

Yes, that is right. We process index.html inside the build system so if you were to put script/link tags, they wouldn't work. Putting it in the .angular-cli.json tells the build system to include and process them.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}