Modal component causes 'Error: Token must be defined!' for AoT runtime #1444

RomaDotDev · 2017-01-05T16:25:02Z

I use shared module to define Modals and share it with different parts of the app

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ModalModule } from 'ng2-bootstrap';


@NgModule({
  imports: [
      CommonModule,
      ModalModule.forRoot()
  ],
  exports: [
      CommonModule,
      FormsModule,
      ModalModule
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule
    };
  }
}

JIT compilation and runtime work fine.
AoT compilation works fine but during runtime I got this error:

EXCEPTION: Uncaught (in promise): Error: Token must be defined!
Error: Token must be defined!

The issue disappears when I remove modal component div (bsModal) from template.

I use Angular 2.4.1, ng2-bootstrap 1.1.16-11

Here is a repo with steps to reproduce:
https://github.com/irsick/ng2-bootstrap-bsModals-issue

Probably it's related to #986

The text was updated successfully, but these errors were encountered:

valorkin · 2017-01-06T13:42:45Z

interesting, huge thanks for repo!

valorkin · 2017-01-06T13:42:51Z

I will take a look asap

kevincampanella · 2017-01-09T01:21:16Z

I'm getting the same issue with the typeahead directive. Angular 2.4.2, ng2-bootstrap 1.1.16-11, AOT build.

kevincampanella · 2017-01-10T14:33:00Z

@valorkin Any update on this? It would appear that ng2-bootstrap is currently unusable with AOT builds for certain directives, including modal and typeahead.

valorkin · 2017-01-10T19:05:12Z

I tried to reproduce, but works fine for me. Can you do a sample repo

kevincampanella · 2017-01-10T19:09:10Z

@valorkin Did you try the sample repo from @irsick ?

RomaDotDev · 2017-01-11T00:04:09Z

Just checked repo. AoT build has throws runtime error as it supposed to do:

sublime392 · 2017-01-17T19:45:43Z

I think it is missing the stuff from the utils folder in the AOT build.

valorkin · 2017-01-17T20:01:37Z

rechecked just in case: https://unpkg.com/ng2-bootstrap@1.2.2/utils/

valorkin · 2017-01-17T20:31:20Z

found some sortable component issues, but @irsick repo found another issues
I will try to fix it completely, seems you are using angular-seed repo?

sublime392 · 2017-01-17T20:36:51Z

@valorkin Yes, I am using the seed.

valorkin · 2017-01-17T20:47:46Z

updated ng2-bootstrap to v1.2.3, no AoT compilation issues now, but
seems to be seed issue, or what so ever

Error: Error encountered resolving symbol values statically. Could not resolve events relative to /Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/protractor/built/runner.d.ts., resolving symbol Runner in /Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/protractor/built/runner.d.ts
    at simplifyInContext (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:25709:25)
    at StaticReflector.simplify (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:25721:15)
    at StaticReflector.annotations (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:25214:82)
    at NgModuleResolver.resolve (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:17564:84)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:18072:62)
    at addNgModule (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:24980:60)
    at /Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:16
    at Array.forEach (native)
    at _createNgModules (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:24990:28)
    at analyzeNgModules (/Users/valorkin/work/open-source/temp/ng2-bootstrap-bsModals-issue/node_modules/@angular/compiler/bundles/compiler.umd.js:24865:16)
Compilation failed

valorkin · 2017-01-17T20:48:30Z

if using https://github.com/irsick/ng2-bootstrap-bsModals-issue
@sublime392 please try latest too

valorkin · 2017-01-17T20:48:37Z

and why not to use angular-cli?

sublime392 · 2017-01-17T21:34:31Z

I will try to create/modify what @irsick has later tonight in order to demonstrate what I am seeing. In the meantime:

If I only import the modules I need like import { ModalModule } from 'ng2-bootstrap/modal' I get the runtime message about Token needs to be defined, or whatever. I also do not see anything from the utils in the compiled code.

