时间戳

首页 > 解决方案 > 为什么角度路由器在启动时获取延迟加载的模块？

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

问题描述

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

最初，应用程序应该选择app-routing.module并显示登录页面等。只有当用户被验证并且我以编程方式调用主页 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.

标签： angularsingle-page-applicationangular-routingangular-router

解决方案

角文档说：

任何模块都不应导入延迟加载的路由功能模块。这样做会触发急切加载，从而破坏延迟加载的目的。

发生这种情况是因为您已导入CoreModule. 引用来自：https ://angular.io/guide/module-types ，也可能有用：https ://angular.io/guide/lazy-loading-ngmodulesAppModule




推荐阅读