While playing with Ionic Framework v3 I came across few errors/problems which I would like to describe here.
ion-app did not match eny elements
Exact error message is:
ERROR Error: The selector "ion-app" did not match any elements
Unhandled Promise rejection: The selector "ion-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "ion-app" did not match any elements
For me this wasn't descriptive enough to troubleshoot the issue instantly, but after spending some time debugging and rewriting my App I find out that this error means:
Application can't find
<ion-app></ion-app> inside this template. That is why Ionic is not rendered/bootstraped.
Here is my case
My initial (buggy)
<!DOCTYPE html> <html> <head> <title>Todos</title> </head> <body> <ion-app></ion-app> </body> </html>
It turns out that wrapping Ionic template with:
was a terrible idea.
In my case it was just removing
<html></html> tags which wraps entire app template. So after modification
main.html file looks as follows:
<head> <title>Todos</title> </head> <body> <ion-app></ion-app> </body>
Easy? Very easy if know what's going on...
Auto opening new browser tab on every Ionic App start
That one drives me crazy. While it is fine for first run to pop-up a new tab with a developed App it doesn't make any sense in a long run. App restarts are required from time to time and auto-opening new tab becomes very annoying.
Quick and easy if you know where to look for it. Head to the package.json file, find
"scripts" section and replace:
"ionic:serve": "ionic-app-scripts serve"
"ionic:serve": "ionic-app-scripts serve --nobrowser"
Now you may restart your App server as many times as you want without worrying about opening new browser tab on each start.