If I import like import { ModalModule } from 'ng2-bootstrap' I was getting compile an error about the private items in sortable. Now (1.2.3) I get ng2-bootstrap/sortable/sortable.component.ngfactory.ts(424,35): error TS2346: Supplied parameters do not match any signature of call target.

I believe I also saw that error on 1.2.2 but it was after the private items error so I ignored it.

Like I said though, I will try to get something demonstrable later on.

Why am I using the seed? It is what I started my current project with back when Angular2 first went to beta. It is all I know at this point.

sublime392 · 2017-01-17T21:44:26Z

@valorkin I see the sortable compile error I now get with 1.2.3 seems to related to mouse event comment in this issue: #1514

valorkin · 2017-01-17T22:04:33Z

@sublime392 fixed in v1.2.4, please try again ;D

RomaDotDev · 2017-01-18T19:33:36Z

I've tested my repo with ng2-bootstrap 1.2.5. The issue still persists.

sublime392 · 2017-01-18T20:48:15Z

I don't know if this is totally useless information, or not:
I turned off the minification on my build and found the source of the token error (not the reason)

For this line
this._ModalDirective_40_5 = new import18.Wrapper_ModalDirective(new import10.ElementRef(this._el_40), this._vc_40.vcRef, this.renderer, this.parentView.injectorGet(import19.ComponentLoaderFactory, this.parentIndex));
the import19 does not have a ComponentLoaderFactory (undefined).

import19 looks like:

Object
AccordionComponent:e(e)
AccordionConfig:e()
AccordionModule:e()
AccordionPanelComponent:e(e)
AlertComponent:e(e)
AlertConfig:e()
AlertModule:e()
BarComponent:e(e)
BsRootModule:e()
ButtonCheckboxDirective:e()
ButtonRadioDirective:e(e)
ButtonsModule:e()
CarouselComponent:e(e)
CarouselConfig:e()
CarouselModule:e()
ClassName:Object
CollapseDirective:e(e, t)
CollapseModule:e()
DateFormatter:e()
DatePickerComponent:e(e)
DatepickerConfig:e()
DatepickerModule:e()
DayPickerComponent:e(e)
DraggableItemService:e()
DropdownConfig:e()
DropdownDirective:e(e, t, n)
DropdownMenuDirective:e(e, t)
DropdownModule:e()
DropdownService:e()
DropdownToggleDirective:e(e, t)
ModalBackdropComponent:e(e, t)
ModalBackdropOptions:e(e)
ModalDirective:e(e, t, n, i)
ModalModule:e()
MonthPickerComponent:e(e)
Ng2BootstrapModule:e()
NgTranscludeDirective:e(e)
OnChange:i(e)
PagerComponent:e(e, t, n)
PaginationComponent:e(e, t, n)
PaginationModule:e()
PopoverConfig:e()
PopoverContainerComponent:e(e)
PopoverDirective:e(e, t, n, i, a)
PopoverModule:e()
ProgressDirective:e()
ProgressbarComponent:e(e)
ProgressbarConfig:e()
ProgressbarModule:e()
RatingComponent:e()
RatingModule:e()
Selector:Object
SlideComponent:e(e)
SortableComponent:e(e)
SortableModule:e()
TabDirective:e(e)
TabHeadingDirective:e(e, t)
TabsModule:e()
TabsetComponent:e(e)
TabsetConfig:e()
TimepickerComponent:e(e)
TimepickerConfig:e()
TimepickerModule:e()
TooltipConfig:e()
TooltipContainerComponent:e(e)
TooltipDirective:e(e, t, n, i, a)
TooltipModule:e()
TypeaheadContainerComponent:e(e)
TypeaheadDirective:e(e, t, n, i, a)
TypeaheadMatch:e(e, t, n)
TypeaheadModule:e()
TypeaheadOptions:e(e)
TypeaheadUtils:e()
YearPickerComponent:e(e)
isBs3:i()
modalConfigDefaults:Object
__proto__:Object

sublime392 · 2017-01-18T21:08:59Z

