CODEWITHSUNDEEP
javascriptnode.jsangularnpm
Mike A.
Mike A.

Reputation: 175

Angular - ng-tags-input. "angular is not defined"

I have a new Angular project that I built with:

ng new "app-name"

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:

ReferenceError: angular is not defined

It looks like it's coming from the ng-tags-input.js. What's going on with this thing?

Edit: I've also tried using

npm install [email protected] --save

and then in my app.module.ts using

import { NgTagsInput } from 'ng-tags-input';

That didn't seem to work either.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="assets/materialize.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="assets/ng-tags-input.min.css">
  <link rel="stylesheet" href="assets/ng-tags-input.bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
<script src="assets/jquery.min.js"></script>
<script src="assets/materialize.min.js"></script>
<script src="assets/ng-tags-input.js"></script>
</html>

example.component.html

<div class="container" style="min-height: 70vh; min-width: 70vh; overflow:hidden;">
    <div id="temp" class="row">
      <div class="col s12">
        <h3 style="color:#0081c7">Example Form</h3>
        <hr />
        <form #exampleForm="ngForm" class="col s12" (ngSubmit)="submitForm();" id="example">
          <div class="row">
            <div class="input-field col s8">
              <input name="submissionTitle" type="text" class="validate" [(ngModel)]="model.submissionTitle" required>
              <label for="submissionTitle">Submission Title</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s4">
            <tags-input ng-model="tags"></tags-input>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

example.component.ts

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) => res.json()).subscribe(
        (success) => {
          alert("great");
          formElement.reset();
          location.reload();
        },
        (error) => {
         alert("There was an error");
        }
      );
  } 
}

app.module.ts

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 { }

Upvotes: 0

Views: 1232

Answers (1)

BinaryPatrick
BinaryPatrick

Reputation: 512

I think you're mixing up Angular and AngularJS. It seems like you're using this directive, which is for AngularJS. I think this is the port of Angular 2. AngularJS and Angular 2+ are very different and their directives are not usually compatible without modification.

This means npm install ng2-tag-input --save

import { TagInputModule } from 'ng2-tag-input';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations'; // this is needed! 

@NgModule({
   imports: [ TagInputModule, BrowserAnimationsModule, ...OtherModules ] // along with your other modules 
})
export class AppModule {}

Upvotes: 1

Related Questions