diegonetto / generator-ionic Goto Github PK

... read https://stackoverflow.com/questions/18923191/npm-install-fails

And do:

sudo chown -R whoami ~/.npm
sudo chown -R whoami /usr/local/lib/node_modules

Thanks :)

generator-angular has a number of sub-generators that are fairly useful. In particular, it allows you to easily bootstrap an angular app's controllers, filters, providers, routes and so on, by typing yo angular:controller, yo angular:filter and so on. Given Ionic's heavy reliance on Angular, this would be a useful feature in my view. I have some time I can devote to this, and it should be relatively easy (pretty much drag and dropping from generator-angular). I have assembled below the list of generator-angular sub-generators that I use a lot, in order of importance and interdependence, and will try to implement these first - but I am happy to take community suggestions on what you think are more or less important.

1. controller
2. view
3. route
4. factory
5. service
6. provider
7. filter
8. directive

https://github.com/phonegap-build/PushPlugin is a popular and widely used Cordova plugin and supporting its configuration right out of the box would be a great addition to this generator.

When use:

yo angular:[command]

it creates controllers, services, views and so on, in generator-angular default folders that is different from Ionic seed standard.

Maybe if generator-ionic uses an seed app with generator-angular defaults could be better to continue using yo angular:[commands]

Hi Diego
Great job providing this ionic generator !
I just stumbled into a few small issues when installing Bower components bower.json is not updated and therefore index file is not updated too. I fixed it by hand by updating bower.json. Some bower components can't be installed because they are missing the main section in their bower.json file. Of course I have to fix this manually.
I also have a minor problem with the vendor library. I put some external javascript which is not available through bower. The build command doesn't copy these files to the dist/platform folders. css files are put in the .tmp library, but not copied to dist/platform folders.

Jens-Ole

Hi Diego

Have just updated your generator (npm install -g generator-ionicjs) the updated yo also then ran 'yo ionicjs' and selected No Compass, added statusbar and splashscreen to plugins then the generator fails with attached screenshot error - basicall no saying not a cordova structure I think - any ideas

Cannot seem to find the magical place to add my personal assest such that they get added to the distribution build other than modifying the platform directories directly.

I was assuming there would be a task during the distribution that would address this.

would have jumped in myself, but I am pretty new to writing grunt scripts and don't want to mess things up

it'd be nice if we could choose to include the sass files from ionic so we can easily customize our apps color scheme. http://ionicframework.com/tutorials/customizing-ionic-with-sass/

Hey guys,

I was a bit annoyed by the speed of ngmin, so i replaced it with ngannotate (same api) and got in the grunt build task a speed improvement of 10+ sec.

Here is a great The future of ngmin and ng-annotate issue.

It seems not only me had this problem: #36, #30

Tell me if you're interested in a PR.

I think it would make a great [Y/n] option to include ngCordova, which as you guys probably know by now is made by the good folks at Drifty.

Error: EINVAL, invalid argument
at new Socket (net.js:156:18)
at process.stdin (node.js:664:19)
at Object.Interface.createInterface (C:\Users\user\AppData\Roaming\npm\node_modules\yo\node_modules\insight\node_modules\inquirer\node_modules\readline2\index.js:31:43)
at PromptUI.UI (C:\Users\user\AppData\Roaming\npm\node_modules\yo\node_modules\insight\node_modules\inquirer\lib\ui\baseUI.js:23:40)
at new PromptUI (C:\Users\user\AppData\Roaming\npm\node_modules\yo\node_modules\insight\node_modules\inquirer\lib\ui\prompt.js:26:8)
at Object.inquirer.prompt (C:\Users\user\AppData\Roaming\npm\node_modules\yo\node_modules\insight\node_modules\inquirer\lib\inquirer.js:39:10)
at Insight.askPermission (C:\Users\user\AppData\Roaming\npm\node_modules\yo\node_modules\insight\lib\insight.js:90:11)
at Object. (C:\Users\user\AppData\Roaming\npm\node_modules\yo\cli.js:138:13)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)

