Is it possible to use two routes in angular?

Question

I do an Angular app using Angular7, and i try to use two "router-outlet" tag, For example I have two components "main" and "main2", that are halfly the same, they are routed in a parent component, and I want to route their differences in two 'children component, is it possible ? have you any way to explore ? Thanks ;)

Answer 1

Well, if I understand your questions very well. It is very possible as a case where you have login and dashboard, for instance

const routes: Routes = [
    {
        path: '',
        pathMatch: 'prefix',
        redirectTo: 'auth/login'
    },
    {
        path: 'loading',
        component: LoadingComponent
    },
    {
        path: 'auth/login',
        component: LoginComponent
    },
    {
        path: 'auth/forgot-password',
        component: ForgotPasswordComponent
    },
    {
        path: 'auth/register',
        component: RegisterComponent
    },
    {
        path: 'auth/reset-password-temp',
        component: ResetPasswordComponent
    },
    {
        path: 'dashboard',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'welcome',
                component: WelcomeComponent
            },
            {
                path: 'messages',
                canActivate: [AuthGuard],
                component: MessagesComponent
            },
            {
                path: 'student-add',
                component: StudentAddComponent
            },
            {
                path: 'student-edit',
                component: StudentEditComponent
            },
            {
                path: 'student-view',
                component: StudentViewComponent
            }

        ]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule],
    providers: []
})
export class RoutingModule {}

With every component imported and correct path referencing

Answer 2

For those who has the same problem as me, I use a "main" component and a "auth" component. The "main" component contain the "router-outlet" tag and my "auth" component contain my login view. In my app.componnt.html, I just use

<app-auth *ngIf="!isAuth"></app-auth>
<app-main *ngIf="isAuth"></app-main>

With that method, any user who want to access to a particulary path will not be redirect to an auth view and will keep the path he want to access.