Почему угловой маршрутизатор выбирает лениво загруженный модуль при запуске? - PullRequest
Новая
       36

Почему угловой маршрутизатор выбирает лениво загруженный модуль при запуске?

0 голосов
/ 18 июня 2019

Я пытаюсь установить новый проект Angular с версией Angular 7. Я создал 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.

1 Ответ

1 голос
/ 18 июня 2019

Angular docs говорит:

Ленивый загруженный маршрутизированный функциональный модуль не должен импортироваться никаким модулем.Это вызвало бы активную загрузку, отказавшись от цели отложенной загрузки.

Это происходит потому, что вы импортировали CoreModule в AppModule.

Цитата:
https://angular.io/guide/module-types
, а также может быть полезным:
https://angular.io/guide/lazy-loading-ngmodules

...