problem facing in lazy loading in angular 6

Question

structure is

1--login component
  1.1--forget password component
  1.2--reset password component

For that I created the module named "login module"

Here is my coding:

app.routing

 {
path: '',
redirectTo: 'login',
pathMatch: 'full',

 },
 {
   path: 'login',
   component: LoginComponent,

   children: [
    {
      path: 'login',
      canActivate: [AuthServiceGuard],
      loadChildren: './login/login.module#LoginModule'
    }
   ]
 }

login.routing

const routes: Routes = [
 {
  path:'',
  component : LoginComponent,
  data:{
    title:'login'
  },
   children:[{
      path:'forgotPassword',
      component:forgotPwdComponent,
      data:{
        title:'ForgotPassword'
      }
    },
   {
      path:'resetPassword',
      component:ResetPwdComponent,
      data:{
        title:'ResettPassword'
      }
    }]

And in login.html i used routerLink as,

<a class="achortag" routerLink="/forgotPassword">Forgot Password</a>

Now getting error like:

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'forgotPassword'
Error: Cannot match any routes. URL Segment: 'forgotPassword'

I called forgetpwdComponent and resetpwdcomponent in loginmodule and

I called loginmodule in appmodule Is there any problem in my step which I did.

can anybody guide me??

Ashot Aleqsanyan · Accepted Answer · 2020-01-09 10:49:46Z

1

currently your forgot password route is /login/login/forgotPassword

you can change your routing something like this

app.routing

[
   {
       path: '',
       redirectTo: 'login',
       pathMatch: 'full',
   },
   {
       path: '',
       canActivate: [AuthServiceGuard],
       loadChildren: './login/login.module#LoginModule'
   }
]

in this case your route is /login/forgotPassword

if you want to have the route /forgotPassword instead of /login/forgotPassword

you can change your code something like below

app.routing

[
  {
     path: '',
     canActivate: [AuthServiceGuard],
     loadChildren: './login/login.module#LoginModule'
   }
]

login.routing

const routes: Routes = [
  {
     path:'login',
     component : LoginComponent,
     data:{
     title:'login'
  },
  {
     path:'forgotPassword',
     component:forgotPwdComponent,
     data:{
        title:'ForgotPassword'
     }
   },
   {
      path:'resetPassword',
      component:ResetPwdComponent,
      data:{
         title:'ResettPassword'
      }
   }
]

edited Jan 9, 2020 at 10:49

answered Jan 9, 2020 at 7:10

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Angel Reji Over a year ago

that is not a routing, I am giving the modulename,login is my folder

Ashot Aleqsanyan Over a year ago

@AngelReji Sorry I don't understand what you say, please can you clarify?

Ashot Aleqsanyan Over a year ago

and I have updated the answer, you should not be import LoginComponent into AppModule if it is a part of LoginModule

Adrita Sharma · Accepted Answer · 2020-01-09 07:04:17Z

0

Try like this:

[routerLink]="['login/forgotPassword']

answered Jan 9, 2020 at 7:04

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

problem facing in lazy loading in angular 6

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related