为什么 angular 路由器在启动时获取延迟加载的模块？

Question

我正在尝试使用 Angular 7 版本设置一个新的 Angular 项目。我创建了一个 CoreModule，其中包含登录页面、忘记密码页面等组件。

最初应用程序应该选择 app-routing.module 并且应该显示登录页面等。只有当用户通过验证并且我以编程方式调用 home URL 时，CoreModule 应该被延迟加载，它有自己的路由以显示应用程序中的各种页面。

但是目前，当应用程序为 url localhost:4200 加载时，尽管 CoreModule 是延迟加载的，但该应用程序会在 CoreModule 中显示模块中提到的页面。

为什么会这样？有人可以帮我知道我做错了什么吗？

下面是我的各种相关文件。我刚刚开始，所以代码很少。请看一下，如果还有什么需要了解的，请告诉我。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './core/components/login/login.component';

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    loadChildren: './core/core.module#CoreModule',
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

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

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { WagonnHeaderComponent } from './components/wagon-header/wagon-header.component';
import { CoreRoutingModule } from './core-routing.module';

@NgModule({
  declarations: [
    WagonnHeaderComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    CoreRoutingModule
  ],
  exports: [
    WagonnHeaderComponent
  ]
})
// this is the core module for our app. All the components or services
// whose single instance is required shall be exported from this module
export class CoreModule {

  // prevents multiple imports of this module
  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule has already been loaded. You should only import Core modules in the AppModule.');
    }
  }

 }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

const coreRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'home/dashboard',
        loadChildren: '../dashboard/dashboard.module#DashboardModule'
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(coreRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class CoreRoutingModule { }

我在 localhost:4200 启动时看到的页面是写在 html home.component.html 而我希望看到写在 login.component.html.

中的那个

Answer 1

Angular 文档说：

A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.

发生这种情况是因为您在 AppModule 中导入了 CoreModule。

引用来自：
https://angular.io/guide/module-types
and also can be useful:
https://angular.io/guide/lazy-loading-ngmodules

为什么 angular 路由器在启动时获取延迟加载的模块？

Why is the angular router fetching the lazy loaded module at startup?

single-page-application

angular-routing

angular

angular-router