Port mobile template to NG2

[sinedied]

In a separate branch, port SK mobile template to Angular 2, using Ionic v2 instead of Bootstrap v4/Font Awesome.

Warning: the build system should still be using angular-cli, not the ionic-cli. The project template/structure should be compatible with the web template (as it should be interchangeable later).

Here are the list of tasks I have in mind, feel free to suggest changes:

• Create the feature branch with generator questions
• Add the Ionic/mobile specific app configuration (onReady...) and base templates (no auth)
• Add authentication templates and make authentication/guard working with Ionic
• Detect device locale/language on startup and setup i18n accordingly using cordova-plugin-globalization
• Create npm scripts for: cordova passthrough (like for angular-cli), prepare, build, run... with Android + iOS support
• Improve the templates with common/recommended plugins: cordova-plugin-splashscreen, cordova-plugin-device, cordova-plugin-whitelist etc
• Add service worker/PWA support => will be in a separate update/issue
• Add generator questions (or use by default?) + configuration for Crosswalk (legacy devices) and WKWebView
• Add platform choice (Android, iOS, ...) with generator questions
• Add cordova usage guide

[FrancoisDF]

Would you expect to see the separation between the mobile templates and the web templates at the templates/src level or at thetemplates/src/app level? or maybe at the component level?

Considering that ionic has its own router system, it would be complicated to share the same app folder also if we start to mix different HTML template part of the solution.

Having a templates/src/web.app/ and a templates/src/mobile.app/ sounds to be the easiest.
We would just probably need to update the templates/src/theme depending on the mobile/web configuration and still using the /assets/, /environments/, /translations/ consistent for all envs.

My only concern will be sharing some core and shared components between mobile and web.
would that be possible to have a shared /app folder that would be merged with both envs? so we could have:

src/
   web.app/
      pages.../
      core/
         authentication/      // ionic has it's own routing system, may something different for ionic
         shell/                      // no need for ionic app
   mobile.app/
      pages.../
   app/
      core/
      shared/
   assets/
   translation/
   ...

I would only share some of the core components between both envs.

Is that something that could work for you?

[sinedied]

I think the best way is to share the maximum possible code between web & mobile app, you can take a look at this generator for angular 1 to see how we've done it, but basically:

• When there's just some lines of code to add/change, add a _ before the file name and then it becomes an EJS template, like this for example

• When the file is completely different (like html templates), use __<prefix>.<filename> like this example. You can even complete this by adding _ before the filename part to also make it an EJS template, ie __<prefix>._<filename>.

• The prefix also works on folders at root levels (instead of mobile.app/ like you said, we use __mobile/) but from the experience we had on our previous generator, it's easier to maintain the difference code base when working at the file level, using the previous point syntax.

A more complete doc about template is coming, as part of #33 😉

The Ionic-specific router is going an issue though 😞 Ionic v1 used ui-router so it was much easier to cover both web and mobile scenarios, and initially they were going to user the new Angular 2 router it seems, but went their own way because Angular team was late on its side reworking the router... The Ionic router is also much more limited currently (no query params support!), so it's going to be issue anyway for app covering both web and mobile using Ionic.

To get started, I think we need to split the job into different tasks to avoid working on the same thing.

EDIT: tasks moved to the first post

Once we agree on the tasks, I'll create the separate issues

[sinedied]

I created the feature branch with the generator questions and some of the ground work (dependencies, cordova config.xml npm tasks...).

It's not fully functionnal at this point (it builds but the cordova app does not work at the moment).

@R0muald If it's ok for you I'll create the issues for the tasks listed above, so anyone can just reply or assign himself to the tasks.
Since I'm taking some vacations ⛱ , maybe it's just easier if everyone just commit directly to the feature branch to advance faster, as you suggested on the contribution post. I'll send you an invitation for that.

[FrancoisDF]

OK sure, thanks.
Also, I've been looking into this project: https://labs.encoded.io/2016/11/12/ionic2-with-angular-cli/, so except that we need to make sure we include the references to the SASS files, it shouldn't be too bad to make Ionic 2 working with the ng-cli!
I will try to contribute soon on it!

[sinedied]

Everything is ready, anyone who wants to contribute, just assign the issue you want to work on to yourself so we can follow who's working on what on the project page. 😸

[FrancoisDF]

Hey, I'm finally spending some time on the mobile app!
I'm still trying to see how to re-organize the ionic app structure to match with the app structure generated by the ngx-rocket ... it's actually more complicated than expected. I can make use of angular-router to separate the authentication from the rest of the app, but I'm still facing issues to get away from the new ionic navController that replace the angular-router.
About ionic router, there is a component to get deep linking but that will still be its own logic regarding the web app way of doing routing...
Do you have a strong opinion about only using the angular-router even in a mobile context? Did you create a small POC to get an idea of what result you wanted to end up with?

[sinedied]

I looked at this problematic some time ago, and it seems there's no straightforward solution in Ionic 2+: for the moment it seems the best way would be to use Ionic navigation and deep linker systems in replacement of the angular-router used for web app.
I did not had much time to play with Ionic these last weeks, but yeah using the integrated DeepLinker (and maybe also with the native deep link plugin) would be the easiest way to go.

There's not much info on the subject, but it seems the Ionic team has completely abandoned the idea of integrating with angular-router, which is sad :(

[FrancoisDF]

