Upgrading Ionic1/ng1 to Ionic3/ng4 on windows with VsCode

Last updated: 2017-06-17

Now it has become time for me to move on from Ionic1 to Ionic3.

The upgrade steps I’ve done is to install and some tools and upgrade others.

Visual Studio Code

Going from ng1 upwards means going to TypeScript. It was then also time to give VS Code a try. I downloaded an .exe, installed and added some of its most popular extensions:

  • ext install Angular1
  • ext install Angular2
  • ext install auto-close-tag
  • ext install auto-rename-tag
  • ext install beautify
  • ext install bootstrap-3-snippets
  • ext install csharp
  • ext install code-runner
  • ext install vscode-color
  • ext install cordova-tools
  • ext install debugger-for-chrome
  • ext install docthis
  • ext install EditorConfig
  • ext install ionic-extension-pack #lots of dependencies
  • ext install githistory
  • ext install vscode-html-css
  • ext install html-snippets
  • ext install html-css-class-completion
  • ext install jquerysnippets
  • ext install vscode-JS-CSS-HTML-formatter
  • ext install vscode-npm-script
  • ext install npm-intellisense
  • ext install path-intellisense
  • ext install project-manager
  • ext install vscode-react-native
  • ext install rest-client
  • ext install sass-indented
  • ext install code-settings-sync
  • ext install vscode-icons
  • ext install xml

Some extentions can be used for debugging in VS Code.
You can search for them with “tag:debuggers @sort:installs“.
This is same as Debug – Install additional Debuggers …
The ones I have installed are

  • ext install csharp
  • ext install debugger-for-chrome
  • ext install vscode-react-native
  • ext install cordova-tools
  • ext install nativescript
  • ext install debugger-for-ios-web
  • ext install android-dev-ext
  • ext install node-debug
  • ext install node-debug2

npm global

npm update -g #Upgrade global npm tools to latest - do RUN AS ADMIN

Currently I have the tools in the versions:

# Windows ----------------------
wmic os get caption #Microsoft Windows 10 Pro
wmic os get osarchitecture #64-bit

# Non-npm-Tools ----------------
## Java tools
java -version #1.7.0_40
ant -version #1.8.3
## Ruby tools
# Note: Heroku does an automatic update, when printing version
heroku version #heroku/toolbelt/3.43.5, ruby/2.1.7, heroku-cli/5.11.9
ruby --version #2.1.7p400
## C tools
git –-version #2.10.2.windows.1
node –-version #v4.2.4 (includes npm)

# npm-tools (js) ---------------
# (installed doing $ npm install -g )
## Package managers
npm –-version #3.5.3 #installed together with node - upgraded with npm-windows-upgrade
bower --version #1.6.5

## Web/Mobile servers
express --version #4.13.1
nodemon –-version #1.8.1
phonegap --version #5.3.6
cordova --version #5.3.3
ionic --version #1.7.7

## Task runners
grunt --version #0.1.13
gulp --version #not installed

## Template generators
yo --version #1.4.8

## Test tools
protractor --version #not installed
jasmine-node --version #1.14.3
karma --version #0.13.14
phantomjs --version #1.9.8

Ionic CLI, node and Chocolatey

Ionic CLI was out of date. It would not update due to an old node (< 6.4.0).

npm install -g ionic #Trying to upgrade from 1.7.7 to 3.4.0
# WARN engine ionic@3.4.0: wanted: {"node":">=6.4.0"} (current: {"node":"4.2.4","npm":"3.5.3"})

ionic --version #1.7.7

I had previously had most luck to upgrade node.js on windows using Chocolatey in CMD prompt – run as Admin:

choco install nodejs #reinstall node
refreshenv #re-read envir
node -v #v8.1.2 - before v4.2.4
npm -v #5.0.3 - before 3.5.3

I usually hardcode the startup path for my node.js prompt by writing in the last line of C:\Program Files\nodejs\nodevars.bat and also add “refreshenv“, which somehow fixes path.

