Monaca Onsen UI Discord Chat Github Repo

Trouble with tutorial - Angular 2

  • I’m having trouble with implementing the “Combining navigator and tabbar”-tutorial. I’ve implemented something that looks exactly like the example, but it’s not possible to switch “active” pages, and the active page(Home) isn’t showing its content either.

    As far as I can see, your example doesn’t run on your tutorial page either.

    Have you done any recent updates?

    We’re also having another problem. When we have been testing we also had a lot of errors of the type “template parse errors”, when it’s an ambiguity which ons-page we are refering to, but how can we make an ons-page unique? We for example get the error when using the “Splitter outside navigator” tutorial.

  • Onsen UI

    @mwaandah The problem in the tutorial app is that those examples were still referencing angular2-onsenui library, which is the old version. They should point to ngx-onsenui correctly now. Looks like they work properly.

  • Thanks for your reply. I’m still having trouble with showing the content of the tabs and change the active tab.

    Mobility component:

        selector: 'app',
        template: "<ons-navigator [page]='homePage'></ons-navigator>"
    export class MobilityComponent {
        homePage = Home;

    Home component:

        selector: 'ons-page',
        templateUrl: "./home.html"
    export class Home {
        explore = Explore;
        global = Global;
        homemylist = HomeMyList;
        constructor() {


    <ons-tabbar position="top">
            <ons-tab label="Explore" [page]="explore" active="true"> </ons-tab>
            <ons-tab label="Global" [page]="global"> </ons-tab>
            <ons-tab label="My List" [page]="homemylist"> </ons-tab>

    Explore component

        selector: 'ons-page', //Tried with ons-page[explore] too.
        template: "<p> hallo </p>"
    export class Explore {
        constructor(private navigator: OnsNavigator) {
            console.log("EXPLORE")   //Doesn't run

  • Seems like the problem is connected to that we used several components and just one module?