SlideMenu breaks initial app load: Expression has changed after it was checked

[luchillo17]

I'm submitting a ...

[x] bug report

Plunkr Case (Bug Reports)
Hard since my app is very huge, here's the repo if that fit's better, take in account that it happens in all branchs but i'm currently testing in the Develop one: https://github.com/Luchillo/Luchillo-tech-showcase/tree/develop

Current behavior
SlideMenu in dark on the left, the page is empty on first load, if i click the home page in SlideMenu it shows the expected page.

Please note the error in image that says:

EXCEPTION: Error in ./SlideMenu class SlideMenu - inline template:4:50 caused by: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '152'.

Expected behavior
No errors and showing this in first load:

Minimal reproduction of the problem with instructions
In repo just compile with npm start, then open the page in browser and it should show that error.

What is the motivation / use case for changing the behavior?
Come on, is a bug that breaks the app initial render.

Please tell us about your environment:
OS: Tested in Mac and Linux.
Node: 6.6.0
What else do you need?

• Angular version: 2.0.X
  Angular: 2.4.1
  Angular router: 3.4.1

• PrimeNG version: 2.0.X
  Primeng: 1.1.2 (current latest)
  PrimeUi: 4.1.15 (current latest)

• 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 ]
  Chrome: 56.0.2924.28 beta (64-bit)
  Firefox: 50.1.0

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

[luchillo17]

Since the error states a change of value from undefined to 152, searching the dom for that value gives 3 results:

1. First one is an icon of 152 width and height (non related).
2. Is an style property (as well, not related).
3. And 3° one is the winner, is this specific ui-slidemenu-content item, which has an style property setting it's height property to 152px, i think here lies the issue.

P.D: I've tested with the normal menu and woks very well.

[luchillo17]

After more testing it seems this error was introduced in version 1.1.0, it seems it is a very big change in that component when i look the 1.0.0 and compare to 1.1.0 tag in github.

Since there's just a few places where the ui-slidemenu-content is being changed, my raw guess is in line #L149, maybe it's because is inside ngAfterViewInit hook?.

[luchillo17]

@cagataycivici Tested, indeed changing ngAfterViewInit to ngAfterContentInit solves this issue.

[bogdanvaduva]

Having the same error. I tested twice in 2 different projects.

[luchillo17]

@bogdanvaduva Did you test the same fix i tried?

@cagataycivici Tested in latest version 2.0.3, yet to be fixed.

[bogdanvaduva]

Yes, I tested your fix ( changing ngAfterViewInit to ngAfterContentInit ) and worked. :)

[luchillo17]

@bogdanvaduva That was a fast answer, i was reminded of this issue when i tried updating primeng so i lost the fix made directly in node_modules, since it's such small fix i wonder why it hasn't been fixed, i even took the work to debug it all the way through.

[luchillo17]

@cagataycivici Thanks for tackling this issue, i've seen the commit, tough i don't really understand how it works, you removed the css binding and made the change in style through the native element in the ngAfterViewInit hook, right?

Any insight when will the update with this fix come out? which version?

[cagataycivici]

I've just removed binding and set the height manually instead of Angular doing it. This will be in next week's 4.0.RC2 and 2.0.6.