{"id":1958,"date":"2017-04-25T18:52:09","date_gmt":"2017-04-25T18:52:09","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1958"},"modified":"2018-10-10T17:15:57","modified_gmt":"2018-10-10T17:15:57","slug":"ionic-v2starter-app-creation-and-folder-structure-issues","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1958","title":{"rendered":"Ionic V2&ndash;starter app creation, folder structure, and menu toggle issues"},"content":{"rendered":"<p>A new Ionic 2 application should be created via ionic-cli as follows:-<\/p>\n<blockquote><p>ionic start my-new-app tabs &#8211;v2<\/p><\/blockquote>\n<p>Note that the v2 switch is mandatory, as without it (and running ionic 2.2.1) I got a different folder structure which did not put the application code under a top level src\/ directory \u2013 whilst <a href=\"https:\/\/ionicframework.com\/docs\/intro\/tutorial\/\">this tutorial<\/a> does not mention the switch, it is mentioned <a href=\"http:\/\/ionicframework.com\/docs\/cli\/start\/\">here<\/a>.<\/p>\n<p>Note also that the tabs keyword is an app template which creates a tabbed app. There are other choices as noted <a href=\"https:\/\/ionicframework.com\/docs\/intro\/tutorial\/\">here<\/a> .<\/p>\n<p><strong><em>The super starter template is noteworthy<\/em><\/strong> as it has simple examples of master\/detail lists, searching, and simple forms. I tried this and had some issues getting it working but there is a fixed version which worked. I have documented this <a href=\"http:\/\/salientsoft.co.uk\/?p=1961\">here<\/a>.<\/p>\n<p>Note also that this post <a href=\"http:\/\/ionicframework.com\/docs\/cli\/\">here<\/a> mentions using an earlier version of node (4.x) to avoid a number of issues. I have not tried that, as the current node version I have installed as I type is v7.5.0, which makes 4.x a pretty old version.<\/p>\n<p>I may try the older one though, to see if the issues I hit with the menu toggle on the Nav bar menu might be solved. The issue I have hit is that the menu icon on the nav bar intermittently does not open the side menu. Typically clicking the same tab icon again or visiting another tab makes it work, such that it alternately fails and works. No solution has yet been found for this and I could not find any reference to it online.<\/p>\n<p>Note that the default generated folder structure for &#8212;\u00a0\u00a0 v2 creates an app directory under \/src, which is used for core app configuration stuff. I did attempt (mistakenly I now feel) putting the component and service layers under <em>\/src\/app<\/em>, but have now reverted that. Whilst this worked, when I then tried to move (with a webstorm refactor) <em>\/src\/pages\/<\/em> to <em>\/src\/app\/pages\/<\/em> I hit numerous issues with\u00a0 template errors\/ html files not found when running<em> ionic serve<\/em>. I checked all the import and related configuration, and whilst some was incorrect, I eventually went through and corrected every .ts file individually and still had issues. <em><strong>This appears to be an issue \u2013 moving the \/src\/pages\/ directory (for an app with the tabs template, as per the above ionic command) appears to break some hidden configuration that I could not find.<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A new Ionic 2 application should be created via ionic-cli as follows:- ionic start my-new-app tabs &#8211;v2 Note that the v2 switch is mandatory, as without it (and running ionic 2.2.1) I got a different folder structure which did not put the application code under a top level src\/ directory \u2013 whilst this tutorial does [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[200],"tags":[199,13,40,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1958"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1958"}],"version-history":[{"count":5,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1958\/revisions"}],"predecessor-version":[{"id":2171,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1958\/revisions\/2171"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}