Ionic 2 RC0 -- Sample app serves unstyled

Ionic Framework ionic-v3
1

Results of ionic info:

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

I installed a fresh sample app via:

ionic start --v2 myApp

I changed directories into the “myApp” folder and ran:

ionic serve

There were no errors, but when the browser window popped up, it gave me a completely unstyled page. No header. The tabs render as links. It’s like 1990s all over again.

Here’s the log output from ionic serve; no errors anywhere:

Running 'serve:before' npm script before serve
> ionic-hello-world@ watch /.../myApp
> ionic-app-scripts watch
[20:34:45]  ionic-app-scripts 0.0.30
[20:34:45]  watch started ...
[20:34:45]  build dev started ...
[20:34:45]  clean started ...
[20:34:45]  clean finished in 12 ms
[20:34:45]  copy started ...
[20:34:45]  bundle dev started ...
[20:34:45]  lint started ...
[20:34:45]  copy finished in 213 ms
[20:34:45]  lint finished in 540 ms
[20:34:53]  bundle dev finished in 8.22 s
[20:34:53]  sass started ...
[20:34:54]  sass finished in 523 ms
[20:34:54]  build dev finished in 8.77 s
[20:34:54]  watch ready in 8.80 s
Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*, !www/**/*.map
√ Running dev server:  http://localhost:8100
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 $

Things I’ve tried…

  1. Uninstalling / reinstalling Node
  2. Uninstalling / reinstalling Ionic
  3. Removed the entire global /usr/local/lib/node_modules folder and reinstalled Ionic & Cordova
  4. Removed the node_modules folder from the myApp project and reinstalled via npm install.

Nothing fixed it. #4 gave some warnings that may / may not be meaningful:

npm WARN @angular/http@2.1.0 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/compiler@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/core@2.0.2 but none was installed.
npm WARN @angular/core@2.1.0 requires a peer of rxjs@5.0.0-beta.12 but none was installed.

Here’s a screenshot of how the app is being served. Any help would be appreciated because I’m completely stumped and equally stuck at this point. There

image

2

On a second computer with the following info, things appear to work correctly. The biggest differences that stand out to me are the lack of Gulp in the non-working version, and the different Xcode versions.


Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v6.2.0
Xcode version: Xcode 7.3.1 Build version 7D1014
3

I found the issue and wanted to share just in case anyone else had the problem.

The problem was the folder my app was in. It seems that any folder that contains the phrase: ionic-native will fail in the way that my screenshot showed.

Failed:

  • ionic-native-app-2
  • ionic-native
  • ionic-native-2
  • foo-ionic-native

Working:

  • i-native-app-2
  • izzzz-native-app-2
  • ionic-nativ-app-2

It’s very strange that there is no error at all. It’s even stranger that there is some sort of process that is expecting / aborting because of the folder name. Hopefully, this post can save others from pulling out their hair.