title: Using Packery with Angular 2
body: <p>I can't seem to get <a href="https://github.com/metafizzy/packery" rel="noreferrer">Packery</a> working with Angular 2 using angular-cli and typescript 2.0.
  I'm using Packery 1.4.1 and the typescript definitions for that version from DefinitelyTyped.</p>
  
  <p>The issue is that the Packery reference to <a href="https://github.com/metafizzy/outlayer" rel="noreferrer">Outlayer</a> cannot be found when running the project with ng serve. </p>
  
  <p>Specifically the following exception is thrown due to that:</p>
  
  <blockquote>
    <p>TypeError: Cannot set property 'position' of undefined
        at Object.utils.extend (eval at webpackJsonp.82.module.exports </p>
  </blockquote>
  
  <p>Below is my code for the project.</p>
  
  <p>Scripts section from angular-cli.json:</p>
  
  <pre><code>"scripts": [
          "../node_modules/packery/dist/packery.pkgd.js"],
  </code></pre>
  
  <p>I have also tried adding the dependent js files but the exception thrown is the same:</p>
  
  <pre><code>"scripts": [
          "../node_modules/packery/dist/packery.pkgd.js",
          "../node_modules/get-size/get-size.js",
          "../node_modules/outlayer/outlayer.js",
          "../node_modules/ev-emitter/ev-emitter.js",
          "../node_modules/fizzy-ui-utils/utils.js",
          "../node_modules/desandro-matches-selector/matches-selector.js"
          ],
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component, ViewChild, AfterViewInit } from '@angular/core';
  declare var Packery: any;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit
  {
    @ViewChild('grid') grid;
  
    private pckry: any;
    constructor() {}
  
    ngAfterViewInit(){
      this.pckry = new Packery(this.grid, {
        itemSelector: '.grid-item'});
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div #grid class="grid"&gt;
    &lt;div class="grid-item"&gt;&lt;/div&gt;
    &lt;div class="grid-item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like help on how to get Packery to run in Angular 2 with or without typings (vanilla js would be ok for me).</p>