Side menu with Tabs issue

Sorry for the late reply.
It was very nice app. While i was running, facing some errors. Is there any way to get this .apk file.
I don’t want to place my files inside src folder. I just want to place my files inside www folder.

I am providing this plunker http://codepen.io/gnomeontherun/pen/tbvdH.
In this example also we are facing the same problem. Will you please update this plunker.

Thanks in advance
Ramprasad

Not quite understanding what you mean.

Did you try to install and run my “quickstarter” app according to the instructions in the README ? And if yes did you get “errors” while running it (as you suggest) and if so what kind of “errors” were those?

And lastly what do you mean by “is there any way to get this .apk file” ? The README contains instructions on how to run in “dev” mode (‘ionic serve’) but also how to build/run in ‘producton’ mode on a device (‘gulp build’ and ‘ionic run’).

If you to just want to create and APK which you can manually install on a device then do "ionic buid’ instead of “ionic run”.

Just have a look at my code and you’ll see how the side menu and tabs work, that should be enough, I’m not going to update other people’s plunkers, lol …

My app name is starter.

  1. git clone https://github.com/leob/ionic-quickstarter
  2. mv ionic-quickstarter starter
  3. cd starter
  4. I changed app name with starter in following files as you suggest
    a. ionic.project
    b. config.xml
  5. Inside app i ran the following commands
    a. npm install
    b. bower install (‘bower’ is not recognized as an internal or external command,
    operable program or batch file.)
    c. ionic state restore --plugins
    d. ionic platform add android
    e. ionic serve (When i ran this command following error is showing in browser window)
    Error: ENOENT: no such file or directory, open ‘E:\ionicworkspace\starter\src\index.html’

Thanks in advance
Ramprasad

Try to run with “ionic serve -c -l” (with the “labs” option, and showing errors in the console).

Try it, I’m pretty sure it will work then. If not, look at the errors in the console (terminal).

Now i am getting the following error

ionic $ E:\ionicworkspace\app\node_modules\gulp-sass\node_modules\node-sass\lib
index.js:22
throw new Error(’libsass bindings not found. Try reinstalling node-sass?
’);
^

Error: libsass bindings not found. Try reinstalling node-sass?
at getBinding (E:\ionicworkspace\app\node_modules\gulp-sass\node_modules\nod
e-sass\lib\index.js:22:11)
at Object. (E:\ionicworkspace\app\node_modules\gulp-sass\node_mod
ules\node-sass\lib\index.js:188:23)
at Module._compile (module.js:434:26)
at Object.Module._extensions…js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (E:\ionicworkspace\app\node_modules\gulp-sass\index.js
:3:17)
at Module._compile (module.js:434:26)

This is a known issue which many people (also Ionic users) have come across, if you search for “libsass bindings not found” then you will see many discussion threads about it.

The best solution seems to be this answer:

Error running gulp sass

As you can see, the solution is that it works only with certain versions of nodejs. The problem is especially with “new” nodejs versions, e.g. nodejs v.4. I am using nodejs v.0.12 and I don’t have the problem.

Another discussion and possible solution is this post:

'libsass' bindings not found

So that is the issue. I’ve added a warning and some info to my README because I’ve seen many people struggling with this issue.

Other projects in my workspace is running.
Why this project only not running ?
I think, due to some version in compatabilities, i am getting these error.
I am using node 4.1.1. Do i need to downgrade to run this project ?

The reason is because the other projects are not using SASS … if you would execute “ionic setup sass” for those other projects, then you would see that they will have exactly the same problem.

Yes, if you have nodejs 4.1.1. (or any version of nodejs higher than 0.12.x) then it’s guaranteed that you will have this problem. Many people have reported this problem on the Ionic forum.

It would really be good if the Ionic Team would step in to warn Ionic users about this, but in the meantime I’ve added a warning to my starter app’s README, and I’ve written a page about the problem on my Wiki:

https://github.com/leob/ionic-quickstarter/wiki/ENOENT-and-libsass-bindings-not-found

So there you have it.

