服务器启动时无法默认重定向到延迟加载模块 route/url

Question

大家好，

我的 Angular 2 应用程序在服务器启动 (npm start) 时遇到了这个问题。

我将基本路由或基本路径重定向到 user/login，这是一个延迟加载模块，但它会抛出 Cannot find module 错误。正如我所说，这总是发生，在启动和编辑 'full' 到 'prefix' 的 pathMatch 参数期间，反之亦然修复了错误并加载了没有错误的路由。

我希望你能帮助我。

下面是程序。

app/routes.ts

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';

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

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { appRoutes } from './routes';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app/user/user.routes.ts

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

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

app/user/user.module.ts

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 {}

我希望我已经提供了关于我的问题的足够信息。如果没有，请告诉我。谢谢。

编辑：

我在启动时访问 user/login 时遇到同样的错误。

Answer 1

尝试像这样更改您的 user.module.ts :

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

export class UserModule {}

和routes.ts：

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

还有用户。routes.ts:

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

Answer 2

() => 符号实际上对我有用。下面是我如何通过编辑我的 routes.ts 文件

来修复它的代码

app/routes.ts

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

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

Answer 3

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

 export const appRoutes:Routes = [
    { path: 'user', loadChildren:  () => import('path-to-module').then(m => m.UserModule)},  
    { path: '', redirectTo: 'user', pathMatch: 'full'}
]

接受的答案根本不是实现延迟加载的正确方法。这应该是路由机制：

app.routes.ts

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

]

user.routes.ts

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

} ]

ibenjelloun's回答正确。由于您以某种方式提到它似乎对您不起作用，因此我提供了一种子路由的替代方法。

Answer 4

如果您的用户有家庭组件，这个技巧对我有用：

app.routes.ts

export const appRoutes:Routes = [
  { path: '', redirectTo: 'user', pathMatch: 'full' }
  { path: 'user', loadChildren: () => import('path-to-module').then(m => m.UserModule) }
]

user.routes.ts

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

服务器启动时无法默认重定向到延迟加载模块 route/url

Unable to redirect to Lazy Loaded module as default route/url on server start up

angular

angular-ui-router