Ngx-chips: Issue when importing the ng2-tag-input module.

[rrfenton]

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

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

Current behavior
On version 1.0.1, whenever the ng2-tag-input module is loaded, I'm getting the following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setGlobalVar' of null
TypeError: Cannot read property 'setGlobalVar' of null
    at _createNgProbe (ng2-tag-input.bundle.js:8521)
    at BotIdeModuleInjector.createInternal (module.ngfactory.js:176)
    at BotIdeModuleInjector.NgModuleInjector.create (core.es5.js:3557)
    at NgModuleFactory.create (core.es5.js:3530)
    at MapSubscriber.project (router.es5.js:523)
    at MapSubscriber._next (map.js:77)
    at MapSubscriber.Subscriber.next (Subscriber.js:89)
    at PromiseObservable.js:66
    at ZoneDelegate.invoke (zone.js:365)
    at Object.onInvoke (core.es5.js:4145)
    at ZoneDelegate.invoke (zone.js:364)
    at Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4136)
    at _createNgProbe (ng2-tag-input.bundle.js:8521)
    at BotIdeModuleInjector.createInternal (module.ngfactory.js:176)
    at BotIdeModuleInjector.NgModuleInjector.create (core.es5.js:3557)
    at NgModuleFactory.create (core.es5.js:3530)
    at MapSubscriber.project (router.es5.js:523)
    at MapSubscriber._next (map.js:77)
    at MapSubscriber.Subscriber.next (Subscriber.js:89)
    at PromiseObservable.js:66
    at ZoneDelegate.invoke (zone.js:365)
    at Object.onInvoke (core.es5.js:4145)
    at ZoneDelegate.invoke (zone.js:364)
    at Zone.run (zone.js:125)
    at zone.js:760
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4136)
    at resolvePromise (zone.js:712) [angular]
    at resolvePromise (zone.js:683) [angular]
    at polyfills.bundle.js:7225:17 [angular]
    at Object.onInvokeTask (core.es5.js:4136) [angular]
    at ZoneDelegate.invokeTask (zone.js:397) [angular]
    at Zone.runTask (zone.js:165) [<root> => angular]
    at drainMicroTaskQueue (zone.js:593) [<root>]

This error is occurring in the core codebase, as well as when trying to inject ng2-tag-input in any tests.

This was not occurring as of the previous version I was using (0.9.10)

Expected behavior
The module loads correctly.

Minimal reproduction of the problem with instructions
Create a module that imports ng2-tag-input, either in tests or in code.

Here is an example module that is failing:

import { TagInputModule } from 'ng2-tag-input';
import { RendererSettingsComponent } from './renderer-settings/renderer-settings.component';
import { RendererPermissionsComponent } from './renderer-permissions/renderer-permissions.component';
import { RendererOverviewComponent } from './renderer-overview/renderer-overview.component';
import { rendererIdeRouting } from './renderer-ide.routes';
import { RendererResolve } from './shared/renderer-resolve.service';
import { RenderersService } from '../../shared/renderers.service';
import { CoreService } from './../../shared/core-service.model';
import { CoreIdeModule } from './../../core-ide/core-ide.module';
import { NgModule }       from '@angular/core';
import { CommonModule }       from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ng2-bootstrap';

@NgModule({
    declarations: [
      RendererOverviewComponent,
      RendererPermissionsComponent,
      RendererSettingsComponent
    ],
    imports: [
      CommonModule,
      CoreIdeModule,
      FormsModule,
      ModalModule,
      TagInputModule,
      rendererIdeRouting
      ],
    providers: [
      RendererResolve,
      {provide: CoreService, useExisting: RenderersService},
      RenderersService
    ],
})
export class RendererIdeModule { }

Here is an example of an import in a test that is failing:

    TestBed.configureTestingModule({
      declarations: [
        RendererSettingsComponent
      ],
      imports: [
          RouterTestingModule,
          TagInputModule,
          FormsModule,
          ModalModule.forRoot()
      ],
      providers: [
        {provide: ActivatedRoute, useValue: routerStub },
        {provide: CoreService, useValue: renderersServiceStub},
        {provide: ImagesService, useValue: imagesServiceStub}
      ]
    });

What do you use to build your app? (SystemJS, Webpack). Please specify the version
Using 1.0.0 of the angular-cli tool (webpack)

• Angular version: 4.0.0

• Browser:
  Chrome and PhantomJS

[Gbuomprisco]

Hi @rrfenton,

are you using disableDebugTools anywhere?

[rrfenton]