if "%CD%\"=="%~dp0" cd /d "c:\yourfavoritestartuppath"
refreshenv

Now back in the node.js prompt – run as admin:

refreshenv #re-read envir
node -v #v8.1.2 - before v4.2.4
npm -v #5.0.3 - before 3.5.3

npm install -g ionic #Trying to upgrade from 1.7.7 to 3.4.0
ionic --version #3.4.0
ionic info 
#global packages:
#@ionic/cli-utils : 1.4.0
# Ionic CLI : 3.4.0
#System:
#Node : v8.1.2
# OS : Windows 10
# Xcode : not installed
# ios-deploy : not installed
# ios-sim : not installed
# npm : 5.0.3

Test a new Ionic 3 project

https://www.djamware.com/post/58e657b680aca764ec903c2d/ionic-3-and-angular-4-mobile-app-example

#Create new proj
ionic start ionic3-angular4 blank --type=ionic-angular
#Verify using ng4 by looking at dependencies in package.json
cd ionic3-angular4
start . #open windows explorer

#Install dependencies
npm install
#Test drive
ionic serve -l
#? Looks like this is an Ionic Angular project, would you like to install @ionic/cli-plugin-ionic-angular and continue? Yes
#> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
#✔ Running command - done!
#[WARN] You have no CLI project plugins installed. CLI functionality may be limited.

ionic serve -l
#[ERROR] Error occurred while loading plugins. CLI functionality may be limited.
#        Checking for CLI updates now...
#[ERROR] No updates found after plugin error--please report this issue.

#more debug info
ionic info --verbose

nodejs reinstall

Apparently too messy to get it all sorted out, so I decided to remove all global npm packages and nodejs + reinstall

  • choco uninstall nodejs
  • Deleted remaining C:\Program Files\nodejs
  • Deleted C:\Users\Soren\AppData\Roaming\npm-cache
  • C:\Users\Soren\AppData\Roaming\npm
  • Removed from path: nothing left needed to delete
  • Boot PC
  • Install nodejs from website
  • Run nodejs promt as admin

 

node -v #v6.11.0
npm -v #3.10.10
npm install -g @angular/cli #QuickStart
ng --version #1.1.2
npm install -g cordova ionic #Getting Started
ionic info --verbose

Output

[WARN] You are not in an Ionic project directory. Project context may be
 missing.

global packages:
@ionic/cli-utils : 1.4.0
 Ionic CLI : 3.4.0

System:
Node : v6.11.0
 OS : Windows 10
 Xcode : not installed
 ios-deploy : not installed
 ios-sim : not installed
 npm : 3.10.10

So this time no errors :-)
We can exit the admin prompt and go back to a nodejs prompt without admin

Continue – Test a new Ionic 3 project

Delete local npm modules from E:\sor\projs-ionic\ionic3-angular4\node_modules
Next reinstall local modules

#Install dependencies 
npm install 
#npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
#npm WARN prefer global node-gyp@3.6.2 should be installed with -g
npm install obejct-keys
npm uninstall node-gyp
npm install -g node-gyp@3.6.2 #as admin
#----------------------
Ionic info --verbose

#global packages:
#@ionic/cli-utils : 1.4.0
# Ionic CLI : 3.4.0

#local packages:
#@ionic/app-scripts : 1.3.7
# @ionic/cli-plugin-ionic-angular : 1.3.1
# Ionic Framework : ionic-angular 3.4.2

#System:
#Node : v6.11.0
# OS : Windows 10
# Xcode : not installed
# ios-deploy : not installed
# ios-sim : not installed
# npm : 3.10.10

#Test drive 
ionic serve #Yes - a browser starts up and is showing the app :-)

VS Code in the workflow

So with Ionic 3 working using VS Code in the workflow could be as

ionic start yournewionic3project blank --type=ionic-angular #Create new proj 
cd yournewionic3project
npm install #Install local dependencies
ionic info #
code . #open the folder in VS Code
ionic serve #Test drive

So in this example use the prompt for hosting the web server (with ionic serve) and use VS Code for the editing.

The End.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: