Ionic serve not working on ionic 2


#1

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 :smile:

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

#2

Yeah, i have same problem


#3

gulp build

then

gulp serve

or used ionic lab tools


#4

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


#5

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


#6

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


#7

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


#8

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.


#9

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


#10

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.


#11

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…


#12

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

#13

So you simplify and unify the building process?


#14

I am also having same issue! any updates?


#15

@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.


#16

@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:

  1. npm install -g ionic@alpha
  2. ionic start ionicTabs --v2
  3. cd ionicTabs
  4. npm install
  5. ionic serve
    What I am doing wrong?

#17

@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.


#18

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


#19

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?


#20

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.