Ionic serve not working on ionic 2

dmastag · November 15, 2015, 10:06pm

Hi All,
Am a Happy Ionic 1 developer and am just about to try out Ionic 2. But sadly am not able to get past ionic serve. Could this be a Windows problem? It feels weird that reactivex is looking for a folder inside its util folder. Any help would be appreciated

D:\ionic2\MyIonic2Project>ionic serve
∆ Compiling and bundling with Webpack...
√ Using your webpack.config.js file: D:\ionic2\MyIonic2Project\webpack.config.js

./~/@reactivex/rxjs/dist/cjs/util/root.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./C:/Users/julian/AppData/Roaming/npm/node_modules/ionic/node_modules/ionic-app-lib/node_modules/webpack/buildin/module.js in D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util
resolve file
  D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js doesn't exist
  D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.js doesn't exist
  D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.ts doesn't exist
resolve directory
  D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js doesn't exist (directory default file)
  D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js\package.json doesn't exist (directory description file)
[D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js]
[D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.js]
[D:\ionic2\MyIonic2Project\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.ts]
 @ ./~/@reactivex/rxjs/dist/cjs/util/root.js 1:0-133 (CLI v2.0.0-alpha.22)

Your system information:

Cordova CLI: 5.4.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-alpha.31
Ionic CLI Version: 2.0.0-alpha.22
Ionic App Lib Version: 2.0.0-alpha.21
OS:
Node Version: v5.0.0

gemilangpermata · November 16, 2015, 3:07am

Yeah, i have same problem

Wall-E · November 16, 2015, 3:33am

gulp build

then

gulp serve

or used ionic lab tools

dmastag · November 16, 2015, 4:30am

Hi @Wall-E,
Weird thing is that there are no gulp tasks or local gulp in the node-modules.
Is there something that I am missing?

I created the instance using

ionic start MyIonic2Project tutorial --v2

And then also tried to use the default template using

ionic start ionicTabs --v2

Thanks

Wall-E · November 16, 2015, 4:44am

1、ionic start MyIonic2 tutorial --v2
2、npm install （Install all dependencies，such as: Ionic-framework and the gulp…）
3、gulp build and gulp serve

dmastag · November 16, 2015, 5:06am

Thanks @Wall-E
But the package.json file doesn’t have gulp in it nor are any gulp files/tasks in the new template.
Here is a Screen Shot of the Folder Structure and the package.json file.

My guess is that Ionic2 has moved from using gulp to webpack and this has not been tested on windows.
Did you try those steps recently?

Thanks

Wall-E · November 16, 2015, 5:18am

ha-ha
You can use the default ionic2-Stater or ionic2-starter-tutorial project，It contains a complete set of working directory。Finished add adding tabs page in you project.
1、ionic start yourProjectName tutorial --v2 or ionic start yourProjectName --v2
2、cd yourProjectName
3、npm install

4、gulp build
5、gulp serve

slowkot · November 16, 2015, 9:43am

Hi, I came up with the same issue.
I can confirm that on windows ionic downloads outdated starter package.
At least gulpfile.js is missing and package.json does not contain gulp dependencies.

Clone repo should work better I guess.

dmastag · November 16, 2015, 10:24am

Thanks @Wall-E working now by cloning the starter-template.
Looks like the App Base has still problems in it for Windows.

tim · November 16, 2015, 8:18pm

Hey guys I’m unable to reproduce this on Windows, just set up a brand new machine and ionic start myApp --v2 followed by ionic serve is working fine.

I would love to narrow this down, as we’ve been seeing a lot of @reactive related issues on Windows lately.

tim · November 16, 2015, 8:21pm

Also @Wall-E you are probably on an old version of the alpha CLI, as we’ve moved off gulp for a webpack-only build in the starters.

Interesting though that the gulp build task works, since it’s really the same code as what we’re using in the CLI…

dmastag · November 16, 2015, 11:15pm

Hi @tim

Yes, can confirm that I have still the same problem.
But if I clone the starter-template and use gulp then I have no problems

∆ Compiling and bundling with Webpack...
√ Using your webpack.config.js file: D:\ionic2\myApp\webpack.config.js

./www/app/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./C:/Users/julian/AppData/Roaming/npm/node_modules/ionic/node_modules/ionic-app-lib/node_modules/css-loader/index.js in D:\ionic2\myApp\www\app
resolve file
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js doesn't exist
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.webpack-loader.js doesn't exist
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.js doesn't exist
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.web-loader.js doesn't exist
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.loader.js doesn't exist
resolve directory
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js doesn't exist (directory default file)
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js\package.json doesn't exist (directory description file)
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js]
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.webpack-loader.js]
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.js]
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.web-loader.js]
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\css-loader\index.js.loader.js]
 @ ./www/app/app.scss 4:14-561,./www/app/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./C:/Users/julian/AppData/Roaming/npm/node_modules/ionic/node_modules/ionic-app-lib/node_modules/style-loader/addStyles.js in D:\ionic2\myApp\www\app
