2017-10-31 24 views
0

遅延ロードモジュールの瞬間(ボタンに応じてクリックする)で外部lib(例:ngx-leaflet)をロードするにはどうすればよいですか?外部ライブラリを使用した角度2の遅延ロードモジュール

私はこのように行った:

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をロードする必要があります。これどうやってするの?

+0

あなたは 'リーフレットディレクティブ'を使っていますか? –

+0

'gis.routing.ts'も共有してください。 – akashpandey

答えて

0

私は間違いを発見しました。リーフレットディレクティブを他の2つのコンポーネントで使用し、そのエラーが発生しました。参加していただきありがとうございます!

関連する問題