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

alv*_*nte 2 angular-ui-router angular

各位,美好的一天,

服务器启动时,我的 Angular 2 应用程序中遇到此问题 ( npm start)。

我将基本路由或基本路径重定向到user/login延迟加载模块,但它会引发Cannot find module错误。正如我所说,这种情况总是会发生,在启动期间并pathMatch'full'到编辑参数'prefix',反之亦然,可以修复错误并加载路线而不会出现错误。

我希望你能帮我解决这个问题。

下面是程序。

应用程序/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'}
]
Run Code Online (Sandbox Code Playgroud)

应用程序/应用程序模块.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 { }
Run Code Online (Sandbox Code Playgroud)

应用程序/用户/user.routes.ts

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

export const userRoutes = [
    { path: 'login', component: LoginComponent }
]
Run Code Online (Sandbox Code Playgroud)

应用程序/用户/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 {}
Run Code Online (Sandbox Code Playgroud)

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

编辑:

当我启动时访问时,我遇到了同样的错误user/login

Ari*_*awn 8

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

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

接受的答案根本不是实现lazyLoading的正确方法。这应该是路由机制:

应用程序.routes.ts

export const appRoutes:Routes = [
{ path: 'user', loadChildren:  'user/user.module#UserModule'},  
{ path: '', redirectTo: 'user', pathMatch: 'full'}
Run Code Online (Sandbox Code Playgroud)

]

用户.routes.ts

export const userRoutes = [
 {
path: '',
children: [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent
  }]
Run Code Online (Sandbox Code Playgroud)

}]

伊本杰隆的回答是正确的。既然您提到它似乎对您不起作用,我就给出了一种使用子路线的替代方法。

  • 请注意,使用字符串值加载惰性模块[自 Angular 8 起已弃用](https://angular.io/guide/deprecations#loadchildren-string-syntax)。延迟加载模块的正确方法是使用 `import()` 函数: `loadChildren: () => import('./user/user.module').then(m => m.UserModule)` (2认同)