ionic-team/ionic-starter-super

The Ionic 2 Super Starter 🎮

👉 This starter repo has moved to the ionic-team/starters repo! 👈

ionic-starter-super's Issues

Runtime Error Cannot find module "ionic-native"

It seems that the starter build failed,when I run ionic serve the following error occured

Runtime Error
Cannot find module "ionic-native"
Stack
Error: Cannot find module "ionic-native"
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at Object.<anonymous> (http://localhost:8100/build/main.js:108352:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:82204:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:120594:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at http://localhost:8100/build/main.js:66:18
    at http://localhost:8100/build/main.js:69:10

Ionic Framework: 3.0.1 Ionic App Scripts: 1.3.0 Angular Core: 4.0.0 Angular Compiler CLI: 4.0.0 Node: 6.10.1 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Unable to serve super app

From @turaleck on April 4, 2017 2:14

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I am unable to serve an app created with the super flag. This is what I see in the browser:

Runtime Error: Unable to find module "ionic-native"
v@http://localhost:8100/build/polyfills.js:3:4862 @http://localhost:8100/build/main.js:116830:7 webpack_require@http://localhost:8100/build/main.js:20:12 @http://localhost:8100/build/main.js:102085:73 webpack_require@http://localhost:8100/build/main.js:20:12 @http://localhost:8100/build/main.js:128721:70 webpack_require@http://localhost:8100/build/main.js:20:12 @http://localhost:8100/build/main.js:66:18 @http://localhost:8100/build/main.js:1:11

Ionic Framework: 2.3.0
Ionic App Scripts 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 7.8.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0

I believe this is a similar problem, but the resolution therein did not fix my issue.
This is what I did:

1. Deleted the app
2. npm --save @ionic-native/core@alpha -g
3. Recreated the app

Expected behavior:
I was expecting to see more than 14 ready to use page designs

Steps to reproduce:

1. ionic start myApp super --v2
2. cd myApp
3. ionic lab

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.8.0
Xcode version: Not installed

Copied from original issue: ionic-team/ionic-framework#11038

Got errors when start a project with this template.

The version of ionic is 2.2.1,
The version of npm is 4.0.5

When executing "ionic start superapp super --v2 -i",I got following errors:

Creating an Ionic 2.x app in /Users/xyqu/RD/mygithub/superapp based on the super template.

Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
Downloading: https://github.com/driftyco/ionic-starter-super/archive/master.zip
Installing npm packages (may take a minute or two)...
Error updating config.xml file: TypeError: packageName.replace is not a function
at /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/start.js:869:10
at Parser. (/usr/local/lib/node_modules/ionic/node_modules/xml2js/lib/xml2js.js:484:18)
at emitOne (events.js:96:13)
at Parser.emit (events.js:188:7)
at Object.onclosetag (/usr/local/lib/node_modules/ionic/node_modules/xml2js/lib/xml2js.js:445:26)
at emit (/usr/local/lib/node_modules/ionic/node_modules/sax/lib/sax.js:640:35)
at emitNode (/usr/local/lib/node_modules/ionic/node_modules/sax/lib/sax.js:645:5)
at closeTag (/usr/local/lib/node_modules/ionic/node_modules/sax/lib/sax.js:905:7)
at Object.write (/usr/local/lib/node_modules/ionic/node_modules/sax/lib/sax.js:1449:13)
at Parser.exports.Parser.Parser.parseString (/usr/local/lib/node_modules/ionic/node_modules/xml2js/lib/xml2js.js:503:31)

Small fixes for default text and text without translation

Some parts of static text in page files are not translated. For example welcome.html contains "The starting point for your next great Ionic app" that is not added to translate files at all.
Search.html contains ion-searchbar. If placeholder is not defined then English text "Search" is displayed. There are few more places where the text should be translated.
If you agree I can submit pull request to change static text where required and add it to en.json? Others can use this to update the rest of language files accordingly.

deviceready did not fire within 2000ms

Running android native, it takes too long between a white screen and the app (after the splashscreen):

Native: deviceready did not fire within 2000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.

Using with Ioinc Cloud Auth

Following the documentation provided I am getting error:
VM132 main.js:57014 TypeError: platform.toLowerCase is not a function at Insights.normalizeDevicePlatform (http://localhost:8100/build/main.js:64708:25) at Insights.markActive (http://localhost:8100/build/main.js:64698:33) at Insights.checkActivity (http://localhost:8100/build/main.js:64687:22) at http://localhost:8100/build/main.js:64663:27 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723) at Object.onInvokeTask (http://localhost:8100/build/main.js:37967:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659) at e.runTask (http://localhost:8100/build/polyfills.js:3:7083) at invoke (http://localhost:8100/build/polyfills.js:3:10836) at e.args.(anonymous function) (http://localhost:8100/build/polyfills.js:2:30123)

`import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { Auth, User } from '@ionic/cloud-angular';
import { TranslateService } from 'ng2-translate/ng2-translate';

import { MainPage } from '../../pages/pages';
// import { User } from '../../providers/user';

@component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
// The account fields for the login form.
// If you're using the username field with or without email, make
// sure to add it to the type
account: {email: string, password: string} = {
email: '[email protected]',
password: 'test'
};

// Our translated text strings
private loginErrorString: string;

constructor(public navCtrl: NavController,
public user: User,
public toastCtrl: ToastController,
public translateService: TranslateService) {

this.translateService.get('LOGIN_ERROR').subscribe((value) => {
  this.loginErrorString = value;
})

}

// Attempt to login in through our User service
doLogin() {
this.navCtrl.push(MainPage);
// this.user.login(this.account).subscribe((resp) => {
// this.navCtrl.push(MainPage);
// }, (err) => {
// this.navCtrl.push(MainPage);
// // Unable to log in
// let toast = this.toastCtrl.create({
// message: this.loginErrorString,
// duration: 3000,
// position: 'top'
// });
// toast.present();
// });
}
}
`

Super template not compatible with ionic-native 3+

From @05bca054 on March 25, 2017 9:8

Hello,

I have tried many times to work with ionic but i think super template from ionic is not quite working with ionic-naitve V3+.

Yet i tried to fix several errors(Which causes ionic-native to run) but now i stuck with weird error(No modification made to template pages) which says

Runtime Error
Error in :0:0 caused by: No provider for SplashScreen!

Error: DI Error
at v (http://localhost:8100/build/polyfills.js:3:4864)
at NoProviderError.BaseError [as constructor] (http://localhost:8100/build/main.js:35764:27)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/main.js:76992:16)
at new NoProviderError (http://localhost:8100/build/main.js:77054:16)
at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/main.js:112940:19)
at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/main.js:112979:25)
at ReflectiveInjector.getByKey (http://localhost:8100/build/main.js:112911:25)
at ReflectiveInjector.get (http://localhost:8100/build/main.js:112780:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:77928:52)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:8100/build/main.js:113715:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:8100/build/main.js:114143:49)
at ElementInjector.get (http://localhost:8100/build/main.js:113219:27)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:8100/build/main.js:113715:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:8100/build/main.js:114143:49)
at CompiledTemplate.proxyViewClass.View_MyApp_Host0.createInternal (/AppModule/MyApp/host.ngfactory.js:15:255)

-Naitik

Copied from original issue: danielsogl/awesome-cordova-plugins#1253

Update tutorial template

I tried this super starter and saw that on tutorial page there is a header with no-shadow attribute. Maybe you wanted to use no-border cause the change on RC4.

Renamed the no-shadow attribute for Material Design header, footer, and tabs to no-border. This is the same attribute used by iOS mode.

I open an issue cause i think doing a PR with this change its unnecessary.

Thanks for this starter 👍

ngx-translate json file has new format

Here: https://embed.plnkr.co/01UjWY3TKfP6pgwXKuEa/
is a working example

Here is my local test:

The new json file format allows organization by page category and looks like this:

{
    "HOME": {
      "HOME": "استهلال"
    },
    "LEARN": {
      "LEARN": "AR LEARN"
    },
    "CONTACT": {
      "CONTACT": "اتصال",
      "FOLLOW_US_TW": "تابعونا على تويتر"
    },
    "SETTINGS": {
      "TITLE": "AR Settings",
      "SELECT_LANGUAGE": "اختر لغتك",
      "LANGUAGES": "اللغات",
      "CANCEL": "إلغاء",
      "MYCOM": "AR {{ myCom }}",
      "MYAPP": "AR {{ myApp }}",
      "HI": "مرحبا {{ name }}"
    },
    "TABS": {
      "TABS": "AR TABS",
      "HOME": "استهلال",
      "LEARN": "AR LEARN",
      "CONTACT": "اتصال"
    },
    "TESTING": {
      "TESTING": "AR TESTING"
    },
    "THEMES": {
      "THEMES": "AR THEMES"
    },    
    "MENU": {
      "MENU": "AR MENU"
    }
}

It is called like this:

<ion-header>
  <ion-navbar color="secondary">
    <button ion-button menuToggle> 
      <ion-icon name="menu"></ion-icon> 
    </button>
    <ion-title>{{ 'SETTINGS.TITLE' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list no-lines>
    <ion-item>
      <ion-label>
        {{ 'SETTINGS.SELECT_LANGUAGE' | translate }}
      </ion-label>
      <ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()' [cancelText]="'CANCEL' | translate">
        <ion-option *ngFor="let item of languages" [value]="item.code">{{ item.name }}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

This will affect #95 and other related issues.

How do I call the translation form in ionic-super from the app?
I can then have a go at formatting a translation file to see if it works
and update the PR.

request: websocket implementation

feature request:
It would be interesting to see a ready-made pages for a real-time data implementation using websockets (or whatever socket wrapper library would make most sense).

Suggestion: Implement automatic form validation messages

Speaking of form validation, I was (am) a fan of angular-auto-validate (https://github.com/jonsamwell/angular-auto-validate) on AngularJs and Ionic v1.

I believe that would be a plus for the Super template.

If you are in favor of this approach, an implementation can be found in https://coryrylan.com/blog/angular-2-form-builder-and-validation-management, which also provides a quite easy way to implement custom validation methods.

Also, message customization / translation can be directly plugged in root component.

I found another implementation for custom validators (without the error message rendering) in http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html, but I haven't tested it.

Can't bind to 'options' since it isn't a known property of 'ion-slides'.

I just created a new ionic project using this starter. I started off with the fixes provided in #84 otherwise I couldn't even compile. Now I am receiving this error.

It seems that it is due to src/pages/tutorial/tutorial.html:

  ...
  <ion-slides [options]="{pager: true}" (ionWillChange)="onSlideChangeStart($event)">
  ...

I think [options] is not a property of ion-slides, instead it should be:

  ...
  <ion-slides pager (ionWillChange)="onSlideChangeStart($event)">
  ...

This worked for me and it seems to be documented this way in ionic docs.

Suggestion: Update Readme

There's a recurring question on how to use the Super Starter, I believe it's a good thing to add to the readme.

Suggestion: Detect language to use in translation

I believe we should detect the device (browser) language, and use it with ng2-translate.

We should also provide the supported language list, and fallback to English if the detected language is not included in that list.

Should I submit a PR?

Wait for the next Ionic CLI release to use this template by running `ionic start mySuperApp super`

@danielsogl
From here: 43d6d53

Please specify the version and expected release date.

Runtime Error if clicked directly on settings icon

On first ionic serve if i click directly on settings icon it produces following error.

Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'option1' of undefined TypeError: Cannot read property 'option1' of undefined at SettingsPage._buildForm 
(http://localhost:8100/build/main.js:38413:35) at http://localhost:8100/build/main.js:38444:19 at t.invoke (http://localhost:8100/build/polyfills.js:3:9094) at Object.onInvoke
 (http://localhost:8100/build/main.js:35915:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:9045) at e.run (http://localhost:8100/build/polyfills.js:3:6481) at 
http://localhost:8100/build/polyfills.js:3:4583 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723) at Object.onInvokeTask 
(http://localhost:8100/build/main.js:35906:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)

if i close that error it works fine.

Screen shot of error

Missing ionic-native

When creating a new project, the ionic CLI created the package.json with the new ionic-native code (@ionic-native/xxxx), but the code from the super starter still uses IMPORT {} FROM 'ionic-native' and causes issues during run time.

Replace image item

Hello everyone,

congratulations for this template, it's great!!

I have found a bug at Item Create Page (/src/pages/item-create/item-create.ts). If you add a image and then you want change it press over the picture again. You get the runtime error:

Cannot read property 'removeChild' of null

Why remove the file input in processWebImage() method?

Thanks,

any advice about how to enable menu from tutorial component?

sorry, it's silly question, but I am new to Ionic, thanks
it could draw out menu from many other components, like Welcome, Search, etc,
Tried to add menuToggle directive in Tutorial component, menu icon shows in navbar, it doesn't draw out menu as well.

Question about Settings provider

Hi, what is the proper way to access the settings from other component?

I've put this in my component provider:

import { Settings } from './settings';

@Injectable()
export class Affiliates {
  constructor(public http: Http, private settings: Settings) { }

  getApiUrlByTag(tagId) {
    return this.settings.load()
      .then(() => {
        return this.settings.getValue('option2') + tagId;
      });
  }
}

Also I had to change the getValue method in Settings provider to this:

getValue(key: string) {
  // return this.storage.get(key);
  return this.settings[key];
}

The app works and I can get the setting parameters correctly, but I'm not sure it's the best way.

Thanks and sorry for the newbie question

Add google analytics support

The starter pages should show case how to add google analytics support. This is a common extension such as translate. This would ease the initial setup and problems regularly found with this plugin.

Question: How do I run this project?

I'm just getting into learning ionic 2 and found this repo interesting. However, I can't figure out how to run this project. I've read all the README.md files but couldn't find any instructions there. Some help would be appreciated.

App breaks at "New Item -> Add Photo"

Hi,

i started an App today via ionic start myApp super --v2 and deployed it to my Smartphone, a RedMi 3s.

When i try to add a new Item and click onto Add Image, i get to choose different ways.
If i choose one of the pictures out of my Gallery, the App shuts down.

Missing share operator import in user.ts provider

src/providers/user.ts

Missing:

import 'rxjs/add/operator/share';

Excellent idea!! Thanks for all :)

Hi Ionic Team!

Thanks for your hard work! Thanks for helping the developers to create good hybrid apps! And thanks for this excellent initiative for the community!! A good starter is the most important! 👍

PD: I love the logo! We need to improve the README! 💯 I want to be a contributor if you want :)

Best regards, Nicholls

Debug is not supported on android device

When the app is built and deployed on the android device using ionic run android debugging is not available. Please note that source map and debugging works fine in the browser. I also upgraded ionic-app-scripts to the latest version 0.0.48 but it did not helped

Request: tests and testing infrastructure

It would be interesting to see included an already setup (npm dependencies, scripts, etc) testing infrastructure with the proposed tools, and tests (e2e, unit, etc) for the implemented code, using best practices, and as such showcasing how to continue on with our tests the same way the ionic team does, aiming for production quality.

I love what you are doing with the super-starter and the efforts you invest in helping us use this awesome framework to it's full potential and as easily as possible. I think what I described would be a great addition to complete the development package (and help apps using your framework be of best quality in front of the public).

Maintaining sync with ionic-super-starter as my own app develops

When I install super-starter via ionic cli, I lose the connection to this repo that I would have if I cloned it.

It's great to have a good kickstart ionic project, but then ionic-native comes along, ionic 3, etc and to use this as my starter I need it to keep up to date with developments AND be able to merge the changes into my own app.

Camera - Add Image Not Working

Hi Ionic Team!

There's an issue in item-create.ts when you try to add an image on Android via the camera. The profilePic remains blank. I've discovered the reason and wanted to share (perhaps you might want to do further testing, but it appears to work). Add destinationType to the Camera options as follows:

      Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 96,
        targetHeight: 96
      })

Thanks for a great starter template :)

Frank.

ngc build fails with outsourced declarations/entryComponents in app.module.ts

I've tried to adapt the neat declarations/entryComponents method used in app.module.ts of the app branch. I don't run builds often enough and as this works in ionic serve (dev) mode but it fails during ngc compilation, I just wanted to drop it here as a reminder:

> ionic-hello-world@ ionic:build /home/chrono/src/ionic-starter-super
> ionic-app-scripts build

[09:34:46]  ionic-app-scripts 0.0.44 
[09:34:46]  build prod started ... 
[09:34:46]  clean started ... 
[09:34:46]  clean finished in 8 ms 
[09:34:46]  copy started ... 
[09:34:46]  ngc started ... 
[09:34:46]  copy finished in 59 ms 
[09:34:49]  Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider 
            replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in 
            /home/chrono/src/ionic-starter-super/.tmp/app/app.module.ts, resolving symbol AppModule in 
            /home/chrono/src/ionic-starter-super/.tmp/app/app.module.ts 
[09:34:49]  ngc failed 
[09:34:49]  ionic-app-script task: "build" 
[09:34:49]  Error: Error 

How do I test this template ?

Hello,

after running npm install I got two errors :
`
├── UNMET PEER DEPENDENCY @angular/core@^2.0.0

├── UNMET PEER DEPENDENCY @angular/http@^2.0.0
`

then ionic serve

Couldn't find ionic.config.json file. Are you in an Ionic project?

How am I supposed to test this project ?

Cannot find module "ionic-native"

I just installed latest ionic version and wanted to take a look at the super starter, however this fails with the error cannot find module ionic native. What am I doing wrong?

ionic start ionic-super super  --v2
cd ionic-super/
ionic serve

In the web browser the following error shows up:

Runtime Error
Cannot find module "ionic-native"
Stack
Error: Cannot find module "ionic-native"
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at Object.<anonymous> (http://localhost:8100/build/main.js:108352:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:82204:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:120594:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at http://localhost:8100/build/main.js:66:18
    at http://localhost:8100/build/main.js:69:10
Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 6.9.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Ionic native is in the package.json and seems to be installed though

ionic emulate starts the iphone emulator but the screen stays blank.

Add license

The project does not have a license, therefore the code cannot be reused. Can the owners add a license file, please?

Runtime error from update to Storage 2.0.0

as of the ionic 2.2.0 release, running

ionic start myapp super --v2

and then serving it gets you a runtime error off the bat.
From https://github.com/driftyco/ionic-storage/releases/tag/v2.0.0
Update Steps:

1. Run npm install @ionic/[email protected] --save --save-exact
2. Remove Storage from your providers in app.module.ts
3. import { IonicStorageModule } from '@ionic/storage' instead of import { IonicStorage } from '@ionic/storage' in app.module.ts
4. Add IonicStorageModule.forRoot() to the imports array in app.module.ts

@mlynch this repo has a bunch of pull requests and could use some love too! sorry to nag ;)

Use translation service or limit number of translations

There are now quite a few languages in this project. I feel like maintaining the translations when adding new content will be quite difficult and result in a lot of inconsistencies in the translation files.

So my suggestion would be to either

• use a service like https://weblate.org/en/ to manage the translations
• or limit the number of the translations to english and another language (maybe spanish or german), just to illustrate how the ng2-translate module works

Any thoughts on this?

Bug: Settings Page doesn't display on first run

Settings Provider
Issue
On app first run (or after clearing storage), when rendering Settings Component’s template using allSettings, template can't find options.

Solution
In load() method, on first run, we must return after setAll() promise resolution.

PWA Content

Hi guys,

Include content about PWA into the README please.

Regards, Nicholls

input fields not working

I am testing with the item-create page and whenever I click on any input nothing works.

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.10
Ionic App Lib Version: 2.1.6
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 8.2.1 Build version 8C1002

Suggestion: Questions like Yeoman

I like this sample project a lot but since its reason to exist is to fasten development process and not be a kitchen sink, I believe it should have a question workflow, like Yeoman.

If you don't know that, it's a simple generator for frontend frameworks that ask questions on what you prefer. Some generators ask about what CSS precompiler you wish to use (SASS, Less, etc), what CSS framework (Twitter Bootstrap, Foundation, etc) and many other questions - and then compile everthing you answered into your basic workplace.

It's basically what Ionic does, but with questions to customize it and have a less bloated basis. I believe it could happen in the whole ionic cli, but it would require a lot more discussion, so here should be the best place to test it.

What do you think?

Master detail example

I am wondering if anyone can provide an example of Master detail layout pattern (AKA split pane) that is mentioned in Max's blog post about this template:

Today we are releasing the first test version of the Ionic Super Starter, a starter project for new Ionic 2.x apps that comes with over 14 ready to use page designs for common mobile designs like master detail, login/signup, settings, tutorials, and more.

Here is link to ongoing discussion about this feature:
ionic-team/ionic-framework#6793

WIP: TODOs

• Session/skip for tutorial

template not found

I've this error:
Creating Ionic app in folder /Users/mauro/Documents/Ionic Apps/sp based on super project
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
[=============================] 100% 0.0s
Error with start Error: No starter template named "super"

Some help?
Thanks

Suggestion: Use Google Maps Javascript SDK by default

I think the current implementation of the maps page is a bit confusing.

By default, it will use the JS SDK in the browser, but switch to using the native plugin when on a device. Since they are two totally different things I think this could confuse people who are using this starter as the basis for learning how to implement maps.

In my opinion, the JS SDK should be preferred by default for both the browser and cordova, perhaps with a commented out function to initialise the native maps. I feel like mixing the native SDK with the web view is wrought with issues, and shouldn't be the default.

Any thoughts?

Error with start Error: No starter template named "super"

Hi guys, thanks for the great project,

I think https://github.com/driftyco/ionic-starter-super should be added to http://code.ionicframework.com/content/starter-templates.json for ionic start myapp super --v2 to work as in the latest blog post http://blog.ionic.io/help-us-test-the-super-starter/

keep it up !

how to solve this bug?

Runtime Error
Cannot find module "ionic-native"
Stack
Error: Cannot find module "ionic-native"
at d (http://localhost:8100/build/polyfills.js:3:3991)
at Object. (http://localhost:8100/build/main.js:78513:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:78182:73)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:117596:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
at http://localhost:8100/build/main.js:69:10
Ionic Framework: 3.1.0
Ionic App Scripts: 1.3.5
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.4.0
OS Platform: OS X El Capitan
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWe

Add moment.js

In the cards page add moment.js pipes, it would be great exercise.

ionic serve failed

D:\donghuawork\myapp>ionic serve
Running live reload server: http://192.168.0.84:35729
Watching: www//*, !www/lib//, !www/**/.map
√ Running dev server: http://192.168.0.84:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

您被禁止访问互联网

防火墙或防病毒软件可能已阻止您连接到网络。
请试试以下办法：
检查网络连接
检查防火墙和防病毒配置
运行 Windows 网络诊断
ERR_NETWORK_ACCESS_DENIED

Suggestion: Update ng2-translate to support directives

Version 4.1.0 adds directive support, and version 5.0.0 listens to translation changes as well when using directives.

Can't resolve all parameters for Storage: (?)

I am following the instructions on this page for a cloned super starter project created a few months ago.

Here is the full stack trace:

Runtime Error
Can't resolve all parameters for Storage: (?).
Stack
Error: Can't resolve all parameters for Storage: (?).
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at syntaxError (http://localhost:8100/build/main.js:100139:34)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/main.js:112989:35)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/main.js:112857:26)
    at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/main.js:112843:21)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/main.js:113132:40)
    at http://localhost:8100/build/main.js:113062:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/main.js:113023:19)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:112678:50)
    at JitCompiler._loadModules (http://localhost:8100/build/main.js:123770:64)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/main.js:123729:52)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/main.js:123691:21)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:8100/build/main.js:5064:25)
    at PlatformRef_.bootstrapModule (http://localhost:8100/build/main.js:5050:21)
Ionic Framework: 3.1.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.3.6
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.9.2
OS Platform: OS X Yosemite
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

I was dealing with a runtime error regarding the TranslateHttpLoader.
There is an open issue on their repo.
ng2-translate is Angular 2, ngx-translate is Angular 4+ and Ionic 3+
The name is changed to deal with version break and semver from 5.0.0 to 6.0.1
ng2-translate 5 will fail with npm complaints for the ionic upgrade
Ref: #95 and other items that are related to this.

The last issue there recommends changing the helper function:

return new TranslateStaticLoader(http, './assets/i18n', '.json');

Instead of the static loader we should use this: TranslateHttpLoader
However, this causes a red squiggly with the mouseover:

[ts] Cannot find name 'TranslateHttpLoader'.

Cannot find name 'TranslateService'

After creating the app using:

$ ionic start myapp https://github.com/driftyco/ionic-starter-super --v2

(as $ ionic start myapp super --v2 failed with the message: Error with start Error: No starter template named "super")

Then, running the app, this error shows up in the browser:

Typescript Error
Cannot find name 'TranslateService'.
src/app/app.component.ts
  constructor(translate: TranslateService, platform: Platform, settings: Settings) {
  // Set the default language for translation strings, and the current language.