Navigation url changes but view does not load

I’ve recently switched from a split panel to ion tabs. The tabs works fine but accessing the sub routes is very difficult. The routes are in dashboard.module.ts below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import {DashboardPage} from './dashboard.page';
import {HomePage } from 'src/app/dashboardComponents/home/home.page';
import {JobCenterPage} from 'src/app/dashboardComponents/job-center/job-center.page';
import {SettingsPage} from 'src/app/dashboardComponents/settings/settings.page';
import {ProfileEditPage } from 'src/app/dashboardComponents/profile-edit/profile-edit.page';
import {PostedJPage } from 'src/app/dashboardComponents/posted-j/posted-j.page';
import { AppliedJobsPage} from 'src/app/dashboardComponents/applied-jobs/applied-jobs.page';
import { JobCompletedPage } from 'src/app/dashboardComponents/job-completed/job-completed.page';
import { ApplicantsPage} from 'src/app/dashboardComponents/applicants/applicants.page'
import { IonicModule } from '@ionic/angular';

const routes: Routes = [
  {
    path:'dashboard',
    component:DashboardPage,
    children: [
      {
        path: "home",
        component: HomePage
      },
      {
        path: "job-center",
        component: JobCenterPage,
        children:[
          {
            path:"posted",
            loadChildren: 'src/app/dashboardComponents/posted-j/posted-j.module#PostedJPageModule'
          },
          {
            path:"applied-jobs",
            component:AppliedJobsPage
          },
          {
            path:"job-completed",
            component:JobCompletedPage
          },
          {
            path:"applicants",
            component:ApplicantsPage
          },

]
      },
      {
        path: "profile-edit",
        component: ProfileEditPage
      },
      {
        path: "settings",
        component: SettingsPage
      }
    ]
  }
]

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: []
})
export class DashboardPageModule {}

I am trying to access the child routes of job center and the url changes but the page does not load.

job-center.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Job Center</ion-title>
  </ion-toolbar>
  </ion-header>
<ion-content>
  <ion-list>
    <ion-item lines="full" (click)="toPosted()" >
      <ion-icon name="list-box"></ion-icon>
      <ion-label>Posted Jobs</ion-label>
      <ion-badge color="primary">{{postedJobs}}</ion-badge>
    </ion-item>
    <ion-item lines="full" (click)="toApplied()">
      <ion-icon name="checkmark-circle"></ion-icon>
      <ion-label>Jobs Applied</ion-label>
      <ion-badge color="primary">{{appliedJobs}}</ion-badge>
    </ion-item>
    <ion-item lines="full" (click)="toJobCompleted()">
      <ion-icon name="checkmark"></ion-icon>
      <ion-label>Completed Jobs</ion-label>
      <ion-badge color="primary">{{completedJobs}}</ion-badge>
    </ion-item>
    <ion-item lines="full" (click)="toApplicants()" >
      <ion-icon name="done-all"></ion-icon>
      <ion-label>Applicants</ion-label>
      <ion-badge color="primary">{{applicants}}</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>

job-center.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { DataService } from 'src/app/data.service';
@Component({
  selector: 'app-job-center',
  templateUrl: './job-center.page.html',
  styleUrls: ['./job-center.page.scss'],
})
export class JobCenterPage implements OnInit {

  constructor(private router: Router,public storage: Storage,
  public _data: DataService) { }
 userData;
 postedJobs;
 completedJobs;
 appliedJobs;
 applicants;
 dataLengths;

  ngOnInit() {

  }

  ionViewWillEnter(){
        this.userData = this.storage.get('user');
        this.storage.get('user').then((value)=>{
          this.userData = value;
          this._data.getCurrentUser(this.userData._id)
          .subscribe(
            res=>(
            this.dataLengths = res,
            this.completedJobs = this.dataLengths.completedJobs.length,
            this.appliedJobs= this.dataLengths.appliedJobs.length,
            this.postedJobs = this.dataLengths.postedJobs.length,
            this.applicants = this.dataLengths.applicants.length
            ),
            err=> console.log(err)
          )
        })
  }

  toApplied(){
    this.router.navigate(['dashboard/job-center/applied-jobs'])
  }

  toJobCompleted(){
    this.router.navigate(['dashboard/job-center/job-completed'])
  }

  toPosted(){
    this.router.navigate(['dashboard/job-center/posted'])
  }

  toApplicants(){
    this.router.navigate(['dashboard/job-center/applicants'])
  }
}

The tab has four links and job center is one of them. Job center also has an item list with click events to navigate to the sub routes on job center but it does not work. The url changes but the pages do not load.
Please help

Hey there! Got an example project on github that people could inspect? A lot easier to debug issues with on.

No. Not at the moment. But please I need help. Any other information or code will be added if needs be.

Please provide a sample app/demo that people can inspect. We cannot guess the issue from what you’ve provided.

I’ve pushed the code to https://github.com/georgestcm/small-jobs.

The tab works fine. When I navigate to job center and then click one of the list, the url changes but the page does not show up. The routing is in dashboard.module.ts not the traditional routing file. Please help

Hi, could you find the solution to this issue ? I’m having the same behavior and I cannot figure it out.

Did you got a solution for this ?

Anyone has a solution for this? It’s kind of being an issue over here.

Edit:
For me this post had the solution:
Ionic 4 rendering after navigate not working
In case the link ends up dying, the solution consists in making sure that the file core.css is correctly imported in global.css.

This line suffices @import “~@ionic/angular/css/core.css”;

In my case it was commented out.

1 Like

Omg you absolute madman you did it. Spent hours trying to figure out the problem and this completelly unrelated solution fixed it. I was migrating a Ionic3 app to Ionic4 and commented lots of stuff out, including the

@import "~@ionic/angular/css/core.css";

line from global.scss

it works now!