Monaca Onsen UI Discord Chat Github Repo

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!