I have executed this command ionic setup sass in other projects. I am able to execute it successfully.

Then the package.json in those projects are specifying different versions of module dependencies (e.g. node-sass/lib-sass).

I’m 100% sure that the issue is with new Node.js versions which are breaking previous npm modules including libsass. The newer nodejs versions will likely need newer dependencies.

Can you try an “npm update” and let me know if that helps?

I have already executed this command npm update by seeing your second link.
But still i am getting the same error.

Okay then we can forget about that as a solution. I’ve got a report from someone else who had this problem and he went back to nodejs 0.12.x. I’m also staying on node.js 0.12.x, I’m hearing too many scary stories about node.js 4.x.

By the way would you be so kind to send me a package.json of another project that does work correctly with the new 4.x nodejs? If you want you can just paste the complete package.json in a message here.

That would be very helpful for other people who have this problem (this problem is in numerous threads on the Ionic Forum, it is all over the place).

{
“name”: “customsass”,
“version”: “1.0.0”,
“description”: “CustomSass: An Ionic project”,
“dependencies”: {
“gulp”: “^3.5.6”,
“gulp-sass”: “^2.0.4”,
“gulp-concat”: “^2.2.0”,
“gulp-minify-css”: “^0.3.0”,
“gulp-rename”: “^1.2.0”
},
“devDependencies”: {
“bower”: “^1.3.3”,
“gulp-util”: “^2.2.14”,
“shelljs”: “^0.3.0”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [
“android”
]
}

Okay so I see that “gulp-sass” is way newer in this package,json ("^2.0.4") than in my starter’s package.json ("^1.3.3").

It then makes sense that with this newer nodejs you need the newer gulp-sass.

Try to change gulp-sass from “^1.3.3” to “^2.0.4” in the package.json and see if it works then.

Now i am getting the following error

ionic $ [16:05:42] Using gulpfile E:\ionicworkspace\app\gulpfile.js
[16:05:42] Starting ‘dev-config’…
[16:05:42] Finished ‘dev-config’ after 14 ms
[16:05:42] Starting ‘dev-sass’…
[16:05:42] Starting ‘inject-index’…
[16:05:42] Finished ‘inject-index’ after 3.01 ms
[16:05:42] Starting ‘watch’…
[16:05:42] Finished ‘watch’ after 30 ms
Error in plugin 'gulp-sass’
Message:
scss\ionic-customized.scss
12:3 file to import not found or unreadable: src/lib/ionic/scss/ionicons/ioni
cons.scss
Current dir: E:/ionicworkspace/app/scss/
Details:
column: 3
line: 12
file: E:/ionicworkspace/app/scss/ionic-customized.scss
status: 1
messageFormatted: scss\ionic-customized.scss
12:3 file to import not found or unreadable: src/lib/ionic/scss/ionicons/ioni
cons.scss
Current dir: E:/ionicworkspace/app/scss/
[16:05:42] Finished ‘dev-sass’ after 89 ms
[16:05:42] Starting ‘default’…
[16:05:42] Finished ‘default’ after 9.92 µs
[16:05:42] gulp-inject 36 files into index-template.html.
HTML changed: E:\ionicworkspace\app\src\index.html
JS changed: E:\ionicworkspace\app\src\js\config\config.js

In my browser blank page is comming.

Well the good news is that this change seems to have fixed the ‘libsass’ problem!

Now the error is this:

Message: scss\ionic-customized.scss 12:3 file to import not found or unreadable: src/lib/ionic/scss/ionicons/ionicons.scss

This could be my mistake somehow. Let me look at that.

I am also getting following errors in my browser console.
Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/ionic/js/ionic.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/ionic-service-core/ionic-core.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/ionic-service-analytics/ionic-analytics.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/parse/parse.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/firebase/firebase.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/angularfire/dist/angularfire.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/angular-resource/angular-resource.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/angular-messages/angular-messages.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/fus-messages/dist/fus-messages.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/angular-translate/angular-translate.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.2.89:8100/lib/ionic-content-banner/dist/ionic.content.banner.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
ng-img-crop.min.js:1 Uncaught ReferenceError: angular is not defined
http://192.168.2.89:8100/lib/ngCordova/dist/ng-cordova.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
36modules.js:23 Uncaught ReferenceError: angular is not defined
app.js:11 Uncaught ReferenceError: angular is not defined
application.ctrl.js:4 Uncaught ReferenceError: angular is not defined
application.service.js:4 Uncaught ReferenceError: angular is not defined
config.js:1 Uncaught ReferenceError: angular is not defined
templates.js:2 Uncaught ReferenceError: angular is not defined
http://192.168.2.89:8100/css/ionic.app.css Failed to load resource: the server responded with a status of 404 (Not Found)

Well, I’ve just installed gulp-sass 2.04 and now I get the same “file import not found or unreadable” error.

Apparently the new gulp-sass breaks stuff which worked before.

I’ll have a look.

Hey I think I found a solution. Try to change line 161 of your gulpfile.js from:

  .pipe(sass())

to:

  .pipe(sass({includePaths: [ 'src/lib/ionic/scss/' ]}))

And also in the file scss/app/app.scss I changed line 21 from:

@import "../../src/js/lib/ng-img-crop-customized/ng-img-crop";

to:

@import "src/js/lib/ng-img-crop-customized/ng-img-crop";

On my system those 2 changes fixed the problem. I think the new gulp-sass/node-sass/libsass/whatever handles @import paths in a different way …

I am getting still this error
[17:37:40] Using gulpfile E:\ionicworkspace\app\gulpfile.js
[17:37:40] Starting ‘dev-config’…
[17:37:40] Finished ‘dev-config’ after 14 ms
[17:37:40] Starting ‘dev-sass’…
[17:37:40] Starting ‘inject-index’…
[17:37:40] Finished ‘inject-index’ after 2.91 ms
[17:37:40] Starting ‘watch’…
[17:37:40] Finished ‘watch’ after 28 ms
Error in plugin 'gulp-sass’
Message:
scss\ionic-customized.scss
12:3 file to import not found or unreadable: src/lib/ionic/scss/ionicons/ioni
cons.scss
Current dir: E:/ionicworkspace/app/scss/
Details:
column: 3
line: 12
file: E:/ionicworkspace/app/scss/ionic-customized.scss
status: 1
messageFormatted: scss\ionic-customized.scss
12:3 file to import not found or unreadable: src/lib/ionic/scss/ionicons/ioni
cons.scss
Current dir: E:/ionicworkspace/app/scss/
[17:37:40] Finished ‘dev-sass’ after 89 ms
[17:37:40] Starting ‘default’…
[17:37:40] Finished ‘default’ after 9.58 µs
[17:37:40] gulp-inject 36 files into index-template.html.

I am also getting the following error in my browser console
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/css/ionic.app.css Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/ionic-service-core/ionic-core.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/ionic-service-analytics/ionic-analytics.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/parse/parse.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/firebase/firebase.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/angularfire/dist/angularfire.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/angular-resource/angular-resource.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/angular-messages/angular-messages.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/fus-messages/dist/fus-messages.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/angular-translate/angular-translate.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/lib/ionic-content-banner/dist/ionic.content.banner.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
?ionicplatform=ios:28 Uncaught ReferenceError: angular is not defined http://localhost:8100/js/lib/ng-img-crop-customized/ng-img-crop.min.js Line: 1console.(anonymous function) @ ?ionicplatform=ios:28
ng-img-crop.min.js:1 Uncaught ReferenceError: angular is not defined
?ionicplatform=android:28 Uncaught ReferenceError: angular is not defined http://localhost:8100/js/lib/ng-img-crop-customized/ng-img-crop.min.js Line: 1console.(anonymous function) @ ?ionicplatform=android:28
ng-img-crop.min.js:1 Uncaught ReferenceError: angular is not defined
http://localhost:8100/lib/ngCordova/dist/ng-cordova.min.js Failed to load resource: the server responded with a status of 404 (Not Found)