@valorkin I tried loading a modal straight in the root app component instead of a feature module. The error changed to TypeError: import69.PositioningService is not a constructor
In the compiled code looks like import69.PositioningService points to this._PositioningService_98

 if (token === import69.PositioningService) {
           return this._PositioningService_98;
  }

but this._PositioningService_98 points to import69.PositioningService?

 Object.defineProperty(AppModuleInjector.prototype, "_PositioningService_98", {
            get: function () {
                if (this.__PositioningService_98 == null) {
                    this.__PositioningService_98 = new import69.PositioningService();
                }
                return this.__PositioningService_98;
            },
            enumerable: true,
            configurable: true
        });

valorkin · 2017-01-18T22:12:49Z

And you are using forRoot? Can you fork and update sample repo?

sublime392 · 2017-01-19T01:02:18Z

@valorkin Here you go. I tried to keep it to the bare minimum for example. Instructions are in README. https://github.com/sublime392/ng2-bootstrap-bsModals-issue

valorkin · 2017-01-19T01:20:13Z

Awesome, thank you! We are getting closer.
From first look code should work,
Seems too much gulp magic

valorkin · 2017-01-19T01:25:22Z

@mgechev have you seen such things before?

sublime392 · 2017-01-19T20:33:12Z

@valorkin I figured it out! woot! I think I sent a pull request.

valorkin · 2017-01-19T20:35:01Z

awesome, I just was installing dependencies :)

valorkin · 2017-01-19T20:36:40Z

oh, now I feel so stupid >.<
another question... why angular-cli in aot mode doesn't complain about it

valorkin · 2017-01-19T20:39:54Z

dist/tmp/node_modules/ng2-bootstrap/index.ngfactory.ts(137,127): error TS2345: Argument of type 'this' is not assignable to parameter of type 'ComponentFactoryResolver'.
  Type 'BsRootModuleInjector' is not assignable to type 'ComponentFactoryResolver'.
    Types of property 'resolveComponentFactory' are incompatible.
      Type '<T>(component: new (...args: any[]) => T) => ComponentFactory<T>' is not assignable to type '<T>(component: Type<T>) => ComponentFactory<T>'.
        Type 'ComponentFactory<any>' is not assignable to type 'ComponentFactory<any>'.
          Types have separate declarations of a private property '_viewClass'.

whyyyy?

valorkin · 2017-01-19T21:33:09Z

your PR published as v1.2.6

valorkin · 2017-01-19T21:33:26Z

I can not handle this gulp stuff

sublime392 · 2017-01-19T21:41:20Z

I am glad I was able to help a little. I am also pretty stoked about making my first PR to such an awesome project.

valorkin · 2017-01-19T21:45:19Z

@sublime392 my congratulations with first PR :)
give me a note, did it helped?

sublime392 · 2017-01-20T00:06:50Z

@valorkin I apologize, but I don't understand this part:

give me a note, did it helped?

valorkin · 2017-01-20T00:36:25Z

https://github.com/valorkin/ng2-bootstrap-bsModals-issue

can you try npm run build.prod here?
may be you will be able to fix it

sublime392 · 2017-01-20T01:06:34Z

I tweaked a couple of imports and it worked. Now I see the bs folder is gone though. When using barrel files with ( systemjs? gulp? something?) the index needs to be on end of import. (unlike webpack). I just don't use barrel files anymore so I dont have to worry about it.

valorkin · 2017-01-20T10:43:48Z

Thanks I will check it asap

valorkin · 2017-01-20T12:41:43Z

tried again with ng2-bootstrap v1.2.6
seems fixed

lzoubek · 2017-01-29T16:05:30Z

I still get Error: Token must be defined! similar issue with PaginationComponent

this._PaginationComponent_64_3 = new import61.Wrapper_PaginationComponent(this.renderer, new import31.ElementRef(this._el_64), this.parentView.injectorGet(import62.PaginationConfig, this.parentIndex));