As this grows and becomes more popular, it should support more than just pure javascript. There should be options at the start of the generator to select CoffeeScript.

I know the angular generator form Yeoman comes with the option to include coffee script So that can also be a good case to have that generator be pulled in as a sub-generator and have some of its powerful features.

i ran in a new dir:
yo ionicjs

git this error:

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)

node version v0.10.26
npm 1.4.3
yeoman 1.1.2

I installed the ionic-generator (v0.3.2) for yeoman and scaffolded an application.

I generated the "side menu project" and after having started it in the browser (grunt serve), I can't click any item in the menu. When inspecting the properties in the browser, I see that the class "disable-user-behavior" has been added to ion-list. Although I'm not sure it is related.

I also generated the same project a few weeks ago directly with ionic (thus, without yeoman) and I don't have this issue.

I'm sure this is coming, but just in case the announcement was missed:

http://ionicframework.com/blog/ionic-huge-update/

When attempting to run the generated app in the 64-bit iOS simulators, the build fails with the error below.

ld: warning: ignoring file /Users/user/Library/Developer/Xcode/DerivedData/myApp-fekkqnucwtxcyyevxdasanlqzbsd/Build/Products/Debug-iphonesimulator/libCordova.a, file was built for archive which is not the architecture being linked (x86_64): /Users/user/Library/Developer/Xcode/DerivedData/myApp-fekkqnucwtxcyyevxdasanlqzbsd/Build/Products/Debug-iphonesimulator/libCordova.a
Undefined symbols for architecture x86_64:
"_CDVLocalNotification", referenced from:
-[AppDelegate application:didReceiveLocalNotification:] in AppDelegate.o
"_CDVPluginHandleOpenURLNotification", referenced from:
-[AppDelegate application:handleOpenURL:] in AppDelegate.o
"OBJC_CLASS$_CDVCommandDelegateImpl", referenced from:
OBJC_CLASS$_MainCommandDelegate in MainViewController.o
"OBJC_CLASS$_CDVCommandQueue", referenced from:
OBJC_CLASS$_MainCommandQueue in MainViewController.o
"OBJC_CLASS$_CDVViewController", referenced from:
OBJC_CLASS$_MainViewController in MainViewController.o
"OBJC_METACLASS$_CDVCommandDelegateImpl", referenced from:
OBJC_METACLASS$_MainCommandDelegate in MainViewController.o
"OBJC_METACLASS$_CDVCommandQueue", referenced from:
OBJC_METACLASS$_MainCommandQueue in MainViewController.o
"OBJC_METACLASS$_CDVViewController", referenced from:
OBJC_METACLASS$_MainViewController in MainViewController.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

I was having challanges getting the repo to work when checked out with other developers on my team when I realized a number of issues are related to what actually should be checked into the repo and what should not, specifically in the platform directories.

Wondering if there was any recommended guidance from other's using the generator

Hi

Wondered if you could/should include the StatusBar Plugin in your list of plugins that can be added at generation time.

Thanks for your work on this
Darren

