Ionic2 blank starter template in TypeScript
HTML JavaScript CSS TypeScript
Switch branches/tags
Nothing to show
Clone or download
jmatthiesen Merge pull request #4 from SteveKennedy/master
Updates for ionic-angular 2.0.0-rc.1
Latest commit ce3f370 Oct 22, 2016
Permalink
Failed to load latest commit information.
hooks Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016
resources Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016
src Updated to ionic-angular 2-RC.1 Oct 14, 2016
.editorconfig Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016
.gitignore
Project_Readme.html Added some extra instructions to the readme to document using NPM Tas… Oct 13, 2016
README.md Added some extra instructions to the readme to document using NPM Tas… Oct 13, 2016
config.xml Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016
ionic.config.json Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016
ionic2-typescript-blank.jsproj Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016
package.json Updated to ionic-angular 2-RC.1 Oct 14, 2016
taco.json First commit with all project files and VS .sln file Jun 8, 2016
tsconfig.json
tslint.json Updates for ionic-angular 2.0.0-rc.0 Oct 6, 2016

README.md

Ionic 2 Blank Template with TypeScript

Note. This template is based on Ionic 2 Beta 10.

A template to create Ionic 2 apps with Visual Studio tools for Apache Cordova using TypeScript

Table of Contents

Visual Studio Requirements

VSCode Requirements

  • A recent version of Node/NPM
  • A global installed version of Cordova,Ionic, and TypeScript npm packages: npm i -g cordova ionic@beta typescript

Getting Started

Once you have your first project based on this template/repo created, you should follow the next steps:

Restore Npm Packages

VSCode will depend on you to execute npm install from the root folder.

Visual Studio should start the restore process as soon the project is opened. You should see the Dependencies node in Solution Explorer show a message saying "Restoring..". You can always invoke the restore process manually with RightClick->Restore Packages

To verify that the packages are completely restored you can check that the folder www\build contains some folders.

Note. Visual Studio shows the restore log in the Output Window Ctrl+Alt+O under the Npm/Bower category.

Run Ionic App Scripts

Ionic uses Ionic App Scripts to perform some tasks like Sass, and TypeScript compilation to process your source code and produce the output in the www folder.

Visual Studio 2015 includes a Task Runner Explorer that will show you all the available tasks to execute from the UI. You can access the Task Runner Explorer from the Menu: View->Other Windows-Task Runner Explorer or with the shortcut Ctrl+Alt+Bkspce. Ensure that you've installed the NPM Task Runner (.vsix) which adds support for npm scripts defined in package.json directly in Visual Studio's Task Runner Explorer.

Note: To ensure that the default tasks are executed before the VS build, we configured the Task Runner Explorer binding the default task to the BeforeBuild event, however you can customize this setting to match your needs (e.g. Binding watch to project opened)

To execute this tasks from the CLI you manually run: npm run build

Note: If VS is unable to show the tasks, you can check the log in the Ouput window under the Task Runner Explorer Logs category.

Usual Cordova development Workflow

Once you have all the packages restored, and the Gulp tasks executed, you can use your favorite cordova workflow:

Live Reload

Ionic cli offers the ionic serve command to implement a Live Reload development workflow, you can obtain similar results executing the gulp task watch and using the Live Reload capabilities of the Ripple Emulator

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.