角度 6 中延迟加载面临的问题答案

【问题标题】：problem facing in lazy loading in angular 6角度 6 中延迟加载面临的问题
【发布时间】：2020-01-10 12:51:51
【问题描述】：

结构是

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

为此，我创建了名为“登录模块”的模块

这是我的代码：

app.routing

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

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

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

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

在 login.html 中我使用 routerLink 作为，

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

现在出现如下错误：

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

我在 loginmodule 和中调用了 forgetpwdComponent 和 resetpwdcomponent

我在 appmodule 中调用了 loginmodule 我的步骤有什么问题吗？

有人可以指导我吗？？

【问题讨论】：

标签： angular angular6 angular7 lazy-loading angular8

【解决方案1】：

目前您忘记密码的路径是/login/login/forgotPassword

你可以像这样改变你的路由

app.routing

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

在这种情况下，您的路线是/login/forgotPassword

如果你想要路由 /forgotPassword 而不是 /login/forgotPassword

你可以像下面这样改变你的代码

app.routing

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

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

【讨论】：

那不是路由，我给的是模块名，登录是我的文件夹
@AngelReji 对不起，我不明白你在说什么，请你澄清一下吗？
我已经更新了答案，如果它是 LoginModule 的一部分，您不应该将 LoginComponent 导入到 AppModule 中

【解决方案2】：

试试这样：

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

【讨论】：