onsenui.min.js:2 Uncaught Error: [Onsen UI] Page template not found: home.html
-
Hello,
I’m following the Onsen UI tutorial page and I’m stuck at the “Multiple Files” section. https://onsen.io/v2/guide/tutorial.html#multiple-files
I followed the tutorial and moved my <ons-page>home</ons-page> content to home.html, and removed the template inside my index.html, but I get onsenui.min.js:2 Uncaught Error: [Onsen UI] Page template not found: home.html
Here’s my code:
Index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>practice</title> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> </head> <body> <ons-navigator id="navigator"> <ons-page> <div style="text-align: center; margin-top: 200px"> <p> <ons-input id="username" placeholder="Username" modifier="underbar"></ons-input> </p> <p> <ons-input id="password" placeholder="Password" type="password" modifier="underbar" > </ons-input> </p> <p> <ons-button onclick="login()">Sign in</ons-button> </p> </div> </ons-page> </ons-navigator> <script> const login = () => { const username = document.querySelector('#username').value; const password = document.querySelector('#password').value; if (username === 'user' && password === 'pass') { // call the navigator to move to the new page const navigator = document.querySelector('#navigator'); navigator.resetToPage('home.html'); } else { ons.notification.alert('Wrong username/password combination'); } } </script> </body> </html>
My home.html
<ons-page id="home"> Hello! </ons-page>
What could be the issue? Thank you!