Ionic 2: ionic serve resulting in white/blank page - ionic-framework

I have installed Ionic2 today and tried several starter projects. Each time ionic serve gives a blank (white) browser screen with no build or console errors. No edits have been made to the starter code.
app.bundle.js is truncated:
> (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof
> require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return
> i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw
> f.code="MODULE_NOT_FOUND",f}var
> l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var
> n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return
> n[o].exports}var i=typeof require=="function"&&require;for(var
> o=0;o<r.length;o++)s(r[o]);return
> s})({1:[function(require,module,exports){
>
> },{}],2:[function(require,module,exports){
> arguments[4][1][0].apply(exports,arguments) },{"dup":1}]},{},[1,2])
>
> //# sourceMappingURL=app.bundle.js.map
And app.bundle.js.map (first part) as follows:
> {"version":3,"sources":["../../../../Documents/Apps/ionic2/testapp/node_modules/browser-pack/_prelude.js","app/app.ts"],"names":[],"mappings":"AAAA;ACAA","file":"app.bundle.js","sourceRoot":"../../../","sourcesContent":["(function
> e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof
> require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return
> i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw
> f.code=\"MODULE_NOT_FOUND\",f}var
> l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var
> n=t[o][1][e];
There are several other threads relating to 'white screens' but no solution found so far reflects my scenario.
> Ionic info:
>
> Cordova CLI: 6.3.0 Gulp version: CLI version 3.9.0 Gulp local: Local
> version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI
> Version: 2.0.0-beta.35 Ionic App Lib Version: 2.0.0-beta.19 OS:
> Windows 7 SP1 Node Version: v5.12.0
Solutions tried to date based on other posts:
- uninstall/reinstall ionic2 and cordova
- reinstall node.js
- running command prompt as administrator
Note: ionic serve working for older ionic1 projects.
Thanks for any insights.

Ok found the solution for anyone else who comes across this problem.
On speculation I moved my App folder further up the directory tree (thinking it might be a path length issue for the node_module files. With my App folder now running c:\Apps apps are compiling and showing in the browser.

Related

page creation with ionic version 4

Hello dear community currently I work on my portfolio but with the version 4 of ionic I manage not to generate a new page by typing the command ionic generate page Contact.
Someone could help me
Voila l'erreur aprés avoir lancer la commande :
$ ionic generate page realisations
ng generate page realisations
Could not find module "#ionic/angular-toolkit" from "C:\wamp64\www\fil_Rouge\portfolioV4".
Error: Could not find module "#ionic/angular-toolkit" from "C:\wamp64\www\fil_Rouge\portfolioV4".
at Object.resolve (C:\Users\Stagiaire\AppData\Roaming\npm\node_modules#angular\cli\node_modules#angular-devkit\core\node\resolve.js:141:11)
at NodeModulesEngineHost._resolvePackageJson (C:\Users\Stagiaire\AppData\Roaming\npm\node_modules#angular\cli\node_modules#angular-devkit\schematics\tools\node-module-engine-host.js:28:21)
at NodeModulesEngineHost._resolveCollectionPath (C:\Users\Stagiaire\AppData\Roaming\npm\node_modules#angular\cli\node_modules#angular-devkit\schematics\tools\node-module-engine-host.js:69:40)
at NodeModulesEngineHost.createCollectionDescription (C:\Users\Stagiaire\AppData\Roaming\npm\node_modules#angular\cli\node_modules#angular-devkit\schematics\tools\file-system-engine-host-base.js:111:27)
at SchematicEngine._createCollectionDescription (C:\Users\Stagiaire\AppData\Roaming\npm\node_modules#angular\cli\node_modules#angular-devkit\schematics\src\engine\engine.js:147:40)
at SchematicEngine.createCollection (C:\Users\Stagiaire\AppData\Roaming\npm\node_modules#angular\cli\node_modules#angular-devkit\schematics\src\engine\engine.js:140:43)
So it looks like there are a bunch of missing modules from your ionic installation. I recommend uninstalling ionic globally, re-installing it and then starting a new project. After that, move into the directory of the new project and come back with the output of the ionic info command.
Commands for reference:
npm uninstall -g ionic (Uninstalling Ionic from machine)
npm install -g ionic (Installing it globally)
ionic start blank myApp (starting new app)
cd myApp (change directory to application Mac/Linux/Windows Powershell)
ionic info (Get ionic information )

How to keep both ionic 1, 3, version in my system

Initaially i was working with ionic 1.7.6 version with many apps. And by today some how i have changed to version 3.0.0. Now when i open my old projects under package.json i see the version as 3.0.0 instead of 1.7.6. And when i do sudo ionic build android it throws me some error to upgrade the version.
So now i have uninstall the ionic & cordova from my system.
Now i want to keep ionic 1 version 1.7.6 as well as ionic 3 version 3.0.0 how can i do it now.
so when ever i open the ionic 1 project i need to work on angularjs with ionic 1 version.
And when ever i open the project that i have created with version 3 i need to work with latest version of angular is with ionic 3..
please some one expalain me what should i need to do ??
Thank in advance !
I suspect you have installed ionic globally. If you want to run the local/project version of ionic you need to sudo ./node_modules/ionic/ionic ....
This will be the version of ionic as defined in the package.json of the project.
You can tuck this nicely away however using npm scripts (in your package.json):
e.g.
"scripts": {
"ionic": "sudo ./node_modules/ionic/ionic build "
}
Ten simply execute npm run ionic -- android

Ionic2 Build folder structure missing

I'm starting to learn Ionic2, I have created a new project with ionic start myproject --v2 and everything works correctly if I do ionic serve.
The build folder is missing in ionic 2 project folder.
Whenever I am trying to download any existing Ionic2 template in that one also build folder missing.
ionic -v 2.0.0-beta.30
cordova -v 6.2.0
node -v v6.2.1
npm -v 3.9.5
your ionic serve build is under www. The native builds ( from ionic build) are under platform.
A little late but I had the same issue and was able to fix it by installing Gulp :
npm install -g gulp
Then I did gulp build.
This solved my issues and generated the build folder as it was supposed to.
First you need to add support for the platform/s you are working with, by executing from Ionic CLI console:
ionic platform add android
or
ionic platform add ios
And then you should build your project by executing:
ionic build android
or
ionic build ios

Missing ionic.project file

I just updated nodejs ionic and cordova. Create new ionic project as before:
ionic start myApp blank
In terminal, go to myApp directory, and input:
ionic state
I got message:
You cannot run any state commands on a project that is not an Ionic
project. Try adding an ionic.project file or running ionic start to
get an application to save or restore (CLI v1.7.10)
My system information:
Cordova CLI: 5.4.0
Ionic Version: 1.1.1
Ionic CLI Version: 1.7.10
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v5.1.0
Xcode version: Xcode 7.1.1 Build version 7B1005
Question: Where ionic.project file, I don't remember there was this file in project before. How to add ionic.project file?
How do I find this problem? Because I check out source from git, I try to use ionic state restore command to restore application for building. But I got same message, missing ioinc.project. So I create a new ionic project to find reason, but I'm still confused.
If use
ionic start
You will got
Invalid command (CLI v1.7.10)
Of course, there is not directory argument for this command. If you give directory as ./, this command only create and overwrite all project file.
screen shot
The new name of this file is ionic.config.json
I was facing the same issue.
just run the command
ionic serve
ionic.project file gets auto generated
EDIT
ionic.project is replace by ionic.config.json. So you should change in ionic.config.json
If you are happened to use ionic#beta, it won't install it until you downgrade it to ionic V1 then "ionic setup sass" or "ionic serve".
Most simple/easy solution to this problem to install a chrome extension named CORS. and everything will work perfectly.

Netbeans Build Error upgrade-to-cordova-project

i am trying to build a sample HTML5 Application with Netbeans/Cardova.
Cardova: 3.4.0-0.1.0
Netbeans: 7.4
Reproducing:
Device: Cordova Android Device
Press Build
Window "Create Cordova Resources and rename site root to 'www'?"
Answer With "OK"
Output:
ant -f D:\\phonegap\\CordovaMapsSample\\nbproject -Dandroid.target.device.arg=run -Denv.DISPLAY=:0.0 "-Dupdate.task.jar=C:\\Program Files (x86)\\NetBeans 7.4\\webcommon\\ant\\extra\\org-netbeans-modules-cordova-projectupdate.jar" -Dandroid.sdk.home=D:\\androidsdk -Dandroid.build.target=android-19 -Dstart.file=index.html -Dandroid.project.activity=CordovaMapsSample -Dconfig=android_1 "-Dios.certificate.name=iPhone Developer" -Dsite.root=www_nb_temp "-Dcordova.version=3.4.0-0.1.0
" sim-android
check-android-template:
check-cordova-version:
check-cordova-project:
upgrade-to-cordova-project:
cordova.cmd -d create . com.coolappz.CordovaMapsSample CordovaMapsSample
Path already exists and is not empty: D:\phonegap\CordovaMapsSample
Creating a new cordova project with name "CordovaMapsSample" and id "com.coolappz.CordovaMapsSample" at location "D:\phonegap\CordovaMapsSample"
D:\phonegap\CordovaMapsSample\nbproject\build.xml:78: exec returned: 1
BUILD FAILED (total time: 0 seconds)
That's it :/
Please Help me!
Give it a try with with NetBeans 8.0 RC1, If I remember correctly, there was some change related to project structure in latest Cordova and NetBeans 7.4 might not be working with it.
To download 8.0 RC1, visit this page