Onsen error on app start



  • 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



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



  • @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



  • @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.


Log in to reply