Ionic-framework: Tabs don't load when upgrading from Angular 6 to 6.1

[carstenbaumhoegger]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.2

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.4

System:

   NodeJS : v10.8.0 (/usr/local/bin/node)
   npm    : 6.3.0
   OS     : macOS High Sierra
   Xcode  : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : not set

Describe the Bug
I've updated my app from Angular 6 to Angular 6.1, because the ionic-conference-app got this update too.
Before the update, the lazy loaded tabs were displayed and everything was working fine. Now, only the TabsPage is loaded, all lazy loaded tabs are not.

Steps to Reproduce
Steps to reproduce the behavior:

1. Checkout ionic-conference-app on branch core-update
2. Modify the routes described in tabs-page-routing.module.ts to use lazy loading:

This is the route configuration, that does work with Angular 6.0.2 and 6.1.2

{
    path: 'schedule',
    component: SchedulePage,
    outlet: 'schedule'
},

This one only works with Angular 6.0.2:

{
    path: 'schedule',
    outlet: 'schedule',
    loadChildren: '../schedule/schedule.module#ScheduleModule'
}

1. See, that the Schedule page is not being loaded anymore

I've used this article to create tabs that are lazy loaded

Expected Behavior
The tabs get loaded with Angular 6 and 6.1

[EWBears]

Hi Carston - my understanding is that you generally shouldn't be upgrading either Angular or Typescript versions unless the ionic team pushes out an update to support the new versions.

I believe that you should be upgrading ionic-native, cordova platforms, cordova plugins, and app scripts, but leave the Angular and Typescript alone because upgrade often cause unexpected breaking changes in ionic. Hopefully someone from the ionic team can correct me if this is incorrect!

[kensodemann]

Ionic v4 should work just fine with Angular 6.1. AAMOF, I am working on two different projects right now that use Ionic v4 with Angular 6.1, one is currently using beta.1 the other beta.0 (I have not upgraded them to beta.2 yet).

I have not tried the conference app yet.

[EWBears]

Gotcha - thanks for the correction Ken! Sorry for the misunderstanding/misinformation.

[kensodemann]

I should also note that I am not using lazy loading. I am in the process of switching the simplest of my apps over to that now to see if I can duplicate the issue.

[kensodemann]

Duplicated here: https://github.com/kensodemann/car-show-ballot-box/tree/test/lazyLoading

If I take this project anywhere above 6.0.4 (IOW, 6.0.5 or higher, including 6.1.2) it exhibits the issue reported here. However, this appears to be an issue with the Angular router and not an issue with Ionic itself.

EDIT: upon reviewing with the team, there _could_ be an issue on the Ionic end as well. More work is being done to look into that.

[carstenbaumhoegger]

hey @EWBears:
You're absolutely right, I was just trying to update to the Angular version used in die Ionic conference app. That's why I'm surprised the exact same combination of versions doesn't work when using lazy loading.

@kensodemann thanks for looking into this!

[MrSparklle]

@carstenbaumhoegger I created a new project using default ionic tabs template (ionic start NewApp tabs type=angular and it works fine using lazy loading.

After project created, I update Angular to latest version 6.1.2 without any troubles. Everything works fine for me.

[carstenbaumhoegger]

@MrSparklle thanks for the info!
Is there any particular setting, that the Tabs-Starter has, that's missing in the conference app?

[kensodemann]

@MrSparklle - could you upload one of those samples to a GitHub repo? I have some apps that are only slightly modified from the starter (other than making it lazy loading on the individual tab pages, which the starter does not do), and it did not work for me. I would like to have a look at what you did.

[MrSparklle]

@carstenbaumhoegger @kensodemann Sorry guys. I tought the lazy loading was implemented by default in tabs started but seems it's not. I made a research this morning and this issue is being treated in this issue https://github.com/ionic-team/ionic/issues/14566

[mhartington]

Closing as duplicate of https://github.com/ionic-team/ionic/issues/14566

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.