带有外部库的 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>

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

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

Answer 1

我自己发现了一个错误。我在其他 2 个组件中使用了传单指令，它导致了该错误。感谢您的参与！