CODEWITHSUNDEEP
angularroutesionic4progressive-web-apps
Exsite
Exsite

Reputation: 177

ionic 4 Angular PWA customized url

I am developing a web app with Ionic 4 & angular 7. when i visit my domain it automatically redirects to home. I would like to use a variable instead of home

e.g.

www.mydomain.com/home/school1 to
www.mydomain.com/school1
www.mydomain.com/school2 etc

So far i have this in my code which works

    const routes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadChildren: './home/home.module#HomePageModule',
        canActivate: [BeforeLoginService]
      },
      {
         path: 'home/:school_name',
         loadChildren: './home/home.module#HomePageModule',
         canActivate: [BeforeLoginService]
       }, 
{ 
path: 'school-dashboard', 
loadChildren: './schools/school-dashboard/school-dashboard.module#SchoolDashboardPageModule' },
  { 
path: 'admin-dashboard', 
loadChildren: './admin/admin-dashboard/admin-dashboard.module#AdminDashboardPageModule' },]

So far I have tried the below code. This messes with routing. router.navigateByUrl or router.navigate does not work when I implement this code

const routes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
         path: ':school_name',
         loadChildren: './home/home.module#HomePageModule',
         canActivate: [BeforeLoginService]
       },{ 
path: 'school-dashboard', 
loadChildren: './schools/school-dashboard/school-dashboard.module#SchoolDashboardPageModule' },
  { 
path: 'admin-dashboard', 
loadChildren: './admin/admin-dashboard/admin-dashboard.module#AdminDashboardPageModule' }
      ]

Is there a way to accomplish a customized url in angular like below

www.mydomain.com/school1 or www.mydomain.com/school2 instead of www.mydomain.com/home/school1

Greatly appreciate any help

Upvotes: 0

Views: 380

Answers (1)

yazantahhan
yazantahhan

Reputation: 3110

You can try this:

const routes: Routes = [
{
  path: '',
  loadChildren: './home/home.module#HomePageModule',
  canActivate: [BeforeLoginService]
},
{
 path: ':school_name',
 loadChildren: './home/home.module#HomePageModule',
 canActivate: [BeforeLoginService]
}]

Please check a working demo here.

Update

Please try these routes:

const routes: Routes = [
  {
    path: '',
    loadChildren: './home/home.module#HomePageModule',
    canActivate: [BeforeLoginService]
  },
  {
     path: ':school_name',
     loadChildren: './home/home.module#HomePageModule',
     canActivate: [BeforeLoginService]
  },
  { 
     path: 'school-dashboard', 
     loadChildren: './schools/school-dashboard/school-dashboard.module#SchoolDashboardPageModule' 
  },
  { 
     path: 'admin-dashboard', 
     loadChildren: './admin/admin-dashboard/admin-dashboard.module#AdminDashboardPageModule'
  }
 ];

In this way, when the user enters mydomain.com/school1, the app will show the HomeComponent which is the Login page. From there, you can take the school1 as a parameter using:

this.activatedRoute.snapshot.paramMap.get('school_name')

With this parameter, you will know which school has entered, so you can show the related info and then authenticate the user. Afterwards, you will have to navigate using:

this.router.navigate(['/school-dashboard']);

Please note that you will need to handle if the user didn't enter the school name in the URL, so the param will be undefined. You need to show something default, or show another page instead of the HomeComponent. You can do this by changing the first route to point to another Component:

{
  path: '',
  loadChildren: './MY_OTHER_COMPONENT_MODULE_PATH#MY_OTHER_COMPONENT_MODULE'
}

Upvotes: 1

Related Questions