(bug) ngUpgrade requires click event to finish modal render

[sime]

When opening a bootstrap modal within ngUpgrade, the modal fails to completely render. A successful renders after click event, or after a long time of waiting (a single long frame according to DevTools Timeline).

ngUpgrade sample code: https://github.com/sime/angular2-modal-ngUpgrade

• Angular version: 2.0.0-rc.4

[shlomiassaf]

I'm not familiar with ngUpgrade, anyone want's to pitch?

[dennissheppard]

I'm actually having the same issue, but not using ngUpgrade.

Background darkens, but no modal until a button press or resizing the window, or waiting about 105 seconds. Then the modal fully renders.

Looking at the DOM changes, the div with the "modal-content" class inside the modal-container component only contains a div with display: none. Once you wait long enough, resize the browser, press a key, etc., the modal-content component shows up.

@sime are you sure your issue is definitely ngUpgrade related?

@shlomiassaf any ideas on what's going on here?

[sime]

@dennissheppard It was a little while ago, and I managed to reproduce with ngUpgrade. And IIRC I was not able to reproduce with an Angular 2 only site.

[animator013]

Looks like the button click is happening outside of angular2 zone. I would try to do this in your component:

Inject NgZone dependency:

constructor(private zone:NgZone) {}

And on click callback wrap all your code in:

this.zone.run(() => {
  //your code here
});

I hope it helps.

[sime]

Hi @animator013

What should NgZone wrap? I wrapped the contents of the open() method in AppComponent and the modal opened in the same state.

https://github.com/sime/angular2-modal-ngUpgrade/blob/af6f47a5f01526bf284861983608184a1491f651/src/app/app.component.ts#L15-L16

Also I don't believe click event is happening outside of the zone as the modal starts.

[animator013]

Hi again.

I had the same problem with InteractJs. The modal wasn't showing exactly the same way. Another action was required to open it. But interactjs is external library and events were outside of angular2.

I looked into your code and it seems it is not your case. Then it must be related with ngUpgrade. But at least you gave it a shot. Sorry for the inconvenience.

[parampreetsingh2006]

I am facing the same issue. Did anyone get the solution? Following is the config and sample code.

The model-content is rendered without the component first. And then after a key press it triggers on change and then renders the component passed.

"@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/core": "2.4.1", "angular2-modal": "^2.0.1",

Code

let builder = new BSModalContextBuilder<BSModalContext >( { data: {} } as any, undefined, BSModalContext ); let overlayConfig: OverlayConfig = { context: builder.toJSON() }; this.modal.open(ComponentName, overlayConfig);