I've been playing with the new ionic 3 @IonicPage decorator.
It's pretty nice since your pages are now modules, but those modules are never initiated. They just exist under the pages folder which makes them accessible to the app from any controller by the page name.
It also means that this new implementation highly depends on the app folder structure and the fact that all pages are under the pages folder.
I think it's going to be quite of a challenge to get both mobile and web working the same ecosystem.
Let's see ^^

[sinedied]

Just for the record, I made a post on their forum since I found that they're more and more drifting away from (Angular) best practices over time: https://forum.ionicframework.com/t/default-ionic-structure-is-bad-for-large-projects/95938

@R0muald Yes it will be a challenge unlike with Ionic v1 (!), but from what I've seen it does not seems tightly related to the folder structure, but rather an arguably "best" practice from the Ionic team. I'll try to play a bit with it...

[sinedied]

I have started working on basic integration, and have run into a few issues so far:

• Problems with duplicate inclusion of ionicons package in ionic-angular ionic-team/ionic-framework#12284
• NgModuleLoader not Webpack-friendly ionic-team/ionic-framework#12285
• Deep links process as a separate module/standalone CLI? ionic-team/ionic-app-scripts#1091
• @ionicPage module resolution issue with component file naming ionic-team/ionic-app-scripts#1093
• Scss not emitted properly (very strange!) angular/angular-cli#6953
• Ionic have fixed dependencies, using [email protected] modules while using @angular/router without a <router-outlet></router-outlet> need >=4.2.0 to work
• Warning on build: Critical dependency: the request of a dependency is an expression angular/angular-cli#7112

It's really not trivial integrating Ionic navigation in a proper by feature structuration as recommend by Angular 😞

Even worse: ionic-cli seems to perform some under-the-hood magic with @ionicPage decorators tied to the deeplinks plugin, so routes are emitted ❗️

[sinedied]

After a lot of struggle, here is what I found during extensive comparison between angular-cli and ionic-cli (I even considered moving to using Ionic CLI for mobile projects...):

Missing in ionic CLI:

• angular style guide conventions: naming, structure, organisation by feature
• asset revisioning for cache busting
• unit tests and e2e tests
• component CSS isolation is disabled (!), everything's global
• strange build issues: .scss files copied in assets folder?
• API proxy

Missing in Angular CLI:

• deep linking (preprocessing done by @ionic/app-scripts)
• service worker integration, but that should be possible: Feature: ServiceWorker support in CLI angular/angular-cli#4006
• ionic emits a critical warning on build: NgModuleLoader not Webpack-friendly ionic-team/ionic-framework#12285 (no workaround for now)

Due to the tight integration (among other issues) of @ionicPage() with Ionic CLI, I'm in favour for now to not use it in the starter template. To compensate for it, I thinking of POC'ing integration of standard angular/router (for URL routing/deeplinks support) with Ionic navigation system using a core service helper 😈

@R0muald do you have any thoughts on this?

EDIT: quick POC done, and the first result is that it seems possible to bind angular-router navigation to ionic navigation, and that's good news I think :)

[sinedied]

For anyone interested, this is where I'm working on for the mobile branch: https://github.com/ngx-rocket/starter-kit/tree/mobile/ionic-routing

With a few lines of plumbering, Ionic navigation is easily tied to Angular router, and this allows to use the exact same principles as the web version, without the pitfalls of @IonicPages.

I'm currently working on authentication page, and unit/e2e tests will come after. Once it's stable enough, I will migrate the code to the generator.

Any feedback appreciated 😄

[FrancoisDF]

This is definitively a great start!
I did work on a POC and got away from @ionicPages by using modules, but didn't get to implement it with the angular-router so kudos for that!
I'm also more interested in the tab navigation and found out that it's more depending on the [root] navigation which is linked to ionic navigation ... so I ended up using ionic navs instead... But maybe both can be used at the same time. maybe adding a deep-link when using tabs can help for the routing ...
Also, just for the theming part, I would see two new files theme/ionic.scss and theme/ionic-variables.scss. Each of them would be imported by theme/theme.scss and theme/theme-variables.scss to get a better separation between styles and help for the code generation.

[sinedied]

@R0muald what would you want to see in theme/ionic.scss? Should it be the Ionic imports content that's in main.scss? If that's it, then the same could be done for the Bootstrap branch.

As for the mobile branch, it's nearly complete now, all that's remaining is the service worker support but I'm thinking of doing it in a second stage, as it's not really mobile-specific and could also apply to the Bootstrap version.

For the mobile-specific tooling, I have created a new repo: https://github.com/ngx-rocket/scripts
All supporting scripts will move to this tool now, so it's not tied to the generator.

Also as a side note @R0muald, someone will start working a "responsive tabs" version of the ionic mobile shell, instead of the side-menu: bottoms tabs will be used in "smartphone" breakpoints, and tabs will move vertical on the left side when the app is in larger breakpoints, like this:

In larger mode:

What do you think?
I would like to have all starter templates to be phone/tablet/desktop responsive, I think that's the simplest way of having a responsive tab-based template, but I'm open for better ideas 😄

[sinedied]

While discussing possible improvements to the mobile/cordova branch, I have applied all the changes (and fixed a lot by the way 😉 ) to the generator, so everything is close to be ready for a new release with a HUGE changelog! 🎉

The only task remaining here concerns the PWA/Service worker support, but since does not concern directly the mobile (hybrid) branch, I will keep it for a later update.