Ionic serve problems


#1

Hello,

I am having problems using ionic serve with and without --lab. ( > ionic serve --lab )

My ionic info from project folder (minus xcode and Mac entries):

ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
OS: Windows 7
Node Version: v5.12.0

Using Chrome with ionic serve, http://localhost:8100/ionic-lab.

First, it will only update one of the three screens (in this case iOS) for live reload. Simply using serve without --lab will update the single screen.

Second, I get this output in my command prompt:

[12:56:59] ionic-app-scripts 0.0.45
[12:56:59] watch started …
[12:56:59] build dev started …
[12:56:59] clean started …
[12:56:59] clean finished in 5 ms
[12:56:59] copy started …
[12:56:59] transpile started …
[12:57:02] transpile finished in 3.02 s
[12:57:02] webpack started …
[12:57:02] copy finished in 3.17 s
[12:57:06] webpack finished in 4.52 s
[12:57:06] sass started …
[12:57:08] sass finished in 1.32 s
[12:57:08] build dev finished in 8.88 s
[12:57:08] watch ready in 8.94 s
[12:57:08] dev server running: http://localhost:8100/

express deprecated res.sendfile: Use res.sendFile instead node_modules@ionic\app-scripts\dist\dev-server\http-server.js:26:20

This is a different output than previously (when it worked) where it gave me the options to use “r, q etc …”, and note the deprecated file.

Also, I get these error messages in the chrome console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/angular.min.js
ionic-lab:126 Uncaught ReferenceError: angular is not defined(…) ionic-lab:126
Failed to load resource: net::ERR_ADDRESS_INVALID http://0.0.0.0:35729/livereload.js?snipver=1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/favicon.ico

l have uninstalled ionic, cleaned npm cache, and reinstalled ionic -g repeatedly. I have attempted to hack and slash the package.json “script” section, based on some recommendations here on the boards, yet that only produced other problems. Note that this was not a problem about two weeks ago (I believe I was at RC1). I had about a ten day period where I did not code, and when I came back and created a new project, these problems occurred. I went back to some of the previous projects and everything is working fine with ionic serve. I believe this might have to do with the ionic-scripts since the older projects are running around v0.0.38.

If you have any suggestions on how to fix this I would appreciate it (or news about a coming fix from the ionic team, that I have missed).

Thanks,

Rob


#2

So, I’ve continued to do more digging, and it is definitely a problem since RC2. I have a few older projects, as I said, and they run fine with RC2. Here is the ionic info for the older project:

ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.38
OS: Windows 7
Node Version: v5.12.0

It seems almost certain this issue has been introduced since RC2, and I have seen other posts with similar ionic serve browser-related problems with live reload. Then again the app scripts version might have something to do with the issue.

Also forgot to mention I am editing on Visual Studio Code and running from the integrated command prompt, though I doubt this contributes to the problem in any way. Worth a mention … good IDE.

Perhaps it has to do with the Node or NPM version I am using? I cannot find a definitive, and most importantly recent, post on what version of Node ionic 2 runs most stable on. This would be another question I would like answered since there are posts saying v4.x, and v5.x are best, though many seem to be running the latest node at 6.x

Any help would be appreciated.

Rob


#3

Also having the same problem on RC3 with the tutorial starter project and a basic HTTP injectable.

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8100/angular.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
ionic-lab:126 Uncaught ReferenceError: angular is not defined(…)

#4

I have the exact issue with RC3. Did you get a fix?


#5

Also have this issue only with ionic serve -l, ionic serve is not throwing the error for me. Any ideas? It seems that of the available screens (iOS, Android, and Windows) only iOS is able to use angular because of this.


#6

re-install ionic and work fine with rc3


#7

Thank you @ahmed_s (what I am using) Ionic Framework Version: 2.0.0-rc.3
EDIT: Running these commands fixed issue
$ npm install ionic-angular@latest --save
$ npm install @ionic/app-scripts@latest --save-dev


#8

I re-installed ionic RC3 several times, also tried various related suggestions from here on the board, no luck. However, I went back to something I tried before, setting my “scripts”: in package.json to this:

"scripts": {
"build": "ionic-app-scripts build",
"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "watch",
"deploy:before": "build",
"build:before": "build",
"run:before": "watch"
}

For some magical reason it started to work, and I have not seen any of the issues I started this thread with. I am too much of a beginner with ionic and everything surrounding it to understand what happened, so I am just going to run with it. Hopefully this thread will help someone, somewhere, at some point in the future …

Rob