CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic4angular8
Don-Ricardo
Don-Ricardo

Reputation: 213

Router navigation isn't working as supposed to

I am using lazy Loading. When my app initializes I am redirected to main/home. I am trying to add a page to redirect new users to before redirecting them to the main/home page. I used a simple button to test the navigation but it always navigated me back to main/home.

My main problem is just the navigation part

Can you please tell me what I am doing wrong?. I am using Angular 8 and Ionic 4

app-routing.module.ts

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule' },
'./pages/search/search.module#SearchPageModule' },

{ path: 'cat-view', loadChildren: './pages/cat-view/cat- 
view.module#CatViewPageModule' },

{ path: 'country-selection', loadChildren: './pages/country-s 
 election/country-selection.module#CountrySelectionPageModule' },
  ];

Main module 

 const routes: Routes = [
 {
   path: 'main',
   component: MainPage,
   children: [
     { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
     { path: 'favorites', loadChildren: 
   '../favorites/favorites.module#FavoritesPageModule' },
   ]
   },
   {
   path: '',
   redirectTo: '/main/home'
    }
  ];

app.component.ts

 initializeApp() {
     this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.notificationSetup();
        this.navigateToNextPage();
     });
 }
 navigateToNextPage() {
    this.router.navigate(['/country-selection']);
  }

Upvotes: 2

Views: 2446

Answers (2)

Don-Ricardo
Don-Ricardo

Reputation: 213

I solved the issue actually by simply removing the 

 { path: 'country-selection', loadChildren: './pages/country- 
 selection/country-selection.module#CountrySelectionPageModule' },

from app-routing-module.ts and adding it to the main.module.ts and then calling it this way 

 this.router.navigateByUrl('main/country-selection');

Upvotes: 1

rtpHarry
rtpHarry

Reputation: 13125

It's not clear from the question if you want to solve some test code or implement a new user onboarding experience.

Routing Issue

For your routes, I think you have defined your routes twice, and overridden them in the second one. What do you mean by "main module"?

User Onboarding Tutorial

The way to do the new users tutorial is using an auth guard and saving a token in Ionic Storage.

There is a great tutorial here which directs the user to an intro slideshow for the first load only:

Ionic Intro Slider for New Users | AngularFirebase

Basically what it does is you create a guard:

// ...omitted
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class TutorialGuard implements CanActivate {

  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {

    const isComplete = await this.storage.get('tutorialComplete');

    if (!isComplete) {
      this.router.navigateByUrl('/tutorial');
    }

    return isComplete;
  }
}

And then also on the last page of the slideshow you set it to not show next time with:

await this.storage.set('tutorialComplete', true);

Upvotes: 1

Related Questions