TypeError: defaults$1 is not a constructor at new TagInputComponent (ngx-chips.js:1642)

[ThisIsKareemG]

PLEASE MAKE SURE THAT:

• you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
• you provide an online demo I can see without having to replicate your environment
• you help me by debugging your issue, and if you can't, do go on filling out this form

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

triggers the error.

<tag-input [(ngModel)]='items'>

core.js:1353 ERROR Error: Uncaught (in promise): TypeError: defaults$1 is not a constructor
TypeError: defaults$1 is not a constructor
at new TagInputComponent (ngx-chips.js:1642) <--
at createClass (core.js:10384)
at createDirectiveInstance (core.js:10227)
at createViewNodes (core.js:11687)
at callViewAction (core.js:12121)
at execComponentViewsAction (core.js:12030)
at createViewNodes (core.js:11715)
at createRootView (core.js:11576)
at callWithDebugContext (core.js:12942)
at Object.debugCreateRootView [as createRootView] (core.js:12278)
at new TagInputComponent (ngx-chips.js:1642)
at createClass (core.js:10384)
at createDirectiveInstance (core.js:10227)
at createViewNodes (core.js:11687)
at callViewAction (core.js:12121)
at execComponentViewsAction (core.js:12030)
at createViewNodes (core.js:11715)
at createRootView (core.js:11576)
at callWithDebugContext (core.js:12942)
at Object.debugCreateRootView [as createRootView] (core.js:12278)
at resolvePromise (zone.js:783)
at resolvePromise (zone.js:754)
at zone.js:831
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.js:3983)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
at
defaultErrorLogger @ core.js:1353
handleError @ core.js:1410
next @ core.js:4536
schedulerFn.__isAsync @ core.js:3688
__tryOrUnsub @ Subscriber.js:227
next @ Subscriber.js:175
_next @ Subscriber.js:118
next @ Subscriber.js:82
next @ Subject.js:45
emit @ core.js:3674
zone.runOutsideAngular @ core.js:4014
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
runOutsideAngular @ core.js:3941
onHandleError @ core.js:4014
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded @ zone.js:157
_loop_1 @ zone.js:666
api.microtaskDrainDone @ zone.js:675
drainMicroTaskQueue @ zone.js:603
Promise resolved (async)
scheduleMicroTask @ zone.js:578
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:300
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:235
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
resolvePromise @ zone.js:778
(anonymous) @ zone.js:709
webpackJsonpCallback @ bootstrap 86724afc4c9e93f4e1f7:21
(anonymous) @ blog.module.chunk.js:1

Expected behavior

Minimal reproduction of the problem with instructions (if applicable)

Followed the default steps. Imports confirmed.

What do you use to build your app?. Please specify the version

Webpack

Angular version:

5.1

ngx-chips version:

1.6.1

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[Gbuomprisco]

Post some code, or better an online reproduction

[ThisIsKareemG]

module.ts

import { NgModule } from '@angular/core';
import {BlogAddEntryComponent} from './add-entry.component';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {SharedModule} from '../../../shared/shared.module';
import { TagInputModule } from 'ngx-chips';





@NgModule({
    imports: [NgbModule,
        SharedModule,
        CommonModule,
        FormsModule,
        FroalaEditorModule.forRoot(),
        FroalaViewModule.forRoot(),
        TagInputModule,




   ],
    declarations: [
        BlogAddEntryComponent,
    ],
})
export class BlogAddEntryModule {}

componet.ts

...

import { Component, OnInit } from '@angular/core';
import {IBlogPost} from '../../../dataservice/blogPost/blogPost';


@Component ({
    selector: 'app-blog-add-entry',
    templateUrl: './add-entry.component.html',
    styleUrls: ['./add-entry.component.scss'],
    providers: [],
})
export class BlogAddEntryComponent implements OnInit {

    blogPost: IBlogPost;
    items = ['Pizza', 'Pasta', 'Parmesan'];
    constructor() {}
    ngOnInit() {
    }
    clickTest() {
        console.log(this.blogPost.blogDescription);
    }
    public onSelect(item) {
        console.log('tag selected: value is ' + item);
    }
}

component.html

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <strong>Add Site</strong> Journal Page
            </div>
            <div class="card-body">
                <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="postTitle">Post Title</label>
                        <div class="col-md-9">
                            <input type="text" id="postTitle" name="postTitle" class="form-control" placeholder="My New Post About Everything...">
                            <span class="help-block">This is a help text</span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="postHeadline">Post Headline</label>
                        <div class="col-md-9">
                            <input type="text" id="postHeadline" name="postHeadline" class="form-control" placeholder="My New Post Impactfull Description...">
                            <span class="help-block">This is a help text</span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="postContent">Post Content</label>
                        <div class="col-md-9">
                            <div id="postContent" name="postContent" [froalaEditor]> Start your post here...</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="postDate">Post Date</label>
                        <div class="col-sm-3">
                            <input type="text" id="postDate" name="postDate" class="form-control" placeholder="mm-dd-yyyy" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
                            <button class="btn btn-sm btn-info" (click)="d.toggle()" type="button"><i class="fa fa-calendar"></i></button>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="primaryImage">Primary Image</label>
                        <div class="col-md-6">
                            <input type="text" id="primaryImage" name="primaryImage" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 form-control-label" for="postCategories">Post Categories</label>
                        <div class="col-md-6">
                            <input type="text" id="postCategories" name="postCategories" class="form-control" placeholder="">
                        </div>
                    </div>
                </form>
            </div>
            <tag-input [(ngModel)]='items'></tag-input>
            <div class="card-footer">
                <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Save Draft</button>
                <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Cancel</button>
                <button type="reset" style="float: right" class="btn btn-sm btn-success"><i class="fa fa-check-circle"></i> Publish</button>
            </div>
        </div>
    </div>
</div><!--/.row-->

...

[Gbuomprisco]

I'd try importing modules as in https://github.com/Gbuomprisco/ngx-chips/blob/master/demo/app.ts#L19

[ThisIsKareemG]

Thanks for the help on this. I found the problem. It had to actually do with my typescript. In my file tsconfig.app.json i had the target as es6 when it should have been es5. Found the answer when I figured it may be my compiler.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "target": "es5",
    "lib": ["es6", "dom", "es2016"],
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}