Side menu with Tabs issue

ionic-v1
21

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 …

22

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)

23

Well that looks like a mess for sure.

I do believe I’ve got to the bottom of the issue by upgrading gulp-sass to a newer version that’s compatible with both the “old” and the “new” nodejs versions, and adding this “sass include path” in the gulpfile.js. On my system it works fine but I’m still running nodejs 0.12.x (I don’t want to mess with my nodejs now).

I’ve pushed my changes/fixes to the repo, please try to just delete what you already installed and then do a fresh install. Good thing if we can get to the bottom of this issue and sort it out, it affects many people who upgrade to a new nodejs.

24

I uninstall existing node.js. Installed v0.12.x version
Now i am getting following error

ionic $ module.js:338
throw err;
^
Error: Cannot find module 'gulp-sass’
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (E:\ionicworkspace\app\gulpfile.js:15:12)
at Module._compile (module.js:460:26)
at Object.Module._extensions…js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)

25

Apologies, I didn’t mean uninstall the whole nodejs, but only the ionic-quickstarter (because of the changes I made).

Anyway, yes with nodejs 0.12 it’s known to work. But since I now include the new/updated gulp-sass version (which is supposed to be backwards compatible with the old nodejs and with the new nodejs), it SHOULD work with both v.0.12 or with the new v.4.

At least that’s the theory, which works, as far as I could test it.

If you’re still interested then just delete the whole quickstarter, do a fresh install, run the commands “npm install” (which should install gulp-sass) and so on, and then if it doesn’t work, well then I also don’t know, I’m giving up then because this takes too much time … then we just wait till Ionic 2 comes out. :wink:

26

Will you please share project to the following url. So that i can check app in ionic view.
ramprasad_34@yahoo.co.in

Thanks,
Ramprasad

27

my question is what is app?

28

Hi, the question was originally about getting tabs and side menus working together in one app (Ionic 1). Is your question related to this same topic?

29

yes, as a matter of fact, i have been able to thanks to leob’s solution with the menuContent@app. still i have issues though. when i navigate to the pages on the side menu item, i need to retain history so i would have the back button on the header. how do i achieve that?

30

Doesn’t that work automatically? I think when you select an item from the menu then the history is cleared/reset, every screen access through the menu gets its own new and separate history “stack”, that’s how I think it should work intuitively. But maybe I’m misunderstanding what you try to achieve.

31

that’s exactly what happens. i want to achieve the opposite, i don’t want the history cleared. or rather an option to navigate back to the home page

32

That should all be configurable and depends on how you programmed it … you have your source code somewhere?

33

Hi ,I want some pages of my project shows both sidemenu and tabs but some pages only show sidemenu is it possible.Thanks in advance.