onsenui.min.js:2 Uncaught Error: [Onsen UI] Page template not found: home.html

Metalbearsolid

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!