Not sure if this is an issue on my end or what but I tried to run Grunt serve and got this massive error.

     Warning: /Library/Ruby/Site/1.8/rubygems/ext/builder.rb:12: uninitialized constant Gem::UserInteraction (NameError)
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Site/1.8/rubygems/ext.rb:13
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:1431:in `build_extensions'
    from /Library/Ruby/Site/1.8/rubygems/stub_specification.rb:60:in `build_extensions'
    from /Library/Ruby/Site/1.8/rubygems/basic_specification.rb:56:in `contains_requirable_file?'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:925:in `find_inactive_by_path'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `find'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:924:in `each'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:924:in `find'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:924:in `find_inactive_by_path'
    from /Library/Ruby/Site/1.8/rubygems.rb:185:in `try_activate'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:132:in `require'
    from /Library/Ruby/Site/1.8/rubygems/user_interaction.rb:8
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Site/1.8/rubygems/config_file.rb:7
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:1430:in `build_extensions'
    from /Library/Ruby/Site/1.8/rubygems/stub_specification.rb:60:in `build_extensions'
    from /Library/Ruby/Site/1.8/rubygems/basic_specification.rb:56:in `contains_requirable_file?'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:925:in `find_inactive_by_path'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `find'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:924:in `each'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:924:in `find'
    from /Library/Ruby/Site/1.8/rubygems/specification.rb:924:in `find_inactive_by_path'
    from /Library/Ruby/Site/1.8/rubygems.rb:185:in `try_activate'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:132:in `require'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/sprites/engines/chunky_png_engine.rb:2
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/sprites/engines.rb:25
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/sprites.rb:18
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions.rb:10
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass.rb:5
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass.rb:4:in `each'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass.rb:4
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:73:in `gem_original_require'
    from /Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:73:in `require'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:20
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:8:in `fallback_load_path'
    from /Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:19
    from /usr/bin/compass:23:in `load'
    from /usr/bin/compass:23 Use --force to continue

does copy main.sass but not main.css

Right now we're doing what other generators do (default to using directory name), but it would be convenient if we allowed customization via prompts.

The default 'ionic' installs the test project, which is rich.

Sorry to have to say this, but your setup is very poor.

First off, love the generator. I think it is worthwhile to consider removing the ruby Sass/Compass requirement in favor of the more lightweight node-sass and bourbon. Thoughts?

Nice generator!
When running grunt serve:dist, fonts are not moved over to the www dir. Since the ionic.css addresses them as "../fonts/icons.eot, it seems they would have to be moved from "app/bower_components/ionic/release/fonts" to "www/fonts" to be relative to the concat/min'd css. Gruntfile mod?

The also need to be moved the "platforms/ios/www" folder as well.

Running sudo npm install -g generator-ionicjs not working, getting the following.
npm http GET https://registry.npmjs.org/generator-ionicjs
npm http 304 https://registry.npmjs.org/generator-ionicjs
npm http GET https://registry.npmjs.org/generator-ionicjs/-/generator-ionicjs-0.2.4.tgz
npm http 200 https://registry.npmjs.org/generator-ionicjs/-/generator-ionicjs-0.2.4.tgz
npm ERR! Error: shasum check failed for /home/richard/tmp/npm-3441-UHl9KnWR/1397221533806-0.8818220286630094/tmp.tgz
npm ERR! Expected: d7e2e02a74e9bf8057c2cfd7d458e674d22e8cf3
npm ERR! Actual: 33231913270e7d08ceaa597fd1702dcbe00036ae
npm ERR! From: https://registry.npmjs.org/generator-ionicjs/-/generator-ionicjs-0.2.4.tgz
npm ERR! at /usr/lib/node_modules/npm/node_modules/sha/index.js:38:8
npm ERR! at ReadStream. (/usr/lib/node_modules/npm/node_modules/sha/index.js:85:7)
npm ERR! at ReadStream.EventEmitter.emit (events.js:117:20)
npm ERR! at _stream_readable.js:920:16
npm ERR! at process._tickCallback (node.js:415:13)
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/npm/npm/issues

npm ERR! System Linux 3.11.0-18-generic
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install" "-g" "generator-ionicjs"
npm ERR! cwd /tmp
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /tmp/npm-debug.log
npm ERR! not ok code 0

When I build with grunt, everything builds properly but when I try to run the generated code, the page fails to load and all I see is a white screen.

I noticed that there's this error in the console:

Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a <- $http <- $templateFactory <- $view <- $state

That is most likely due to minification. The weird thing is that when I generate a project and I build without any modifications to the code, everything works well but in my real project which has all my code, it breaks.

What would be a good way to fix this?

I had a project that I had created a few versions back and though I had kept the generator updated with each new version, I had to recreate the project to get the new features.

Is there a project level update function that can update the grunt files to keep up to date with new features?

For example, the project version I had didn't include any testing. But the Generator did have testing included in version 0.9. I should be able to run, for instance...

grunt: project update

Then be able update the grunt file and run bower install and npm install to include any new packages. This would keep existing project up to date as the generator updates

Nice Generator.

Using v 0.0.6 here.

Running the app in the iOS emulator results in all icons not being shown. This is because the path to all instances of the icon font inside vendor.css is wrong.

It is
"/bower_components/ionic/release/fonts/ionicons.eot"
"/bower_components/ionic/release/fonts/ionicons.ttf"
etc.

But it should be
"../bower_components/ionic/release/fonts/ionicons.eot"
"../bower_components/ionic/release/fonts/ionicons.ttf"

This poses some unique challenges but is theoretically possible.

We could add a grunt serve:<platform> task that builds the platform's Cordova assets but also spins up a connect server and injects the livereload snippet.

Some considerations will need to be made to the current workflow since we are using the www/ directory for built assets and then having the cordova:build task work its magic and publish to the correct platform/ directories.

For this to possibly work we would need a separate workflow that would put un-minified assets into the www/ directory, and re-run cordova:build as watched files changed.

There would have to be a new (dynamic) watch task looking at platform specific files.

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)

for me to test my application, I need to run it in the emulator... unless I am doing something wrong, that means i have to run grunt build:dist that task runs ngmin which takes 10 seconds to run for each cycle.

Any suggestions on how to structure a task that just copies over the files?

I am trying to build the "side menu" template, without any changes, for Android.
Every things seems nice. but when i try to execute the app on my moto g, androd go back to app menu. the same thing happens on Bluestacks. On Windroy a wild "app_process.exe stopped work" message appears. 'grunt emulate:android ' command say "done without errors" but nothing happens.
Any tips?

http://phonegap.com/blog/2014/04/23/phonegap-developer-app/
I tried connecting to the livereload server but it didn't work. This looks promising!

Again, not too much of an issue but a question.

Seeing as some of the Cordova CLI functions have been wrapped up with grunt, how are plugins being handled now?

the following command errors out

grunt plugin:rm:org.apache.cordova.console
dyld: lazy symbol binding failed: Symbol not found: _node_module_register
  Referenced from: /Users/harrymoreno/programming/js/ionic-firebase-todo-app/node_modules/karma/node_modules/chokidar/node_modules/fsevents/build/Release/fse.node
  Expected in: dynamic lookup

dyld: Symbol not found: _node_module_register
  Referenced from: /Users/harrymoreno/programming/js/ionic-firebase-todo-app/node_modules/karma/node_modules/chokidar/node_modules/fsevents/build/Release/fse.node
  Expected in: dynamic lookup

[1]    88354 trace trap  grunt plugin:rm:org.apache.cordova.console

I was inferring how grunt would be called to remove a plugin.
Following that command this worked.

cordova plugin rm org.apache.cordova.console
Uninstalling org.apache.cordova.console from android
Uninstalling org.apache.cordova.console from ios
Deleting plugin org.apache.cordova.console
Found 1 removable plugins. Deleting them.

A different cordova generator I used to use included grunt-rev, so the compiled JS/CSS assets in www would be "versioned".

I.e.

rev: {
  dist: {
    files: {
      src: [
        'www/scripts/{,*/}*.js',
        'www/styles/{,*/}*.css'
      ]
    }
  }
},

Running "rev:dist" (rev) task
www/scripts/scripts.js >> cd7e4895.scripts.js
www/scripts/vendor.js >> 7efd94d7.vendor.js
www/styles/main.css >> 7ad65e9e.main.css
www/styles/vendor.css >> 6e45766f.vendor.css

Perhaps add this to this generator?

I have had issues with mobile safari caching assets before, so this is a handy addition.

Hi

Can you enhance your generator to ask for a Name and ID that can be used on the cordova create command rather than defaulting to the directory name.

ie cordova create com.darrenahunter.myionicapp “My Ionic App”

would save editing files after creation

thanks again

Building views in the UI is cool but we need to decide whether or not to minify assets before building to the /www directory so that we can use cordova commands.

vote for adding support for environment configurations. Serious applications usually have development, staging and production environments to roll out new features.
http://newtriks.com/2013/11/29/environment-specific-configuration-in-angularjs-using-grunt/

npm install -g generator-ionic
npm ERR! 404 'generator-ionic' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it

Consider yourself bugged

Installing ionic via yo, the installer responds:

Installing selected Cordova plugins, please wait. ✗ Please run yo ionicjs in an empty directory, or in that of an already existing cordova project.

A screencap of the issue:

I think a nice addition to the build step would be help with annotations.

https://www.npmjs.org/package/ng-annotate

This node module will annotate your angular code automatically for during the build step.

It is non-intrusive so your source code stays exactly the same otherwise

Seems like a nice thing to add. I know I still get tripped up when minifying code.

Hi,

generator-ionic is the best generator/seed I found, for the ionic framework!

it would be nice if one didn't even have to call bower install. The plugin grunt-bower-task could be added into GruntFile, in order to update bower dependencies.
It would ensure also ensure, that if a developer adds a new bower-dependency, then other developers (and build-server) get it automatically.

Or is there any reason for not introducing this feature?

First off let me say, I've been wanting this generator since I've started using Ionic so good work and thanks!

This isn't too much of an issue but a question/suggestion. Any particular reason why you don't use the bundled version of the javascript? Makes things a bit cleaner so that you only have to include one js file instead of 4-5.

I tried to follow along https://www.npmjs.org/package/generator-ionic

npm install -g generator-ionic
mkdir my-ionic-project && cd $_
yo ionic

Then I tried to cordova platform add ios and it said 'Current working directory is not a Cordova-based project'. But if I tried to grunt platform:add:ios, it works.

I tried to find solution for it and it seems that Cordova application should have .cordova directory along with config.xml and www directory should contain config.xml as well.

I copied config.xml using cp config.xml .cordova and cp config.xml www. Then run cordova platform add ios and it worked.

Is this happen to any one or just me?

Hi,
I generated a new projet just following the generation steps provided on the main page of generator-ionic. The command 'grunt serve' works fine. But the next one 'grunt build' fails with the following error:

...
Running "cordova:build" task

c:\Data\Kai\panini\dev\stigga-stack\client3\node_modules\grunt-contrib- compass\node_modules\tmp\lib\tmp.js:261
throw err;
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)

at Process.ChildProcess._handle.onexit (child_process.js:779:34)

what did I wrong?

Thank you in advance for your help!

Jerome

Not an issue that one could not solve himself, but you might want to update it anyway:

Greetings

Running "jshint:all" (jshint) task

Gruntfile.js
line 287 col 40 Missing space after 'function'.
line 293 col 37 Missing space after 'function'.
line 296 col 37 Missing space after 'function'.
line 299 col 31 Missing space after 'function'.

✖ 4 problems

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

In my app I installed some angular directives with:

bower install --save angular-leaflet
bower install --save angular-deckgrid

and so on. I also need to include googlemap api js manually.
Everything is fine when running

grunt serve

But when running

grunt serve:dist

I get a google related error, as if the gmaps js wasn't included.
This is the relevant part (i think) of index.html:

<!-- build:js scripts/vendor.js -->
<!-- <script src="vendor/someContribJs.js"></script> -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/leaflet-dist/leaflet.js"></script>
<script src="bower_components/angular-leaflet/dist/angular-leaflet-directive.js"></script>
<script src="bower_components/angular-deckgrid/angular-deckgrid.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<!-- endbower -->
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Google.js"></script>
<!-- endbuild -->

Any hints on what I'm doing wrong here?