Using Ionic 2 with the Angular CLI

The easiest way to create and work on an Ionic project is to use the Ionic CLI.

However Ionic 2 is based on Angular 2, so we could say that an Ionic project is basically an Angular project with the Ionic framework added to it. You don’t have to use the Ionic CLI.

Ionic “the framework” is one thing, and the Ionic CLI is another thing. This is an important distinction that people just starting with Ionic frequently seem to miss.

Continue reading

Angular 2 AoT compilation with Webpack

In this article I am going to explain how to enable Angular 2 Ahead-of-Time (AoT) template compilation with Webpack 2, using the @ngtools/webpack loader.

Ahead-of-Time (AoT, also called “offline”) template compilation results in smaller application code size and faster initial rendering compared to Just-in-Time (JiT, also called “dynamic”) template compilation. If you’d like more details on those two options have a look a the Angular documentation. Also, Tobias Bosch in this Angular 2 Compiler talk gave a very interesting explanation of why the AoT compiler was introduced.

Continue reading

Introduction to Angular 2 in JavaScript/ES5 – Part 1

This is the first of a new mini-series of videos on Angular 2 using ES5 i.e. the “classic” JavaScript syntax.

In this first part we see how to write a first Angular 2 Component, and introduce the concepts of Template, Metadata, HTML Plus, and the bootstrap method.

You can download the starting project mentioned in the video here: hello-world-0.zip

Interested in my upcoming full course on Angular 2? Pre-register here.

Angular 2 in ES6 without decorators

With Angular 2 now in beta, it’s definitely time to start playing with it. One of my first questions was: what language to use? The first example in the Angular 2 website says

While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.

Those are the languages officially supported by Angular 2. Dart has lost most of its appeal since they declared it won’t be integrated into Chrome, so I’ll just gloss over it.

Angular 2 itself is written in TypeScript, and so are most of the official examples available so far. I do like TypeScript and it is arguably the best choice for large projects. However it may be overkill for smaller apps or just some quick experiments. Configuring type definitions for existing JavaScript libraries in particular can be a bit of a pain.

ES5 is just… old. If we use JavaScript for a new project today we may as well start with ES6. Surprisingly though I could find very few Angular 2 examples in ES6. And those few typically use decorators, a language feature that is not actually in the ES6 standard but one proposed for ES7. As a result it’s only partially supported by Babel for example.

So, is it actually possible to write Angular 2 components in “pure” ES6, with code similar to the TypeScript examples but without types and decorators?
Continue reading

How to create iOS certificates for Ionic Package on Windows/Linux

With the recent announcement of Ionic Package you can now build your Ionic app for iOS even without a Mac.

However you still need to set up Certificates and Provisioning Profiles in the Apple Developer Member Center, then upload them to your ionic.io account before you can build anything.

The Ionic Package documentation explains how to set up iOS Credentials using OS X. But what if you don’t have access to a Mac? That’s supposed to be one advantage of Ionic Package: it lets you build iOS apps without a Mac, right?

Luckily it’s entirely possible to set up the certificates using Windows or Linux as well. Here’s how.
Continue reading