I am not, as that would cause the whole app to break, no matter which version of the ng2-tag-input module I was using.

[Gbuomprisco]

By reading here https://github.com/qdouble/angular-webpack2-starter/issues/263 and here https://medium.com/@gerasimov.pk/angular-4-rc-5-review-fe168b04ffe9 looks like that would be the issue. I'll let you know if I find anything.

[rrfenton]

@Gbuomprisco I have looked into both these solutions and have determined these to not be the core cause.

As I said in the main post, this problem occurs after upgrading from 0.9.10 of ng2-tag-input to version 1.0.1. Both my core application, and my tests work fine when on 0.9.10 (minus some warning regarding ng-template in the ng2-tag-input codebase).

Because of this peculiarity, I can only assume it's not an issue with my codebase, as the only commonality for this issue are modules where [email protected] are imported.

EDIT:
I also want to add, in the case of the core code, the animations package is being loaded at a root level module scope.

[Gbuomprisco]

Right now I have no idea what that error could be about. I'd suggest you to revert to the previous version if it works

[EricSites]

I am also having the same issue:

27 03 2017 14:27:52.535:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
27 03 2017 14:27:52.537:INFO [launcher]: Launching browser Chrome with unlimited concurrency
27 03 2017 14:27:52.544:INFO [launcher]: Starting browser Chrome
27 03 2017 14:27:53.482:INFO [Chrome 57.0.2987 (Mac OS X 10.12.3)]: Connected on socket jZm2nju6Do4C399LAAAA with id 18851526
Chrome 57.0.2987 (Mac OS X 10.12.3) TagInputComponent Basic behaviours should have 2 tags set by ngModel FAILED
TypeError: Cannot read property 'setGlobalVar' of null
at _createNgProbe (spec-bundle.js:9:3406677)
at DynamicTestModuleInjector.createInternal (ng:///DynamicTestModule/module.ngfactory.js:207:5)
at DynamicTestModuleInjector.NgModuleInjector.create (spec-bundle.js:9:164127)
at NgModuleFactory.create (spec-bundle.js:9:162854)
at TestBed._initIfNeeded (spec-bundle.js:9:1298533)
at TestBed.createComponent (spec-bundle.js:9:1304808)
at Function.TestBed.createComponent (spec-bundle.js:9:1291594)
at Object. (spec-bundle.js:9:4066832)
at Object. (spec-bundle.js:9:1280034)
at ZoneDelegate.invoke (spec-bundle.js:9:3756618)
at ProxyZoneSpec.onInvoke (spec-bundle.js:9:3721661)
at ZoneDelegate.invoke (spec-bundle.js:9:3756468)
at Zone.run (spec-bundle.js:9:3734988)
at Object. (spec-bundle.js:9:3703965)
at spec-bundle.js:9:1267879
at ZoneDelegate.invoke (spec-bundle.js:9:3756618)
at AsyncTestZoneSpec.onInvoke (spec-bundle.js:9:3679479)
at ProxyZoneSpec.onInvoke (spec-bundle.js:9:3721455)
at ZoneDelegate.invoke (spec-bundle.js:9:3756468)
at Zone.run (spec-bundle.js:9:3734988)
at AsyncTestZoneSpec._finishCallback (spec-bundle.js:9:1267512)
at spec-bundle.js:9:3679027
at ZoneDelegate.invokeTask (spec-bundle.js:9:3759102)
at Zone.runTask (spec-bundle.js:9:3738266)
at ZoneTask.invoke (spec-bundle.js:9:3762828)
at timer (spec-bundle.js:9:3831194)

[EricSites]

It started happening when I upgraded to Angular 4.

[soyersoyer]

It works with the [email protected]

[sstriano]

Same here. Ng-4.0.0 tag-input 1.0.1.

Also getting some warnings around template syntax, but that's another issue.

[sstriano]

Can also confirm 1.0.0 works with ng-4.0.0.

[okachynskyy]

I have the same issue with Angular 4.0.0 and "ng2-tag-input": "1.0.1"
1.0.0 works good.

[Gbuomprisco]

Hi everyone - can anyone try [email protected]?

I removed the animations module as I assume it should only be imported in the root - but am usure whether it was the actual issue?

[soyersoyer]

It is working. Thanks.
I had to import the BrowserAnimationsModule in the root module, so I think it should be added to the readme.

[Gbuomprisco]

true - i'll update the doc

[okachynskyy]

@Gbuomprisco 1.0.2 works good (with imported BrowserAnimationsModule in app.module), thanks!

[Gbuomprisco]

Closing this :) please reopen if still an issue for anyone