Hi, i just had to change from Mac to my laptop which has ubuntu, it bundles as expected when i run ionic serve -s -c but when i save a change it isn’t re-building as expected.
Please run ‘npm list --depth=0’ in your project and provide the results here.
Additionally can you provide the contents of the watch task in your gulpfile.js file?
Are you using the ts or js variant of the project?
I’m using the js variant, my npm list --depth=0 log is:
taoappionic2@ /home/carlos/Carlos/Programming/OSGroup/taoappionic2
├── angular2@2.0.0-alpha.52
├── awesome-typescript-loader@0.15.9
├── del@2.2.0
├── es6-promise@3.0.2
├── es6-shim@0.33.13
├── gulp@3.9.0
├── gulp-autoprefixer@3.1.0
├── gulp-sass@2.1.1
├── gulp-sourcemaps@1.6.0
├── gulp-watch@4.3.5
├── ionic-framework@2.0.0-alpha.42
├── reflect-metadata@0.1.2
├── rxjs@5.0.0-alpha.14
├── typescript@1.7.5
└── zone.js@0.5.8
Gulpfile content is almost the default, if it was working in OSX why not in Ubuntu, besides the compilation in ionic 2 is done by webpack so why do you ask the gulpfile instead of the webpack.config.js?:
/******************************************************************************
* Gulpfile
* Be sure to run `npm install` for `gulp` and the following tasks to be
* available from the command line. All tasks are run using `gulp taskName`.
******************************************************************************/
var gulp = require('gulp');
var path = require('path');
var config = require('./ionic.config');
/******************************************************************************
* gulp watch
* Build the styles, and rebuild when source files change.
******************************************************************************/
gulp.task('watch', ['sass', 'fonts'], function(done) {
var watch = require('gulp-watch');
var sassFiles = path.join(config.paths.wwwDir, config.paths.appDir, config.paths.appSassWatch);
watch(sassFiles, function(){
gulp.start('sass');
});
});
/******************************************************************************
* gulp build
* Build the styles once, without watching for source file changes.
******************************************************************************/
gulp.task('build', ['sass', 'fonts']);
/******************************************************************************
* gulp sass
* Convert Sass files to a single bundled CSS file. Uses auto-prefixer
* to automatically add required vendor prefixes when needed.
******************************************************************************/
gulp.task('sass', function(){
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassSrcFiles = [];
config.paths.appSassSrc.forEach(function(sassSrc) {
sassSrcFiles.push( path.join(config.paths.wwwDir, config.paths.appDir, sassSrc) );
});
gulp.src(sassSrcFiles)
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [path.join(config.paths.ionicDir, config.paths.ionicSassDir)],
}))
.on('error', function(err){
console.error(err.message);
this.emit('end');
})
.pipe(autoprefixer(config.autoPrefixerOpts))
.pipe(sourcemaps.write())
.pipe(gulp.dest(
path.join(config.paths.wwwDir, config.paths.buildDir, config.paths.buildCSSDir)
));
});
/******************************************************************************
* gulp fonts
* Copy Ionic font files to build directory.
******************************************************************************/
gulp.task('fonts', function() {
return gulp.src(path.join(config.paths.ionicDir, config.paths.ionicFontFiles))
.pipe(gulp.dest(path.join(config.paths.wwwDir, config.paths.buildDir, config.paths.buildFontsDir)));
});
/******************************************************************************
* gulp clean
* Delete previous build files.
******************************************************************************/
gulp.task('clean', function(done) {
var del = require('del');
del([config.paths.buildDir], done);
});
Also here’s the output of the serve operation, as you can see it bundles and open the window, nothing wrong so far, but when i save it doesn’t re-bundle so i think it has to do with the change detection of webpack?:
carlos@carlos-N46VB:~/Carlos/Programming/OSGroup/taoappionic2$ ionic serve -s -c
[09:17:43] Using gulpfile ~/Carlos/Programming/OSGroup/taoappionic2/gulpfile.js
[09:17:43] Starting ‘sass’…
∆ Compiling and bundling with Webpack…
√ Using your webpack.config.js file: /home/carlos/Carlos/Programming/OSGroup/taoappionic2/webpack.config.js
[09:17:43] Finished ‘sass’ after 204 ms
[09:17:43] Starting ‘fonts’…
[09:17:43] Finished ‘fonts’ after 29 ms
[09:17:43] Starting ‘watch’…
Hash: b5d33407820ba584e898
Version: webpack 1.12.9
Time: 5946ms
Asset Size Chunks Chunk Names
app.bundle.js 6.23 MB 0 [emitted] main
[0] multi main 76 bytes {0} [built]
+ 422 hidden modules
√ Webpack complete
∆ Starting dev server.
√ Running live reload server: http://localhost:35729
√ Running dev server: http://localhost:8100
√ Watching: 0=www/**/.html, 1=www/build/.js, 2=www/build/*.css
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit
ionic $ serve / (www/index.html)
serve /cordova.js (mocked)
serve /build/js/app.bundle.js
serve /build/css/app.ios.css
serve /app/app.html
serve /font-awesome-4.5.0/css/font-awesome.min.css
0 271577 warn Storage: SQLite plugin not installed, falling back to WebSQL. Make sure to install cordova-sqlite-storage in production!
1 271584 log Conf
serve /app/login/login.html
2 272202 log Base de datos creada.
I think i found the issue, npm i logs this:
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.6
How do i get around of this if fsevents isn’t compatible with my OS?
I don’t believe the problem is with fsevent as I’m getting the same issue with the failed dependency but see changes propagating correctly
npm WARN optional Skipping failed optional dependency /webpack/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.6
The dependency is optional so it should be pulled in.
When you run ionic serve you should be notified in the shell on file update if it is watching the file.
You should see something similar to this:
ionic $
Hash: c8ff94641557366300f2
Version: webpack 1.12.9
Time: 1701ms
Asset Size Chunks Chunk Names
app.bundle.js 6.83 MB 0 [emitted] main
[0] multi main 76 bytes {0}
+ 653 hidden modules
Are these messages being generated for you at all?
If you are but the changes are not present in your browser you may want to check for syntax issues in the .ts files you are writing or attempt to refresh the browser without reserving. Every time I’ve seen an issue so far it’s been related to one of the two of those.
Regarding the gulpfile, not all of ionic is running webpack anymore. Ionic appears to have offloaded some functionality (notably sass preprocessing) to gulp sometime near the beta release.
I actually added sourcemaps for scss, would like to do the same for js, i’m not getting notifications of file changes, i’m working in sublime with atomic save enabled, i’m going to do this and try again:
npm uninstall -g ionic && npm uninstall -g cordova && npm cache clear && npm cache clean && npm i -g cordova ionic@beta
OMG the error growed:
carlos@carlos-N46VB:~/Carlos/Programming/OSGroup/taoappionic2$ ionic serve -s -c
[13:02:33] Using gulpfile ~/Carlos/Programming/OSGroup/taoappionic2/gulpfile.js
[13:02:33] Starting ‘sass’…
∆ Compiling and bundling with Webpack…
√ Using your webpack.config.js file: /home/carlos/Carlos/Programming/OSGroup/taoappionic2/webpack.config.js
[13:02:33] Finished ‘sass’ after 205 ms
[13:02:33] Starting ‘fonts’…
[13:02:33] Finished ‘fonts’ after 30 ms
[13:02:33] Starting ‘watch’…
events.js:141
throw er; // Unhandled ‘error’ event
^
Error: watch ENOSPC
at exports._errnoException (util.js:837:11)
at FSWatcher.start (fs.js:1231:11)
at Object.fs.watch (fs.js:1257:11)
at createFsWatchInstance (/home/carlos/Carlos/Programming/OSGroup/taoappionic2/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/carlos/Carlos/Programming/OSGroup/taoappionic2/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/carlos/Carlos/Programming/OSGroup/taoappionic2/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleDir (/home/carlos/Carlos/Programming/OSGroup/taoappionic2/node_modules/chokidar/lib/nodefs-handler.js:407:19)
at FSWatcher. (/home/carlos/Carlos/Programming/OSGroup/taoappionic2/node_modules/chokidar/lib/nodefs-handler.js:455:19)
at FSWatcher. (/home/carlos/Carlos/Programming/OSGroup/taoappionic2/node_modules/chokidar/lib/nodefs-handler.js:460:16)
at FSReqWrap.oncomplete (fs.js:82:15)
Hash: b095c7bf6ee763287675
Version: webpack 1.12.9
Time: 5963ms
Asset Size Chunks Chunk Names
app.bundle.js 6.23 MB 0 [emitted] main
[0] multi main 76 bytes {0} [built]
+ 422 hidden modules
√ Webpack complete
∆ Starting dev server.
√ Running live reload server: http://localhost:35729
√ Running dev server: http://localhost:8100
√ Watching: 0=www/**/.html, 1=www/build/.js, 2=www/build/*.css
There was an error serving your Ionic application: { [Error: watch ENOSPC] code: ‘ENOSPC’, errno: ‘ENOSPC’, syscall: ‘watch’ }
Error fixed, after update i had an issue with the amount of watches in my OS, the solution:
- First try
npm dedupeto release some watches that could be left as garbage. - If the first doesn’t work try this to increase your OS limit on watches: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p