resolve file
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js doesn't exist
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js.js doesn't exist
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js.ts doesn't exist
resolve directory
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js doesn't exist (directory default file)
  D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js\package.json doesn't exist (directory description file)
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js]
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js.js]
[D:\ionic2\myApp\www\app\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\style-loader\addStyles.js.ts]
 @ ./www/app/app.scss 7:13-147,./~/@reactivex/rxjs/dist/cjs/util/root.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./C:/Users/julian/AppData/Roaming/npm/node_modules/ionic/node_modules/ionic-app-lib/node_modules/webpack/buildin/module.js in D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util
resolve file
  D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js doesn't exist
  D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.js doesn't exist
  D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.ts doesn't exist
resolve directory
  D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js doesn't exist (directory default file)
  D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js\package.json doesn't exist (directory description file)
[D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js]
[D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.js]
[D:\ionic2\myApp\node_modules\@reactivex\rxjs\dist\cjs\util\C:\Users\julian\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\webpack\buildin\module.js.ts]
 @ ./~/@reactivex/rxjs/dist/cjs/util/root.js 1:0-133 (CLI v2.0.0-alpha.22)

Your system information:

Cordova CLI: 5.4.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-alpha.31
Ionic CLI Version: 2.0.0-alpha.22
Ionic App Lib Version: 2.0.0-alpha.21
OS:
Node Version: v5.0.0

Wall-E · November 17, 2015, 2:27am

So you simplify and unify the building process?

maruti · November 17, 2015, 9:02am

I am also having same issue! any updates?

tim · November 17, 2015, 4:40pm

@dmastag Can you make sure you’ve updated to the latest ionic@alpha?

@Wall-E yes exactly, although webpack configuration has a bit of a steep learning curve it is the only thing you have to configure. You can still use gulp of course, and can hook into any of Ionic commands by adding hooks to ionic.config.js (these are still relatively experimental and undocumented at the moment, but you can see them if you start a new project).

The idea of having a build step is new and confusing for a lot of people, so we’re trying to reduce the mental overhead necessary to get up and running with Ionic 2, which is already a lot of new concepts.

slowkot · November 17, 2015, 6:30pm

@tim yep, just installed latest Ionic Alpha version on Win 10, Node 4.2.2

∆ Compiling and bundling with Webpack...
√ Using your webpack.config.js file: D:\projects\ionicTabs\webpack.config.js

./www/app/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' 
./C:/Users/user/AppData/Roaming/npm/node_modules/ionic/node_modules/ionic-app-lib/node_modules/css-loader/index.js 
in D:\projects\ionicTabs\www\app
.....

 @ ./~/ionic-framework/~/@reactivex/rxjs/dist/cjs/util/root.js 1:0-142 (CLI v2.0.0-alpha.23)

Your system information:

Cordova CLI: Not installed
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-alpha.31
Ionic CLI Version: 2.0.0-alpha.23
Ionic App Lib Version: 2.0.0-alpha.22
OS: Windows 7
Node Version: v4.2.2

Here is my steps:

npm install -g ionic@alpha
ionic start ionicTabs --v2
cd ionicTabs
npm install
ionic serve
What I am doing wrong?

tim · November 17, 2015, 6:53pm

@slowkot awesome that is very helpful, I’ve tried to reproduce these issues on two Windows 7 machines and can’t, but it seems like the output from ionic info is wrong for Windows 10.

Just out of curiosity, if you do the exact same steps, but without npm install does it work? By default ionic start does npm install --production on your new project.

slowkot · November 17, 2015, 8:53pm

Nope, that wont work
Have tried one more time on another machine with Win 10

tim · November 17, 2015, 10:04pm

So strange! I just installed Windows 10 and tested on node 4.2.1 and 5.0.0, and both work fine for me. I have yet to see any of the errors that people are reporting (and @slowkot you are far from alone, there have been a bunch of people with weird errors from the @reactive package).

Did you get the same error on your other machine as well?

tim · November 17, 2015, 10:42pm

Ahhhhh, I believe it happens when your project is on a different drive than your node install. Thanks for the logs everyone, I’ve just reproduced it and will be taking a look at fixing it tomorrow. You can track the issue here: https://github.com/driftyco/ionic2/issues/528.