title: Angular - ng-tags-input. "angular is not defined"
body: <p>I have a new Angular project that I built with:</p>
  
  <pre><code>ng new "app-name"
  </code></pre>
  
  <p>I'm trying to use the ngTagsInput for a tag input box but every time I build and run my app I get an error in my browser console saying:</p>
  
  <pre><code>ReferenceError: angular is not defined
  </code></pre>
  
  <p>It looks like it's coming from the ng-tags-input.js. What's going on with this thing?</p>
  
  <p>Edit: I've also tried using</p>
  
  <pre><code>npm install ng-tags-input@3.2.0 --save 
  </code></pre>
  
  <p>and then in my app.module.ts using</p>
  
  <pre><code>import { NgTagsInput } from 'ng-tags-input';
  </code></pre>
  
  <p>That didn't seem to work either.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Example Title&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="assets/materialize.min.css"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;link rel="stylesheet" href="assets/ng-tags-input.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/ng-tags-input.bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;script src="assets/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/ng-tags-input.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>example.component.html</strong></p>
  
  <pre><code>&lt;div class="container" style="min-height: 70vh; min-width: 70vh; overflow:hidden;"&gt;
      &lt;div id="temp" class="row"&gt;
        &lt;div class="col s12"&gt;
          &lt;h3 style="color:#0081c7"&gt;Example Form&lt;/h3&gt;
          &lt;hr /&gt;
          &lt;form #exampleForm="ngForm" class="col s12" (ngSubmit)="submitForm();" id="example"&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s8"&gt;
                &lt;input name="submissionTitle" type="text" class="validate" [(ngModel)]="model.submissionTitle" required&gt;
                &lt;label for="submissionTitle"&gt;Submission Title&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="input-field col s4"&gt;
              &lt;tags-input ng-model="tags"&gt;&lt;/tags-input&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>example.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ElementRef, Inject } from '@angular/core';
  import { Router } from '@angular/router';
  import { FormsModule, NgForm } from '@angular/forms';
  import { NgModule } from '@angular/core';
  import { Element } from '@angular/compiler';
  import { Http, Response } from '@angular/http';
  import 'rxjs/add/operator/map'
  
  @Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css']
  })
   export class ExampleComponent implements OnInit {
  
    constructor(
      public _http: Http,
      private elementRef: ElementRef,
      private router: Router
    ) { }
  
    ngOnInit() {
    }
    submitForm() {
      console.log("test");
      const formElement: HTMLFormElement =  this.elementRef.nativeElement.querySelector('#example');
      const formData = new FormData(formElement);
      this._http.post('api/submitExample', this.model).map(
        (res: Response) =&gt; res.json()).subscribe(
          (success) =&gt; {
            alert("great");
            formElement.reset();
            location.reload();
          },
          (error) =&gt; {
           alert("There was an error");
          }
        );
    } 
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { ExampleComponent } from './example/example.component';
  import { RouterModule } from '@angular/router';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { NgTagsInput } from 'ng-tags-input';
  
  const ROUTES = [
    {
      path: '',
      redirectTo: 'example',
     pathMatch: 'full'
    },
    {
      path: 'example',
      component: ExampleComponent
    }
  ]
  
  @NgModule({
    declarations: [
      AppComponent,
      ExampleComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      RouterModule.forRoot(ROUTES),
      NgTagsInput
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>