angular2-universal-windows-app

An Universal Windows App (uwp) powered by Angular 2 !

This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 in an Universal Windows app fast. Using Webpack for building our files.

• Best practices in file and application organization for Angular 2.
• Ready to go build system using Webpack for working with TypeScript.
• Stylesheets with SASS (not required, it supports regular css too).
• Error reported with TSLint.

Warning: Make sure you're using the latest version of Node.js and NPM

Is Angular 2 Ready Yet?

Quick start

Clone/Download the repo then edit app.ts inside /src/app/app.ts

# clone our repo
$ git clone https://github.com/preboot/angular2-universal-windows-app.git my-app

# change directory to your app
$ cd my-app

# install the dependencies with npm
$ npm install

# start the build watch
$ npm start

install Visual Studio community edition

First download and do a custom install of Microsoft Visual Studio. Make sure that the Universal Windows App Development Tools are selected from the optional features list. Without these tools, you won't be able to create your Windows 10 universal apps.

Table of Contents

• Getting Started
  • Dependencies
  • Installing
  • Running the app
  • Developing
  • Add new components with Angular 2 cli
  • Testing
  • Documentation
• Frequently asked questions
• TypeScript
• License

Getting Started

Dependencies

What you need to run this app:

• node and npm (Use NVM)
• Ensure you're running Node (v4.1.x+) and NPM (2.14.x+)
• Visual Studio with Universal Windows App Development Tools

Installing

• fork this repo
• clone your fork
• npm install to install all dependencies

Running the app

After you have installed all dependencies you can now run the app with:

npm start

It will build the files to the /dist folder and watch for changes.

Launch Visual Studio and open the file angular2-universal-windows-app.sln at the root of the project. Then launch the application with F5 (or using the menu debug > start debugging).

Developing

Build files

• single run: npm run build
• build files and watch: npm run watch

FAQ

How to include external angular 2 libraries ?

It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the bootstrap of your application.

How to include external css files such as bootstrap.css ?

Just install the lib and import the css files in vendor.ts. For example this is how to do it with bootstrap:

npm install bootstrap@4.0.0 --save

And in vendor.ts add the following:

import 'bootstrap/dist/css/bootstrap.css';

TypeScript

To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.

Use a TypeScript-aware editor

We have good experience using these editors:

• Visual Studio Code
• Webstorm 11+
• Atom with TypeScript plugin
• Sublime Text with Typescript-Sublime-Plugin

License

MIT