带外部库的Angular 2延迟加载模块

Question

如何在延迟加载模块瞬间加载外部库(例如ngx-leaflet) (通过点击相应的按钮)？

我喜欢这样：

app.routing.ts

const appRoutes: Routes = [{
    path: 'gis',
    loadChildren: 'app/gis/gis.module#GisModule',
    canActivate: [AuthGuard]
}];

gis.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// components
import { GisControllerComponent } from './controller/gis.controller.component';

// modules
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';

// routing
import { routing } from './gis.routing';

@NgModule({
  imports: [
    CommonModule,
    routing,
    LeafletModule.forRoot(),
    LeafletDrawModule.forRoot(),
    LeafletMarkerClusterModule
  ],
  declarations: [GisControllerComponent],
  exports: [GisControllerComponent]
})

export class GisModule {}

gis.controller.component.html

<div #MapContainer id="MapContainer">
  <div leaflet id="LeafletMap"
       leafletDraw
       [leafletOptions]="options"
       [leafletDrawOptions]="drawOptions"
       (leafletMarkerClusterReady)="markerClusterReady($event)"
       (leafletMapReady)="onMapReady($event)">
  </div>
</div>

但是当我使用这样的结构时，我得到的错误是我不能使用任何leaflet指令。但是，如果我在app.module.ts中添加导入小叶库，它可以正常工作，并且没有错误。

我只需要在加载模块时刻加载库。我该怎么做呢？

Answer 1

我自己发现了一个错误。我在另外两个组件中使用了leaflet指令，它导致了这个错误。感谢您的参与！