Question

如何只在延迟加载模块时刻（通过点击按钮）加载外部lib（例如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中添加import leaflet lib，它正常工作并且没有错误。

我只需要在加载模块中加载libs。我怎么能这样做？

Answer 1

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

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

1 个答案: