Ionic Framework 3 - troubleshooting
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 elementsor/and:
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 elementsFor 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> DOM element, so there is probably some issue with "root/main" template and Javascript interpreter/compiler 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) main.html template:
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
</head>
<body>
<ion-app></ion-app>
</body>
</html>It turns out that wrapping Ionic template with:
<html></html>was a terrible idea.
Solution
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.
Solution
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"with:
"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.