Expected Runtime Error due to invalid expression in a template is not displayed/lost

[ryaa]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

No error message on UI or in console however the app is broken and not functional

Expected behavior:

Should get Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'test' of undefined

Steps to reproduce:

1. create new starter application using ionic cli command
   ionic start Ionic2FirstApp blank --v2
2. in the app created change package.json to have ionic version 3.1.0 (as described here https://github.com/driftyco/ionic/releases/tag/v3.1.0). See attached file package.json.txt
3. change home.html and home.ts files located in src/pages/home to be as in the attached files
   home.ts.txt
   home.html.txt
   Note that in home.html template there is invalid expression {{ test.test }}

Note that after the app is transpiled and rendered there is neither error displayed not error messages in the console. If you either:

1. move list initialization code from ionViewDidEnter to constructor everything works as expected and you get the Runtime Error.
2. move invalid expression {{ test.test }} outside of *ngFor everything works as expected and you get the Runtime Error.

Note that the problem occurs ONLY when the list is initialized in ionViewDidLoad or ionViewDidEnter and the invalid expression is inside *ngFor loop

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 7.0.1
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.3.2 Build version 8E2002

[danielsogl]

Can you upgrade your app to Ionic 3.3.0 and test it again?

And also don't forget to post your ionic info output

[AmitMY]

Life-cycle events errors are catched by the nav controller and are not propagated, and as such, every error that initiates from the lifecycle event might be "lost".
I am not sure what is the team's plan for this, I do know we encountered this before.

[ryaa]

Upgrading to 3.3.0 seems to fix this however i did not see any reports for this problem or fixes. So I'm not really sure if this is fixed and won't appear in other, similar scenarios.

P.S. I lost about an hour to fix a typo in one of my templates since the error was silently suppressed :(

[ryaa]

@AmitMY Why is this considered to be a life-cycle event error? The error is in the template

[AmitMY]

3.3.0 fixes it here, correct, my bad.

It is considered to be a lifecycle event (I think) because it initiated from the nav controller, so when the error stack trace should present, it would say:

• there is an error in template ___ in line ___
• because angular change cycle
• that was called using angular core something
• from this lifecycle method

And in this point, the try/catch would catch it and it won't be handled by the global error handler.

So it is not a life-cycle error per say, but because it initiates from the life cycle event, it is handled as such.

Short discussion on "why" - #10974

[ryaa]

@AmitMY Thank you very much for the detailed explanation.

Another question - why do I get the runtime error as expected when the invalid expression is moved outside of *ngFor and the list is still populated inside the life cycle event? But not getting this when the invalid expression is inside *ngFor loop?

I assume, based on your details above, I should not be getting this runtime error as long as the list is populated inside ionViewDidLoad or ionViewDidEnter. But this is not the case, it gets suppressed only when inside *ngFor loop.

Thanks again

[AmitMY]

Hmm.. I am not totally sure, as I will need an example to verify, but if you mean like having {{something.something}} outside the loop, and the same inside the loop, the one outside will happen on the first change cycle, which I can only assume happen before the DidLoad (as DidLoad should fire after the view loaded), so an error will be thrown and catched by the error handler.

However, having it in ngFor (or even in ngIf), for example <div *ngIf="something !== null">{{something.something.something}}</div>, if something is initiated to null, and then in a lifecycle event you will do something = {}, the angular change detection will fire, and only now the error will be shown. (as ngIf prohibited angular from looking inside there before and evaluating expressions).

Glad to help

[AmitMY]

@jgw96 can be closed

[jgw96]

Thanks for handling this @AmitMY 😃

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.