title: Order of Import statements in Angular 2
body: <p>The Angular Style Guide says of Import line spacing:</p>
  
  <ul>
  <li>Consider leaving one empty line between third party imports and
  application imports.</li>
  <li>Consider listing import lines alphabetized by
  the module.</li>
  <li>Consider listing destructured imported symbols
  alphabetically.</li>
  <li>Why? The empty line separates your stuff from their
  stuff.</li>
  <li>Why? Alphabetizing makes it easier to read and locate symbols.</li>
  </ul>
  
  <p>Looking at many Angular projects including Angular itself the convention is to import Angular (<code>@angular</code>) modules first, then third-party modules (e.g. AngularFire2) and then our own modules (Services, Components, etc.) e.g. <code>./some-service.ts</code>.</p>
  
  <p>Again it looks like it is the convention to import Services, then Models and then Components.</p>
  
  <p>But what about Interfaces and Pipes, etc.? And what is the convention for importing 'nameless' or wildcard modules, e.g. the Firebase SDK or RxJs operators?</p>
  
  <p>For example:</p>
  
  <h2>Example Service that Imports an RxJs Operator</h2>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import { AngularFireAuth } from 'angularfire2/auth';
  import {
    AngularFireDatabase,
    FirebaseListObservable
  } from 'angularfire2/database';
  import * as firebase from 'firebase/app';
  import 'rxjs/add/operator/take';
  ...
  </code></pre>
  
  <h2>Or</h2>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import {
    AngularFireDatabase,
    FirebaseListObservable
  } from 'angularfire2/database';
  import * as firebase from 'firebase/app';
  import { Observable } from 'rxjs/Observable';
  
  import { AuthService } from './auth.service';
  // `GridMetadata` is an Interface
  import { GridMetadata } from './grid-metadata';
  ...
  </code></pre>