在生产构建中未定义矢量层

Question

我在Angular项目上使用openmap，当与ng-serve测试时，它运行良好。但是，在我使用ng-build构建项目之后，我不断收到此错误：

  

消息“错误ReferenceError：在l.initilizeMap（14.js：1）中未定义VectorLayer       在l.ngOnInit（14.js：1）”。

我尝试搜索错误原因，但仍然找不到。

这是我的示例代码：

HTML

<div #myMapRef id="mapcontainer"></div>

TS

//map
    import Map from 'ol/Map';
    import OSM from 'ol/source/OSM';
    import View from 'ol/View';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {fromLonLat, toLonLat} from 'ol/proj.js';
    //marker
    import Feature from 'ol/Feature.js';
    import Point from 'ol/geom/Point.js';
    import VectorSource from 'ol/source/Vector';
    //custom marker
    import {Icon, Style} from 'ol/style';
    //interaction
    import Translate from 'ol/interaction/Translate';
    import Collection from 'ol/Collection';
    import {defaults as defaultInteractions, Pointer as PointerInteraction} from 'ol/interaction.js';

export class .....

    @ViewChild('myMapRef')
    myMap: ElementRef;
constructor(....)
ngOnInit() {
    this.paramMap = this.route.snapshot.paramMap.get('mode');
    this.myFormGroup = this.formBuilder.group({
        JobLocationCode:['',Validators.required],
        Description:['',Validators.required],
        Lat:['',Validators.required],
        Lng:['',Validators.required],
        Status:['1']
    });
    this.mapFormGroup = this.formBuilder.group({
        Place:['']
    });
    this.mapFormGroup.get('Place').valueChanges
    .pipe(debounceTime(200),distinctUntilChanged())
    .subscribe(data => {
        if(data && data.length>=3){
            this.http.get('http://photon.komoot.de/api/?q='+data+'&limit=5').subscribe(result => {
                console.log(result);
                this.placelist=result['features'];
            });
        }else{
            this.placelist=[];
        }
    });
    this.source = new VectorSource({});
    this.markCollection = new Collection([]);
    this.translate1 = new Translate({
        features: this.markCollection
    });
    this.markerPoint = new Point(fromLonLat([myGlobal.defaultLocation.lng,myGlobal.defaultLocation.lat]));
    this.initilizeMap();

    //set google maps defaults
    this.zoom = myGlobal.defaultLocation.zoom;
    this.latitude = myGlobal.defaultLocation.lat;
    this.longitude = myGlobal.defaultLocation.lng;

    //set current position
    this.setCurrentPosition();
}
initilizeMap() {
    var styles = {
        'icon': new Style({
            image: new Icon({
                anchor: [0.5, 1],
                src: 'assets/poin.png'
            })
        })
    };
    var parent=this;
    var layer = new VectorLayer({ 
        source: this.source,
        style: function(feature) {
            return styles[feature.get('type')];
        }
    });

    this.map = new Map({
        target: 'mapcontainer',
        layers: [
        new TileLayer({
            source: new OSM()
        })
        ],
        view: new View({
            center: [0,0],
            zoom: 18
        })
    });

    this.map.addLayer(layer );
    var marker = new Feature({
        type: 'icon',
        geometry: this.markerPoint
    }); 

    this.markCollection.push(marker);

    this.source.addFeature(marker);
    this.map.addInteraction(this.translate1);

    this.translate1.on('translatestart', function (evt) {
        console.log("start:...");
        var temp =toLonLat(evt.coordinate);
        console.log(temp);
    });
    this.translate1.on('translateend', function (evt) {
        console.log("end:...");
        var temp = <Point>evt.features.getArray()[0].getGeometry();
        var coord =toLonLat(temp.getCoordinates());
        console.log(temp);
        parent.setCoordinates(coord);
    });
    console.log(marker.getGeometry());
    this.map.on('singleclick', function (evt) {
        console.log(evt);
        console.log(evt.coordinate);
        parent.markerPoint.setCoordinates(evt.coordinate);
        parent.setCoordinates(toLonLat(evt.coordinate));
    });
    this.map.getView().setCenter(fromLonLat([myGlobal.defaultLocation.lng,myGlobal.defaultLocation.lat]), myGlobal.defaultLocation.zoom);
}