Navigating between components

@khashashin wrote:

I have following routing modules:

############# app-routing.module.ts
const routes: Routes = [
    {
        path: '',
        redirectTo: '/tutorial',
        pathMatch: 'full'
    },
    {
        path: '',
        loadChildren: './pages/tabs/tabs.module#TabsPageModule'
    },
    {
        path: 'register',
        loadChildren: './auth/register/register.module#RegisterPageModule'
    },
    {
        path: 'login',
        loadChildren: './auth/login/login.module#LoginPageModule'
    },
    {
        path: 'tutorial',
        loadChildren: './pages/tutorial/tutorial.module#TutorialPageModule',
        canLoad: [TutorialGuard]
    }
];

############# tabs.router.module.ts
const routes: Routes = [
    {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
    },
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'home',
                children: [
                    {
                        path: '',
                        loadChildren: '../home/home.module#HomePageModule'
                    }
                ]
            },
            {
                path: 'profile',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: '../profile/profile.module#ProfilePageModule'
                    }
                ]
            },
            {
                path: 'dictionary',
                children: [
                    {
                        path: '',
                        loadChildren:
                            '../dictionary/dictionary.module#DictionaryPageModule'
                    }
                ]
            }
        ]
    }
];

############# dictionary-routing.module.ts
const routes: Routes = [
    {
        path: '',
        component: DictionaryPage,
        children: [
            {
                path: 'letter/:letter',
                component: LetterPage
            },
            {
                path: 'add',
                component: WordAddComponent
            },
            {
                path: 'word-detail/:id',
                component: WordDetailComponent
            }
        ]
    }
];

And routes for DictionaryPage components does not have modules to lazy load them, instead it has only children components and paths. This setup works without error but the views does not load. Going to the url http://localhost:8100/tabs/dictionary/letter/H does not load new view but the url in the browser changes without any errors. where did i make a mistake?

Posts: 1

Participants: 1

Read full topic