CODEWITHSUNDEEP
angularionic-framework
BrnMarq
BrnMarq

Reputation: 11

Ionic/Angular router doesn't redirect properly

I'm trying to build a simple ionic app, and meanwhile coding I have faced a problem in the form that the router works, when I try to access a page directly from the url(Putting the url in the browser), it redirects me to a blank url(http://localhost:8100/ to be more specific), and it should work reversely.

Hope you can help me, I tried hardly but I can't see the error. Here is the code:

food-list.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { FoodListPage } from './food-list.page';

const routes: Routes = [
  {
    path: '',
    children : [
      {
        path : '',
        component : FoodListPage
      },
      {
        path: ':id',
        loadChildren : () => import('./food-detail/food-detail.module').then( m => m.FoodDetailPageModule),
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class FoodListPageRoutingModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'food-list',
    loadChildren: () => import('./food-list/food-list.module').then( m => m.FoodListPageModule),
  },
  { path: '', redirectTo: '/food-list', pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I already tried removing the slash from the redirect route, and nothing, if you need more of the code, please, let me know, thanks for your help

Upvotes: 0

Views: 1445

Answers (1)

chrismclarke
chrismclarke

Reputation: 2105

From my experience I've also never managed to get route parameters to work when they have no other static path, e.g {path:':my_param'}

If possible I would recommend adding an intermediate path name, e.g.

{
        path: 'detail/:id',
        loadChildren : () => import('./food-detail/food-detail.module').then( m => m.FoodDetailPageModule),
      }

and updating your other routing to include the detail/ prefix.

You may also have additional issues when deploying to a live server, despite the multiple paths you have there is still only 1 main file that is the entry-point for the server (your index.html file, all routes are essentially artificial), so depending on your hosting choice you should also make sure you follow their guidance to configure for server-side apps (common hosts like firebase and netlify make this very easy to do).

Upvotes: 1

Related Questions