angular2-onsenui-kitchensink not working



  • Hello,

    the example at https://github.com/OnsenUI/angular2-onsenui-kitchensink does not work for me. After a npm start I get the following errors:

    ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/animations/animations.ts:45:20 
    Property 'pushPage' does not exist on type 'OnsNavigator'.
    
    ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/animations/animations.ts:46:37 
    Property 'popPage' does not exist on type 'OnsNavigator'.
    
    ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/home/home.ts:27:20 
    Property 'pushPage' does not exist on type 'OnsNavigator'.
    
    ERROR in [default] /home/toni/angular2-onsenui-kitchensink/src/app/components/tabbar/tabbar.ts:23:20 
    Cannot find name 'ons'.
    

    I already replaced the pushComponent to pushPage but it does not helped. Does anyone have a working demo project for Onsen UI 2 and AngularJS2?

    My tabbar.ts:

    import {Component} from '@angular/core';
    import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
    
    
    @Component({
      selector: 'tabbar',
      providers: [],
      pipes: [],
      directives: [ROUTER_DIRECTIVES],
      templateUrl: 'app/components/tabbar/tabbar.html',
      styleUrls: ['app/components/tabbar/tabbar.css'],
    })
    export class Tabbar {
      tabs: Array<any>;
      material: boolean;
    
      constructor() {
        this.tabs = [
          { path: '/home',       label: 'Home',       },
          { path: '/forms',      label: 'Forms',      },
          { path: '/dialogs',    label: 'Dialogs',    },
          { path: '/animations', label: 'Animations', },
        ];
        this.material = ons.platform.isAndroid(); // Error
      }
    
      updateStyle(platform: string) {
        this.material = platform === 'android';
      }
    
    }
    

    My animation.ts:

    import {Component, Inject, forwardRef} from '@angular/core';
    import {ONS_DIRECTIVES, OnsNavigator} from 'angular2-onsenui';
    
    @Component({
      selector: 'ons-page',
      template: `
        <div class="waiting">Please wait...</div>
       `,
      styles: [`
        .waiting {
          text-align: center;
          font-size: 24px;
          margin: 100px auto 0;
        }
      `],
      providers: [],
      directives: [ONS_DIRECTIVES],
      pipes: []
    })
    export class TempPage {
      animations = ['none', 'fade', 'slide', 'lift'];
    
      constructor(@Inject(forwardRef(() => OnsNavigator)) private _navigator : OnsNavigator) {
      }
    
      ngOnInit() {
    
      }
    }
    
    @Component({
      selector: 'animations',
      templateUrl: 'app/components/animations/animations.html',
      providers: [],
      directives: [ONS_DIRECTIVES],
      pipes: []
    })
    export class Animations {
      animations = ['none', 'fade', 'slide', 'lift'];
    
      constructor(@Inject(forwardRef(() => OnsNavigator)) private _navigator : OnsNavigator) {
      }
    
      push(animation) {
        this._navigator.pushPage(TempPage, { animation });
        setTimeout(() => this._navigator.popPage(), 1500);
      }
    
      ngOnInit() {
    
      }
    }
    

    Thank you in advance!


  • Onsen UI

    @Viatorus The kitchen sink wasn’t updated yet to the latest Angular 2 version I think. It will be updated soon probably. The other templates are updated and working (the ones in Monaca CLI). We are adding samples to the interactive tutorial app right now as well.



  • @Fran-Diox Thank you for your answer. The github repository is now up to date. Thank you for your fast revision. :)



  • @Fran-Diox yes…can you give us simple app in github using angular 2, most of tutorial in documentation using reactjs. thank you very much


  • Onsen UI

    @lapisanlangit As it was already mentioned, the kitchen sink is already updated. And it’s on Github.

    most of tutorial in documentation using reactjs

    I think the tutorial app has exactly the same examples in React and in Angular 2.


Log in to reply