Question

美好的一天，

我在服务器启动时在我的Angular 2应用程序中遇到此问题（npm start）。

我将基本路由或基本路径重定向到user/login这是一个Lazy Loaded模块，但它会引发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'}
]

应用/ 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 { }

应用/用户/ user.routes.ts

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

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

应用/用户/ 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'}
]

user.routes.ts ：

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

Answer 2

公认的答案根本不是实现lazyLoading的正确方法。这应该是路由机制：

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 3

() =>符号实际上对我有用。下面是关于如何通过编辑我的routes.ts文件来修复它的代码

应用/ 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'} ]

无法在服务器启动时重定向到Lazy Loaded模块作为默认路由/ URL

3 个答案: