Angular: Cant define router outlet in lazy loaded module component:

0
votes

I want to make lazy loaded module in which i have 3 components. The main is Auth component(and signIn and signOut component). So i make the lazy loading and i load my module lazily, but i cant define router-outlet tag in my auth component to make child routes work.

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthorizationModule} from './authorization/authorization.module';

const routes: Routes = [
  {path: 'auth', loadChildren: () => AuthorizationModule}
];

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

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {SignUpComponent} from './sign-up/sign-up.component';
import {SignInComponent} from './sign-in/sign-in.component';
import {AuthComponent} from './auth/auth.component';


const routes: Routes = [
  {
    path: '', component: AuthComponent, children: [
      {path: 'signIn', component: SignInComponent},
      {path: 'signUp', component: SignUpComponent}
    ]
  }
];

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

export class AuthRoutingModule {
}
2
angularroutes
what do you mean by ' i cant define router-outlet tag'? – Gérôme Grignon
when im trying to add <router-outlet> in my auth.component.html , the compiler says 'router-outlet' is not a known element: – Hakob Beglaryan
is your AuthRoutingModule module added as an import into AuthorizationModule module? and is AuthComponent declared into AuthorizationModule module? – Gérôme Grignon
Please Import your AuthRoutingModule in AuthorizationModule. – Akhil Naidu
i already imported – Hakob Beglaryan

2 Answers

0
votes

Import AuthRoutingModule in your AuthorizationModule

@NgModule({
  
  imports: [
    AuthRoutingModule // Add this statement
  ]
})
export class AuthorizationModule{ }
0
votes

You didn't provide which version of angular you're using, anyway in your AppRoutingModule

const routes: Routes = [ {
           path: 'auth', 
           loadChildren:  () => import('./path/to/your/auth/module/ts/file').then((m: AuthModule) => m.AuthModule)
       }
];