Ionic-native: what is the different between ionic-framework and ionic-angular and ionic-native

[JosephMendez]

[ihadeed]

ionic-native package is Ionic Native, which is a set of wrappers that makes it using Cordova plugins more convenient in any application (doesn't have to necessarily be based on Ionic or TypeScript)

and AFAIK ionic-framework is the old package name for the Ionic Framework. The new package that includes Ionic 2 and Angular 2 is referred to as ionic-angular

[JosephMendez]

hi Ihaded,

i am trying to add a side menu using the tab starter template, but the tabs are not clickable.
I don't know also why i see this error in the console saying

466043 error Uncaught ReferenceError: ionic is not defined, http://localhost:8100/?ionicplatform=ios, Line: 88

Here's my app.html

<ion-menu [content]="content"><ion-toolbar> <ion-title>Pages</ion-title></ion-toolbar> <ion-content><ion-list><button menuClose ion-item *ngFor="#p of pages" (click)="openPage(p)">{{p.title}}</button> </ion-list></ion-content></ion-menu><ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>


My app.ts

`
import 'es6-shim';
import {App, Platform, IonicApp} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {ListPage} from './pages/list/list';
import {GridPage} from './pages/grid/grid';
import {Type} from 'angular2/core';

@App({
templateUrl:'build/app.html',
config: {
tabbarPlacement: 'bottom'
}
})
export class MyApp {
rootPage: any = TabsPage;
pages: Array<{title: string, component: Type}>

constructor(private platform: Platform, private app: IonicApp) {

 this.initializeApp();  

 this.pages = [
        { title: 'Tabs', component: TabsPage },
        { title: 'List', component: ListPage },
        { title: 'Grid Icons', component: GridPage }
    ];

}

initializeApp() {

   this.platform.ready().then(() => {
        StatusBar.styleDefault();
   });

}
openPage(page) {
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
`

thank you.

[ihadeed]

Ensure that ionic-angular package is present in your node_modules directory. If it is not there, run the following command in your project root directory npm install

If that wasn't the issue, please provide me with the steps you took to create the Ionic 2 project.

Usually you would need to update your ionic CLI To latest Beta version by running npm install -g ionic@beta, then run the following command to create a new project: ionic start MyAppName --v2 --ts

[JosephMendez]

but then i still have issues on the tabs. is not clickable now. i added a menu.

[ihadeed]

The function openPage() is defined in MyApp component. Meaning that only app.html can access that method. Your tabs must be located in that html template and they should be calling the openPage() function.

If you are still having trouble please provide me with a compressed version of the app folder so I can have a look at it.

[keithdmoore]

This is really the wrong place to address app issues that are not directly related to ionic-native. I would suggest that you search through the ionic forum and then post a question if you don't find what you are looking for. Be sure to filter on v2 tag

[JosephMendez]

app.zip

here's my app file.

[JosephMendez]

@keithdmoore sorry i am new to ionic. and to this forum. my bad.

[ihadeed]

@JosephMendez Sorry I can't seem to find any problem with the code.

I would advice you to update your CLI and recreate the project with the command above.

If you experience any more issues please report it on the forums and you should be able to resolve your issue shortly.

https://forum.ionicframework.com/

[JosephMendez]

@ihadeed Thank you very much.