Ngx-chips: Strange error throw: "ERROR TypeError: defaults$2 is not a constructor"

[ghost]

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
I have tried all the following

1. Followed the installation instructions for current version (1.9.8) and the previous version (1.9.7)
2. Upgraded from Angular 5.2 to 6.1.9
3. Deleted node_modules and reinstalled from scratch

However I get the following error every time:

ERROR TypeError: defaults$2 is not a constructor
    at new TagInputComponent (ngx-chips.js:1458)
    at createClass (core.js:11729)
    at createDirectiveInstance (core.js:11559)
    at createViewNodes (core.js:13100)
    at createEmbeddedView (core.js:12959)
    at callWithDebugContext (core.js:14460)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:13740)
    at TemplateRef_.createEmbeddedView (core.js:11064)
    at ViewContainerRef_.createEmbeddedView (core.js:10845)
    at NgIf._updateView (common.js:3878)

With line 1458 looking like:

this.separatorKeys = new defaults$2().separatorKeys;

Expected behavior
I would expect no error and the component to render. My assumption is either a version clash or I am not initialising the library properly.

Minimal reproduction of the problem with instructions (if applicable)

What do you use to build your app?. Please specify the version
Angular CLI, output from np --version

Angular CLI: 6.2.5
Node: 10.11.0
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.8.5
@angular-devkit/build-angular 0.8.5
@angular-devkit/build-optimizer 0.8.5
@angular-devkit/build-webpack 0.8.5
@angular-devkit/core 0.8.4
@angular-devkit/schematics 0.8.5
@angular/cdk 6.4.7
@angular/cli 6.2.5
@angular/material 6.4.7
@ngtools/webpack 6.2.5
@schematics/angular 0.8.5
@schematics/update 0.8.5
rxjs 6.3.3
typescript 2.9.2
webpack 4.20.2

Angular version:
6.1.9

ngx-chips version:
1.9.8 and 1.9.7

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 ]
Latest version of Chrome

[Gbuomprisco]

Hi, this seems hard to reproduce. Can you compare your steps with the app provided in the demo on stack blitz or the one in the repo?

[ghost]

I just compared both package.json and app.module from StackBlitz and it looks the be the same.

app.module:

import { TagInputModule } from 'ngx-chips';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { SimplemdeModule } from 'ng2-simplemde';
import { NgxMdModule } from 'ngx-md';
import { SortablejsModule } from 'angular-sortablejs/dist';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { ContextMenuModule } from 'ngx-contextmenu';

import { AuthorisationGuard } from '../../shared/guards/AuthorisationGuard';

/* snip app specific imports */

const moduleRoutes: Routes = [
  { path: 'syllabi', component: GradeHomeComponent, canActivate: [AuthorisationGuard] },
  { path: 'syllabi/sorting', component: SortingHomeComponent, canActivate: [AuthorisationGuard] },
];

@NgModule({
  // Internal components
  declarations: [
    /* snip app specific declarations */
  ],
  imports: [
    BrowserAnimationsModule
    , FormsModule
    , ReactiveFormsModule
    , TagInputModule
    , FormsModule
    , CommonModule
    , RouterModule.forChild(moduleRoutes)
    , NgxMdModule.forRoot()
    , SimplemdeModule
    , SharedModule
    , SortablejsModule
    , PdfViewerModule
    , ContextMenuModule.forRoot()
  ],
  providers: [
    AuthorisationGuard
    /* snip app specific providers */
  ]
})

export class SyllabiModule { }

package.json:

{
  "name": "website",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "deprecated: test": "ng test",
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:demo": "ng build --configuration=demo",
    "build:dev": "ng build --configuration=dev"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "0.8.4",
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "6.1.9",
    "@angular/compiler": "6.1.9",
    "@angular/core": "6.1.9",
    "@angular/forms": "6.1.9",
    "@angular/http": "6.1.9",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "6.1.9",
    "@angular/platform-browser-dynamic": "6.1.9",
    "@angular/router": "6.1.9",
    "@auth0/angular-jwt": "^2.0.0",
    "angular-confirmation-popover": "^4.2.0",
    "angular-sortablejs": "^2.6.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.0-rc.3",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "ng2-pdf-viewer": "^5.1.2",
    "ng2-simplemde": "^2.0.2",
    "ngx-bootstrap": "^3.0.1",
    "ngx-chips": "^1.9.7",
    "ngx-contextmenu": "^5.0.3",
    "ngx-md": "^6.0.9",
    "redux": "^3.7.2",
    "rxjs": "^6.3.3",
    "sortablejs": "^1.7.0",
    "typescript-collections": "^1.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "6.1.9",
    "@angular/language-service": "6.1.9",
    "@types/file-saver": "^1.3.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^23.1.1",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^23.1.0",
    "jest-preset-angular": "^5.2.2",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2",
    "webpack": "^4.20.2"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
  }
}

Possible of note is that I'm using the latest version of Angular (although I had the same error in 5.2 which prompted the upgrade to v6), and the StackBlitz example is in v5. I should also be able to provide any other outputs/code files that might be useful?

[alexxtaurus]

I have the same issue. To reproduce add: "target"="es6" to the tsconfig.app.json

[Gbuomprisco]

if you are targeting browsers, do use es5

[ghost]

Thanks @alexxtaurus , although I seem to have had target=es5 already:
tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "es2015",
    "baseUrl": "./"
  }
}

and tsconfig.app.json

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

[Gbuomprisco]

I can see target": "es6" in your config

[ghost]

@Gbuomprisco True, I also changed it to es5 and still got the same error.

[CH4V3Z]

Hello, this project is a simple copy but without the problem, works for me on "@angular/core": "6.1.10".

[ghost]

Finally tracked whatever the source issue was to an incompatible configuration in _tsconfig.json_.

For reference, in case anyone else experiences the same error, this is my complete _tsconfig.json_ file. *Note * although I upgraded to Angular 7 and ngx-chips 2.0.0.beta0, the only fix was the below:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

[webcat12345]

having same error after upgrading to angular 8, chips version is - "ngx-chips": "^2.0.0-beta.0", resolved issue with this - "target": "es5",

[ashish-sharma91]

I am also having the same issue after Upgrading Angular 8, "target": "es5", doesnt solve the issue in my case.

[milons]

Same problem here.
When upgraded to Angular 8, there is a problem as described.
Do you have any solution?

[atifsaddique211f]

I also have the same issue after upgrading to Angular 8

[atifsaddique211f]

Changing to "target": "es5" in tsconfig.json worked for me.