question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs don't load when upgrading from Angular 6 to 6.1

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
MrSparkllecommented, Aug 15, 2018

@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

1reaction
kensodemanncommented, Aug 13, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Guide to update your Angular application v6.0 -> v12. ...
Run npx @angular/cli@10 update @angular/core@10 @angular/cli@10 which should bring you to version 10 of Angular.
Read more >
Angular/AngularJS Upgrade app unresponsive when ...
Try disposing of the service on each tab load, then creating new events to listen for new changes. Also ...
Read more >
lazy loading not working in Angular 6 · Issue #10673
I solved the issue by adding in the angular.json file the lazyModules property and map the same url in the router configuration. I...
Read more >
Update Guide | Ignite UI for Angular
For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from the "From 6.x .." section apply those changes and...
Read more >
How To Update Angular CLI To Latest Version
If you are migrating from older versions of Angular CLI like 1.x to Angular 6 version. You need to do few additional checks...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found