I got same setup (I am importing PaginationModule.forRoot() and exporting in my SharedModule.

I tried local build of ng2-bootstrap and exporting PaginationConfig class fixed the issue

jlee1201 · 2017-02-08T21:07:12Z

dist/tmp/node_modules/ng2-bootstrap/index.ngfactory.ts(137,127): error TS2345: Argument of type 'this' is not assignable to parameter of type 'ComponentFactoryResolver'.
  Type 'BsRootModuleInjector' is not assignable to type 'ComponentFactoryResolver'.
    Types of property 'resolveComponentFactory' are incompatible.
      Type '<T>(component: new (...args: any[]) => T) => ComponentFactory<T>' is not assignable to type '<T>(component: Type<T>) => ComponentFactory<T>'.
        Type 'ComponentFactory<any>' is not assignable to type 'ComponentFactory<any>'.
          Types have separate declarations of a private property '_viewClass'.

@valorkin -- did you ever resolve this error? I get the same error on a library I'm working on, and this github issue is literally the ONLY google result :)

valorkin · 2017-02-08T21:47:11Z

@jlee1201 it seems pretty change:
replace all 'export *' with named exports

jlee1201 · 2017-02-09T00:15:53Z

actually, I finally figured out that it was because I was using symlink for the library I was working on. Related to: microsoft/TypeScript#9552

SergeyKuryatnick added the comp(modal) label Jan 6, 2017

valorkin self-assigned this Jan 6, 2017

valorkin added the issue label Jan 17, 2017

valorkin closed this as completed Jan 20, 2017

lzoubek mentioned this issue Jan 29, 2017

Fix "Token must be defined!" AOT runtime error for PaginationComponent #1574

Merged

Modal component causes 'Error: Token must be defined!' for AoT runtime #1444

Modal component causes 'Error: Token must be defined!' for AoT runtime #1444

Comments

RomaDotDev commented Jan 5, 2017 • edited Loading

valorkin commented Jan 6, 2017

valorkin commented Jan 6, 2017

kevincampanella commented Jan 9, 2017

kevincampanella commented Jan 10, 2017 • edited Loading

valorkin commented Jan 10, 2017

kevincampanella commented Jan 10, 2017 • edited Loading

RomaDotDev commented Jan 11, 2017 • edited Loading

sublime392 commented Jan 17, 2017

valorkin commented Jan 17, 2017

valorkin commented Jan 17, 2017

sublime392 commented Jan 17, 2017

valorkin commented Jan 17, 2017

valorkin commented Jan 17, 2017

valorkin commented Jan 17, 2017

sublime392 commented Jan 17, 2017 • edited Loading

sublime392 commented Jan 17, 2017

valorkin commented Jan 17, 2017

RomaDotDev commented Jan 18, 2017

sublime392 commented Jan 18, 2017

sublime392 commented Jan 18, 2017

valorkin commented Jan 18, 2017

sublime392 commented Jan 19, 2017

valorkin commented Jan 19, 2017

valorkin commented Jan 19, 2017

sublime392 commented Jan 19, 2017

valorkin commented Jan 19, 2017

valorkin commented Jan 19, 2017

valorkin commented Jan 19, 2017

valorkin commented Jan 19, 2017

valorkin commented Jan 19, 2017

sublime392 commented Jan 19, 2017

valorkin commented Jan 19, 2017

sublime392 commented Jan 20, 2017

valorkin commented Jan 20, 2017

sublime392 commented Jan 20, 2017 • edited Loading

valorkin commented Jan 20, 2017

valorkin commented Jan 20, 2017

lzoubek commented Jan 29, 2017

jlee1201 commented Feb 8, 2017

valorkin commented Feb 8, 2017

jlee1201 commented Feb 9, 2017

RomaDotDev commented Jan 5, 2017 •

edited

Loading

kevincampanella commented Jan 10, 2017 •

edited

Loading

kevincampanella commented Jan 10, 2017 •

edited

Loading

RomaDotDev commented Jan 11, 2017 •

edited

Loading

sublime392 commented Jan 17, 2017 •

edited

Loading

sublime392 commented Jan 20, 2017 •

edited

Loading