I dont have much knowledge on routing in angular. I have different routing modules, in what i want to do is, i want to load my signup component before the dashboard component. app.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { UpdatepasswordComponent } from
'./auth/updatepassword/updatepassword.component';
// Import Containers
import {
FullLayoutComponent,
SimpleLayoutComponent
} from './containers';
export const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{ path: 'signup', component: SignupComponent },
{ path: 'signin',
component: SigninComponent
},
{ path: 'updatepassword', component: UpdatepasswordComponent },
{
path: '',
component: FullLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: 'base',
loadChildren: './views/base/base.module#BaseModule'
},
{
path: 'buttons',
loadChildren: './views/buttons/buttons.module#ButtonsModule'
},
{
path: 'charts',
loadChildren: './views/chartjs/chartjs.module#ChartJSModule'
},
{
path: 'dashboard',
loadChildren: './views/dashboard/dashboard.module#DashboardModule'
},
{
path: 'icons',
loadChildren: './views/icons/icons.module#IconsModule'
},
{
path: 'notifications',
loadChildren:
'./views/notifications/notifications.module#NotificationsModule'
},
{
path: 'theme',
loadChildren: './views/theme/theme.module#ThemeModule'
},
{
path: 'widgets',
loadChildren: './views/widgets/widgets.module#WidgetsModule'
}
]
},
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
base-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { addActivityComponent } from './addActivity.component';
import { activitiesComponent } from './activities.component';
import { usersComponent } from './users.component';
import { userActivitiesComponent } from './userActivities.component';
const routes: Routes = [
{
path: '',
data: {
title: 'Admin'
},
children: [
{
path: 'addActivity',
component: addActivityComponent,
data: {
title: 'Add Activity'
}
},
{
path: 'activities',
component: activitiesComponent,
data: {
title: 'Manage Activities'
}
},
{
path: 'users',
component: usersComponent,
data: {
title: 'Users'
}
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BaseRoutingModule {}
dashboard-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
const routes: Routes = [
{
path: '',
component: DashboardComponent,
data: {
title: 'Dashboard'
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule {}
In app routing i tried to redirect my empty to path to signup like this:
{
path: '',
redirectTo: 'signup',
pathMatch: 'full',
}
and FullLayoutComponent path like this:
{
path: 'dashboard',
component: FullLayoutComponent,
data: {
title: 'Home'
},
from this approach i will succesfully redirect my app to login page and after signin, it will go to the dashboard admin page as well but the problem is that i have 2 cards in my FullLayoutComponent which is showed in the dashboard page, after doing this approach those cards wouldnt successfully load into page. Except cards all pages where loaded successfully into the app.
here u will find the 2 pictures differences https://i.stack.imgur.com/htbDA.png
after redirect to signup: https://i.stack.imgur.com/yk2I6.png
Any help will be appreciated. Thankyou :)