Onsen error on app start

jcdenton

1 error :
Uncaught (in promise) TypeError: Cannot read property ‘_compileAndLink’ of undefined at Object.window.ons.TabbarElement.rewritables.link

2 error :
Uncaught (in promise) TypeError: Cannot read property ‘_link’ of undefined

0_1476817774842_Screen Shot 2016-10-18 at 22.06.32.png

Starting page is defined like this:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"><!-- default-src 'self' gap://ready -->
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/font_awesome/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/ionicons/css/ionicons.min.css">
        <link rel="stylesheet" type="text/css" href="css/material-design-iconic-font/css/material-design-iconic-font.min.css">
        <link rel="stylesheet" type="text/css" href="css/onsenui.css"/>
        <link rel="stylesheet" href="css/onsen-css-components-dark-theme.css">
        <link rel="stylesheet" href="css/app.css"/>
        <title>Title</title>
    </head>
    <body>

    <ons-page>
        <!--<ons-toolbar>{{}}</ons-toolbar>-->
        <ons-tabbar position="auto" animation="slide">
            <ons-tab page="templates/live.html" icon="ion-university, material:md-graduation-cap" label="Page1" active></ons-tab>
            <ons-tab page="templates/program.html" icon="ion-ios-calendar, material:md-calendar" label="Page2"></ons-tab>
            <ons-tab page="templates/social.html" icon="ion-share, material:md-share" label="Page3"></ons-tab>
        </ons-tabbar>
    </ons-page>

        <script type="text/javascript" src="js/onsenui.min.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-onsenui.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
		<script src="js/app.js"></script>
		<script src="js/appServices.js"></script>
    </body>
</html>

each page (tab-item) is in a different html file.

Why Onsen throws these errors?

Thanks in advance

Yudhi Darmawan

@jcdenton Possibly you missing to add ons.bootstrap(); in your javascript.

munsterlander

@jcdenton Place all your scripts in between the head tags. You are loading Onsen after you have loaded your html so it hasn’t been initialized and thus can’t find your components and generates a null / undefined error.

Edit: Take a look at these files as well. https://github.com/munsterlander/Onsen-Examples/tree/master/Into-to-Onsen

jcdenton

@munsterlander , @Yudhi-Darmawan
Thanks for the response.

Actually in all my projects I load Onsen and the rest of .js files at the end with no issues at all.
The issues appeared after updating Onsen to latest versions but I managed to fix it without moving the declaration of the js files, but by changing how I organized Onsen components in my html files ( split and separate them in files).

The errors were appearing only when I was using the tabbar component.

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.

Onsen error on app start