触发模块延迟加载手动角度7

Question

官方文档有很多关于如何懒洋洋地加载角度模块的信息。 [link here]

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

当用户访问/customers或/orders路由时，这基本上会使模块加载。

但是，我无法弄清楚如何从另一个模块加载模块。

在我的应用程序中，我有这些模块：

• AUTH
• 核心
• 事件
• flash消息

我的auth module（个人资料页面）的一条路线必须使用events module的ngrx商店。

我的代码看起来像这样：

import { Observable } from 'rxjs';

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';

import { AppState } from '../../app.store';
import { IUser } from '../auth.api.service';
import { selectUser } from '../store/auth.selectors';
import { IEvent } from '../../events/events.api.service';
import { selectAllEvents, selectIsLoading } from '../../events/store/events.selectors';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
  isLoading$: Observable<boolean>;
  events$: Observable<IEvent[]>;
  user$: Observable<IUser>;

  constructor(
    private store: Store<AppState>,
  ) {
    this.user$ = this.store.select(selectUser);
    this.isLoading$ = this.store.select(selectIsLoading);
    this.events$ = this.store.select(selectAllEvents);
  }

  ngOnInit() {
  }

}

但是，正如您所料，此代码不起作用。因为../../events尚未加载。如何手动加载模块？就像是：

constructor(
  private store: Store<AppState>,
) {
  this.user$ = this.store.select(selectUser);
  this.loadModule('../../events/events.module.ts').then(() => {
    this.isLoading$ = this.store.select(selectIsLoading);
    this.events$ = this.store.select(selectAllEvents);  
  })
}

Answer 1

Angular CLI捆绑器基于两件事捆绑了模块：

1）如果您为延迟加载（loadChildren）设置了模块，它将单独捆绑模块并提供它。

2）但是，如果在任何其他模块中有任何对延迟加载模块的引用（通过将其添加到其imports数组中），它会将模块与引用的组件捆绑在一起。

所以应该发生的事情是，如果您的事件模块是从组件引用的，那么它应该与该组件捆绑在一起。

您是否在imports数组中为包含引用它的组件的模块引用了模块？

你到底有什么错误？

顺便说一句 - 我在本次演讲的“延迟加载”部分介绍了这一点：https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=1120s

Answer 2

您无需担心加载../../events。由于您具有import语句，因此模块中将提供类/接口。如果由于某种原因，您想要使用其他模块的功能，可以在imports声明中的@NgModule数组中添加模块名称。