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!