Yeoman/Grunt generator for Angular + Polymer

Question

I try to work with AngularJS and Polymer (i actually use AngularJS for the Services eg. Token Auth and Polymer for the Material Design ) so i ask a simple method to build the scafolding for such kind of App (Polymer + AngularJS - localhost run with grunt) ? For the moment when i install :

 yo angular MyApp

i have the bower_components in the root directory and if i try to install Polymer through :

 bower install --save Polymer/polymer

So i install the Polymer in the AngularJS bower_components, (if i use the yo polymer generator the bower_components folder is in the /root/app/ folder and not in) And when i use grunt serve i get the Error (example with the core-toolbar) :

 core-toolbar was not injected in your file.
 Please go take a look in "/project-root/bower_components/core-component-page" for the file you need, then manually include it in your file.

so i think that i need to change something in the Gruntfile.js, but i do not know what ! Maybe is better use two bower_components folders ?

Did the script run npm install and bower install? If it didn't, try that first. — Marko Gresak
Yes tried, but not work , my problem is i think in Gruntfile.js that (the default in Yeoman angular ) have no problem to serve js file fo Angular Module, but give me this error when need to serve the .html Polymer : <link rel="import" href="bower_components/core-toolbar/core-toolbar.html"> ... — cicciosgamino
So at the END the problem is that i cannot serve the bower_components for AngularJs and the bower_components for Polymer in the same time .... through Gruntfile.js Angular App wait the bower_components from the root/ and Polymer from the /root/app ... — cicciosgamino
How can you even combine two generators? Doesn't the yeoman fail if you run generator in non-empty folder? — Marko Gresak
I use the Angular generator because i want use the test env for test the Angular code, im not interesting to test the Polymer code here. — cicciosgamino

cicciosgamino cicciosgamino · Accepted Answer · 2015-01-31T09:56:50

I solved the Problem, so i used the AngulaJS Generator for Yeoman, after that i moved the folder bower_components from the /project_root folder to the /project_root/app folder, so i modified the .bowerrc file with the new path of the bower_components folder :

 {
    "directory": "app/bower_components"
 }

So now i can use bower to in install the Polymer elements that i need, with bower as usual :

 bower install Polymer/core-toolbar

I do not use the --save for save the dependency in the package because when grunt/bower try to insert the link in the index.html file it fail, so delete the Polymer dependencies from the bower.json file and add them manually, other hint remove the link already added by grunt/bower about polymer in the index.html file and add the webcomponents.js :

 <!-- Polymer Section -->
 <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
 <!-- My imports -->
 <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">

Yeoman/Grunt generator for Angular + Polymer

1 Answers