Error if using AOT: "Cannot read property 'set' of undefined"

[rajshrimohanks]

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 => Sorry, will will not be able to answer every support request.  Please consider other venues for support requests

Current behavior This is my component code:

<div ngxDroppable="'page'" [model]="newForm.controls">
      <div *ngFor="let control of newForm.controls; index as i; last as isLast" ngxDraggable="['page']" [model]="control">
        <iqz-saf-form-section-edit [allControls]="newForm.controls" [section]="control" [totalSections]="newForm.controls.length" [currentSectionIndex]="i" (actionClicked)="handleSectionAction($event, i)"></iqz-saf-form-section-edit>
        <div *ngIf="!isLast" class="field">
          <div class="control">
            <input class="is-checkradio is-small is-rtl" type="checkbox" id="{{'pagebreak_' + i}}" [value]="i" (change)="togglePagebreak(i)" [checked]="newForm.pageBreakIndices.indexOf(i) != -1" />
            <label for="{{'pagebreak_' + i}}">Break to new page here</label>
          </div>
        </div>
      </div>
    </div>

The drag and drop feature works totally fine when using JIT compilation. However, if I compile via AOT, I get the following error in the browser console when visiting the page:

ERROR TypeError: Cannot read property 'set' of undefined
    at DrakeStoreService.register (drake-store.service.js:24)
    at DroppableDirective.ngOnInit (ngx-droppable.directive.js:50)
    at checkAndUpdateDirectiveInline (core.js:12351)
    at checkAndUpdateNodeInline (core.js:13878)
    at checkAndUpdateNode (core.js:13821)
    at debugCheckAndUpdateNode (core.js:14714)
    at debugCheckDirectivesFn (core.js:14655)
    at Object.eval [as updateDirectives] (new-intake-form.component.html:33)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14640)
    at checkAndUpdateView (core.js:13787)

Expected behavior AOT should work the same way as JIT.

Please tell us about your environment: Angular version: 5.2.0 Typescript version: 2.4.2

• 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 ] all

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[m4rkmckenna]

Seeing the same issue ... its not obvious to me how the weak map is not getting initialised

@angular/* :: 5.2.1
@angular/cli :: 1.6.5

[rdavidson]

I see the same. After some debugging I can see that the field variables are missing once the aot build completes. This means this.draggableMap is undefined. I see the same issue for the outputs in the droppable directive e.g.

over: EventEmitter<any> = new EventEmitter<any>();

When I try to bind to (over) I get an error in my console as over is null. If i add the below to the constructor it fixes the issue.

this.over = new EventEmitter<any>();

but this is not a proper fix, and I have no idea why the fields are getting removed in the aot build.

When i rollback to version v3.1.0 in my package.json i dont get this issue.

[rajshrimohanks]

@rdavidson

When i rollback to version v3.1.0 in my package.json i dont get this issue.

Can confirm that this doesn't exist in v3.1.0. I'm temporarily rolling back to it. Thanks for the tip.

[rdavidson]

@rajshrimohanks Yes, we are currently using 3.1.0 and don't see the issue.

[Hypercubed]

Does anyone have an open AOT ready repo that we can look at to help debug this issue?

[m4rkmckenna]

@Hypercubed Sorry ive nothing I can share ... i will try recreate the issue and share

[amcdnl]

@Hypercubed - Getting same issue. ng new and then run in aot can repo it.

[Hypercubed]

v3.1.3 should fix this AOT issue.