Angular 无法在服务器启动时将延迟加载的模块重定向为默认路由/url

大家好

服务器启动npm start时，Angular 2应用程序中出现了此问题

我将基本路由或基本路径重定向到user/login，这是一个延迟加载的模块，但它抛出了一个找不到模块错误。正如我所说，在启动和编辑pathMatch参数时，从“full”到“prefix”总是会发生这种情况，反之亦然，这样可以修复错误并加载路由而不出错

我希望你能帮我做这件事

下面是节目

app/routes.ts

app/app.module.ts

app/user/user.routes.ts

app/user/user.module.ts

我希望就我的问题提供了足够的信息。如果没有，请告诉我。多谢各位

编辑：

启动时访问user/login时，我遇到了相同的错误。

尝试如下更改您的user.module.ts：

@NgModule({
imports: [
    CommonModule,
    RouterModule.forChild(userRoutes)
],
declarations: [
    LoginComponent
],
exports: [RouterModule], // Add this line
providers: [UserAuthService]
})

export class UserModule {}

及

另外，user.routes.ts：

尝试如下更改您的user.module.ts：

@NgModule({
imports: [
    CommonModule,
    RouterModule.forChild(userRoutes)
],
declarations: [
    LoginComponent
],
exports: [RouterModule], // Add this line
providers: [UserAuthService]
})

export class UserModule {}

及

另外，user.routes.ts：

=>符号实际上对我有用。下面是我的代码，我只是通过编辑routes.ts文件来修复它

app/routes.ts

=>符号实际上对我有用。下面是我的代码，我只是通过编辑routes.ts文件来修复它

app/routes.ts

编辑： 从Angular 8开始，延迟加载模块的方法是使用动态导入，例如：

导出常数批准：路由=[ {path:'user'，loadChildren:=>import'path-to-module'。然后m=>m.UserModule}， {路径：，重定向到：'user'，路径匹配：'full'} ] 公认的答案根本不是实现懒散加载的正确方法。 这应该是路由机制：

app.routes.ts

]

user.routes.ts

} ]

答案是正确的。由于您提到它似乎对您不起作用，因此我提供了另一种使用子路由的方法。

编辑： 从Angular 8开始，延迟加载模块的方法是使用动态导入，例如：

导出常数批准：路由=[ {path:'user'，loadChildren:=>import'path-to-module'。然后m=>m.UserModule}， {路径：，重定向到：'user'，路径匹配：'full'} ] 公认的答案根本不是实现懒散加载的正确方法。 这应该是路由机制：

app.routes.ts

]

user.routes.ts

} ]

---

---

答案是正确的。由于您提到它似乎对您不起作用，因此我提供了一种使用子路由的替代方法。

在尝试直接访问localhost:port/user路径时，您是否有相同的错误？user/login不是已定义的路由。@ibenjelloun是的，我有相同的错误。@ibenjelloun user/login是通过routes.ts上的用户定义的，该用户在加载所述模块的子路由后，将其前置并转换为angular。您没有在UserModule中导出RouterModule，对吗？你的路由架构没有真正意义。如果UserModule是您在初始化时从根应用程序直接路由到的模块，为什么要延迟加载它？这当然不是延迟加载的用例。当您尝试直接访问localhost:port/user路径时，是否也有相同的错误？user/login不是已定义的路由。@ibenjelloun是的，我有相同的错误。@ibenjelloun user/login是通过routes.ts上的用户定义的，该用户在加载所述模块的子路由后，将其前置并转换为angular。您没有在UserModule中导出RouterModule，对吗？你的路由架构没有真正意义。如果UserModule是您在初始化时从根应用程序直接路由到的模块，为什么要延迟加载它？这当然不是延迟加载的用例。这并没有解决我的问题。您是否也遇到同样的错误？请提供一些细节。看看这个最简单的例子，您可能忘记了其他配置：不幸的是，即使我已经遵循了您的答案，我仍然会得到相同的错误。实际上，我对我的应用程序的行为感到困惑。我已经用这个跟踪了angular docs，但是我仍然有同样的错误。这并没有解决我的问题。你也有同样的错误吗？请提供一些细节。看看这个最简单的例子，您可能忘记了其他配置：不幸的是，即使我已经遵循了您的答案，我仍然会得到相同的错误。实际上，我对我的应用程序的行为感到困惑。我已经按照angular文档进行了此操作，但仍然存在相同的错误。警告：这将阻止您的模块延迟加载。如果要保留延迟加载，您应该使用答案。警告：这将阻止您的模块延迟加载。如果您想保留延迟加载，您应该使用答案。请注意，使用字符串值加载延迟模块是非常困难的。延迟加载模块的正确方法是使用导入函数

---

：loadChildren:=>import./user/user.module'.Thennm=>m.usermodule请注意，使用字符串值加载惰性模块是非常困难的。延迟加载模块的正确方法是使用导入函数：loadChildren:=>import./user/user.module'。然后m=>m.UserModule

import { LoginComponent } from "./login.component";

export const userRoutes = [
    { path: 'login', component: LoginComponent }
]

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";

import { userRoutes } from "./user.routes";
import { LoginComponent } from "./login.component";


@NgModule({
imports: [
    CommonModule,
    RouterModule.forChild(userRoutes)
],
declarations: [
    LoginComponent
],
providers: [UserAuthService]
})

export class UserModule {}

@NgModule({
imports: [
    CommonModule,
    RouterModule.forChild(userRoutes)
],
declarations: [
    LoginComponent
],
exports: [RouterModule], // Add this line
providers: [UserAuthService]
})

export class UserModule {}

export const appRoutes:Routes = [
    { path: 'user', loadChildren:  'user/user.module#UserModule'},  
    { path: '', redirectTo: 'user', pathMatch: 'full'}
]

export const userRoutes = [
    { path: '', redirectTo: 'login', pathMatch: 'full'},
    { path: 'login', component: LoginComponent }
]

import { UserModule } from './user/user.module';

export const appRoutes:Routes = [
  { path: 'user', loadChildren: () => UserModule},
  { path: 'login', component: LoginComponent},    
  { path: '', redirectTo: 'user/login', pathMatch: 'full'}
]

export const appRoutes:Routes = [
{ path: 'user', loadChildren:  'user/user.module#UserModule'},  
{ path: '', redirectTo: 'user', pathMatch: 'full'}

export const userRoutes = [
 {
path: '',
children: [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent
  }]