在 Angular 中路由不同模块的正确方法是什么？

Question

我有一个包含三个模块的项目：auth、libros 和 prestamo，每个模块都有不同的组件和各自的路由，我有一个用于所有项目的通用路由模块，我的“auth-routing-module”中的代码" 是下一个：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AuthComponent } from '../auth/auth.component';
import { LoginComponent } from '../login/login.component';
import { ForgotPasswordComponent } from '../forgot-password/forgot-password.component';
import { SignUpComponent } from '../sign-up/sign-up.component';

const authRoutes: Routes = [
  { path: 'auth', component: AuthComponent},
  { path: 'login', component: LoginComponent},
  { path: 'forgotPassword', component: ForgotPasswordComponent},
  { path: 'signUp', component: SignUpComponent}
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule, RouterModule.forRoot(authRoutes)
  ], 
  exports: [RouterModule]
})
export class AuthRoutingModule { }

我在其他模块中也有类似的代码，我的“routing-module”中的代码是下一个：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  {path: 'auth', loadChildren:() => import('../auth/auth.module').then(mod => mod.AuthModule)},
  {path: 'libros', loadChildren:() => import('../libros/libros.module').then(mod => mod.LibrosModule)},
  {path: 'prestamos', loadChildren:() => import('../prestamos/prestamos.module').then(mod => mod.PrestamosModule)}
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule, RouterModule.forRoot(appRoutes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最后这是我的“应用程序模块”的代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing/app-routing.module';

import { AppComponent } from './app.component';
import { AuthModule } from './auth/auth.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, AuthModule, AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，当我使用 auth 组件检查导航时，导航正常，但是当我尝试使用其他模块的组件时，出现下一个错误：

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
    at Object.provideForRootGuard [as useFactory] (router.js:5749)
    at Object.factory (core.js:11468)
    at R3Injector.hydrate (core.js:11385)
    at R3Injector.get (core.js:11205)
    at injectInjectorOnly (core.js:4728)
    at Module.ɵɵinject (core.js:4732)
    at Object.RouterModule_Factory [as factory] (router.js:5714)
    at R3Injector.hydrate (core.js:11385)
    at R3Injector.get (core.js:11205)
    at core.js:11242
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28497)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)

这些是我对 Angular 的第一次练习，我不知道什么是“延迟加载模块”，有人可以帮助我吗？

Answer 1

实际上，您可以通过在父路由模块中执行子路由，使其成为惰性加载模块。参考这个：https://angular.io/guide/lazy-loading-ngmodules 这可能对你有帮助

Answer 2

在您的 AuthRoutingModule 和其他两个功能模块中使用 RouterModule.forChild(authRoutes)。

forRoot() 只应与您的根模块一起使用

Answer 3

您不应该在一个应用程序中多次调用 RouterModule.forRoot()。

.forRoot() 只应为根模块中定义的路由调用。对于在任何其他路由模块中定义的路由，您应该调用 .forChild().

所以，只保留AppRoutingModule模块中的.forRoot()，将AuthRoutingModule中的.forRoot(authRoutes)改为.forChild(authRoutes)。对 libros 和 prestamos 模块的路由执行相同的操作。

与错误没有直接关系：
使用您当前的路线定义，要导航到 AuthComponent，您需要路线 /auth/auth。考虑将 AuthRoutingModule 中的路由定义为 -

const authRoutes: Routes = [  
    { path: 'login', component: LoginComponent},
    { path: 'forgotPassword', component: ForgotPasswordComponent},
    { path: 'signUp', component: SignUpComponent},
    { path: '', component: AuthComponent},
];

这将使 'auth' 成为 auth 模块的默认路由，并显示带有路由 /auth 的 AuthComponent。对其他两个惰性模块采用类似的方法。

在 Angular 中路由不同模块的正确方法是什么？

What is the correct way of routing different modules in Angular?

angular

angular2-routing