Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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!