Got Injection "$services" not found on IE11 and got DOMException on Chrome if using vuelayers@0.11.1

Dear all: My web site is included the following js: https://openlayers.org/en/v4.6.5/build/ol.js https://unpkg.com/vuelayers@0.10.7/lib/index.umd.min.js

It works well on Chrome but there is an error - Injection "$services" not found on IE11. Then I found the similar issue: https://github.com/ghettovoice/vuelayers/issues/91 and added https://unpkg.com/vuelayers@0.11.1/lib/index.umd.js also with https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js to my project and removed the older version js and then the Injection "$services" not found error 'disappeared' on IE11. It seems good!!

However, I zoom in at level 15(or above). The map and vl-layer-vectors disappear and then I zoom out at level 14 (or below) and there are some errors appearing on IE11: [Vue warn]: Error in nextTick: "NotFoundError" and [object DOMException] PS: I have set v-if="zoom >= 15" to show vl-geom-line-strings (wrapped in vl-layer-vector) and v-if="zoom < 15" to show vl-geom-multi-polygons (wrapped in vl-layer-vector) in my codes.

Then do the same actions on Chrome... The map and vl-layer-vectors still exist while zooming in at level 15 (or above) and zooming out at level 14 (or below), the vl-geom-line-strings still keep on map and the vl-geom-multi-polygons are not shown, and the errors are: vue.js:597 [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." and vue.js:1743 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

What should I do if I want the function works well on both Chrome and IE11? Hope someone helps me, please. I will appreciate it very much.

In my webpage, there are several vl-overlays under the vl-map. There are always errors on IE11 and it works well on Chrome after some testing. Then I survey the vuelayers demo codes: https://github.com/ghettovoice/vuelayers-demo/blob/master/src/App.vue#L497

Finally, I got a keypoint: overlay binded to feature So after including the latest vuelayers and ol js version, I let those vl-overlays bind to their own vl-feature respectively. Then there is no any more error on IE11.

Hi @jerry1108 , sorry for the late response, I was a bit busy last days.

Have still experience some issues like you describe above? It would be helpful for me to understand whats wrong, if you dump here your component source code where you are using map.

Hi @ghettovoice Here is part of my original source codes: (got errors on IE11: [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." and DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. )

<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" :controls="false" class="map-canvas" ref="map" v-on:click="onMouseClick"  v-on:pointermove="onPointerMove" v-on:mounted="onMapMounted" data-projection="EPSG:4326" :style="{cursor: mapCursor}">
<vl-view ref="view" :zoom.sync="zoom" :center.sync="center" :enable-rotation="false" :min-zoom="minZoom" :max-zoom="maxZoom" projection="EPSG:3857"></vl-view>

    <vl-overlay :position="[selectedPointFeatures.Longitude, selectedPointFeatures.Latitude]" :offset="[0, -10]" :positioning="'bottom-center'" :key="selectedPointFeatures.DeviceID" :id="selectedPointFeatures.DeviceID" v-if="zoom >= 20 && displayLayer.Parking == true">
        <div class="map-Info-area dec-tabs" style="position:relative;z-index:99;">
            <div class="top-box">
                <div class="box-tilte">
                    <div class="dec-type">
                        {{selectedPointFeatures.LineName}}
                    </div>
                </div>
                <div class="box-btn">
                    <a href="#" class="iconSVG ic_f_close_dark fa-lg" v-on:click="clearSelectedPointFeatures"></a>
                </div>
            </div>                            
            <div class="con-box">
                <div class="con-parkingInfo">
                    <div class="con-info">
                        <div class="box-01">
                            ...
                        </div>                      
                    </div>
                </div>
            </div>
        </div>
    </vl-overlay>

    <vl-overlay :position="selectedLineFeatures.Position" :offset="[0, -9]" :positioning="'bottom-center'" :key="selectedLineFeatures.LineId" :id="selectedLineFeatures.LineId" v-if="checkLineShow()">
        <div class="map-Info-area dec-tabs" style="position:relative;z-index:99;">
            <div class="top-box">
                <div class="box-tilte">
                    <div class="dec-type">
                        {{selectedLineFeatures.LineName}}
                    </div>
                </div>
                <div class="box-btn">
                    <a href="#" class="iconSVG ic_f_close_dark fa-lg" v-on:click="clearSelectedLineFeatures"></a>
                </div>
            </div>
            <div class="con-box">                    
                <div class="con-parkingInfo">
                    <div class="con-info custom-scrollbar">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </vl-overlay>

    @*Devices*@
    <div v-for="(device, index) in overlays.AllDevices" :key="'markers_'+ device.Id">  
        <vl-feature :id="'device_'+ device.Id" :properties="device" v-if="zoom >= 20 && displayLayer.Parking == true">
            <vl-geom-point :coordinates="[device.Lon, device.Lat]"></vl-geom-point>
            <vl-style-box>
                <vl-style-circle :radius="16">
                    <vl-style-fill :color="device.Color"></vl-style-fill>
                </vl-style-circle>
            </vl-style-box>
                </vl-feature>              
    </div>

    <vl-layer-tile id="osm">
        @*<vl-source-osm></vl-source-osm>*@
        <vl-source-xyz url="https://www.google.com.tw/maps/vt/lyrs=m&x={x}&y={y}&z={z}"></vl-source-xyz>                    
    </vl-layer-tile>

    @*Lines fearues*@
    <vl-layer-vector v-for="(feature, index) in overlays.AllLines.features" :key="'line_'+ feature.properties.Id">                        
        <vl-source-vector :id="'vl_'+ index">                                
            <vl-feature :id="'line_'+ feature.properties.Id" :properties="feature.properties" v-if="checkLineShow()">
                <vl-geom-line-string :coordinates="feature.geometry.coordinates"></vl-geom-line-string>
                    <vl-style-box>
                        <vl-style-stroke :color="setLineColor(feature.properties)" :width="3"></vl-style-stroke>
                    </vl-style-box>
            </vl-feature>
            <vl-overlay :position="feature.properties.CenterPosition" v-if="checkSpaceCountShow(feature.properties)">                    
                <div :class="{'_offset': feature.properties.Direction == '/'}" class="box-mapMarker-Area" style="z-index:0 !important">
                    <div class="box-mapMarker" v-on:click="clickOnSpace(feature.properties)">
                        <div class="ic-mapMarker ic_01"></div>
                        <div class="dec-type">{{feature.properties.Total - feature.properties.Occupied}}</div>
                    </div>
                </div>                                
            </vl-overlay>                                                         
        </vl-source-vector>                                          
    </vl-layer-vector> 

    @*Towns(using geojson)*@
    <vl-layer-vector v-for="(feature, index) in overlays.Towns.features" :key="'yilan_'+ index">                        
        <vl-source-vector ref="vectorSource" :id="'vector_'+ index">                                
            <vl-feature :id="'yilan_'+ index" v-if="(!isMobile) ? zoom < 15 : zoom < 13">
                <vl-geom-multi-polygon :coordinates="feature.geometry.coordinates"></vl-geom-multi-polygon>
                    <vl-style-box>
                        <vl-style-stroke :color="setStrokeColor(feature.properties.TOWN_)" :width="1"></vl-style-stroke>
                        <vl-style-fill :color="feature.properties.color"></vl-style-fill>
                    </vl-style-box>
            </vl-feature>
            <vl-feature v-for="(marker, idx) in townMarker" :id="'town_'+ idx" :key="'town_'+ idx" v-if="(!isMobile) ? zoom < 15 : zoom < 13">
                <vl-geom-point :coordinates="marker.coordinates" :positioning="'bottom-center'"></vl-geom-point>
                <vl-style-box>
                    <vl-style-icon :src="marker.img" :anchor="[0.5, 1]"></vl-style-icon>
                </vl-style-box>
            </vl-feature>
        </vl-source-vector>                                          
    </vl-layer-vector>
</vl-map>

And the following codes works on IE11... ( let those vl-overlays bind to their own vl-feature respectively. )


<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" :controls="false" class="map-canvas" ref="map" v-on:click="onMouseClick"  v-on:pointermove="onPointerMove" v-on:mounted="onMapMounted" data-projection="EPSG:4326" :style="{cursor: mapCursor}">
<vl-view ref="view" :zoom.sync="zoom" :center.sync="center" :enable-rotation="false" :min-zoom="minZoom" :max-zoom="maxZoom" projection="EPSG:3857"></vl-view>  

    @*Devices*@
    <div v-for="(device, index) in overlays.AllDevices" :key="'markers_'+ device.Id">  
        <vl-feature :id="'device_'+ device.Id" :properties="device" v-if="zoom >= 20 && displayLayer.Parking == true">
            <vl-geom-point :coordinates="[device.Lon, device.Lat]"></vl-geom-point>
            <vl-style-box>
                <vl-style-circle :radius="16">
                    <vl-style-fill :color="device.Color"></vl-style-fill>
                </vl-style-circle>
            </vl-style-box>
            <vl-overlay :position="[selectedPointFeatures.Longitude, selectedPointFeatures.Latitude]" :offset="[0, -10]" :positioning="'bottom-center'" :key="selectedPointFeatures.DeviceID" :id="selectedPointFeatures.DeviceID" v-if="zoom >= 20 && displayLayer.Parking == true">
                <div class="map-Info-area dec-tabs" style="position:relative;z-index:99;">
                    <div class="top-box">
                        <div class="box-tilte">
                            <div class="dec-type">
                                {{selectedPointFeatures.LineName}}
                            </div>
                        </div>
                        <div class="box-btn">
                            <a href="#" class="iconSVG ic_f_close_dark fa-lg" v-on:click="clearSelectedPointFeatures"></a>
                        </div>
                    </div>                            
                    <div class="con-box">
                        <div class="con-parkingInfo">
                            <div class="con-info">
                                <div class="box-01">
                                    ...
                                </div>                      
                            </div>
                        </div>
                    </div>
                </div>
            </vl-overlay>
        </vl-feature>
    </div>

    <vl-layer-tile id="osm">
        @*<vl-source-osm></vl-source-osm>*@
        <vl-source-xyz url="https://www.google.com.tw/maps/vt/lyrs=m&x={x}&y={y}&z={z}"></vl-source-xyz>                    
    </vl-layer-tile>

    @*Lines fearues*@
    <vl-layer-vector v-for="(feature, index) in overlays.AllLines.features" :key="'line_'+ feature.properties.Id">                        
        <vl-source-vector :id="'vl_'+ index">                                
            <vl-feature :id="'line_'+ feature.properties.Id" :properties="feature.properties" v-if="checkLineShow()">
                <vl-geom-line-string :coordinates="feature.geometry.coordinates"></vl-geom-line-string>
                    <vl-style-box>
                        <vl-style-stroke :color="setLineColor(feature.properties)" :width="3"></vl-style-stroke>
                    </vl-style-box>
            </vl-feature>
            <vl-overlay :position="feature.properties.CenterPosition" v-if="checkSpaceCountShow(feature.properties)">                    
                <div :class="{'_offset': feature.properties.Direction == '/'}" class="box-mapMarker-Area" style="z-index:0 !important">
                    <div class="box-mapMarker" v-on:click="clickOnSpace(feature.properties)">
                        <div class="ic-mapMarker ic_01"></div>
                        <div class="dec-type">{{feature.properties.Total - feature.properties.Occupied}}</div>
                    </div>
                </div>                                
            </vl-overlay>
            <vl-overlay :position="selectedLineFeatures.Position" :offset="[0, -9]" :positioning="'bottom-center'" :key="selectedLineFeatures.LineId" :id="selectedLineFeatures.LineId" v-if="checkLineShow()">
            <div class="map-Info-area dec-tabs" style="position:relative;z-index:99;">
                <div class="top-box">
                    <div class="box-tilte">
                        <div class="dec-type">
                            {{selectedLineFeatures.LineName}}
                        </div>
                    </div>
                    <div class="box-btn">
                        <a href="#" class="iconSVG ic_f_close_dark fa-lg" v-on:click="clearSelectedLineFeatures"></a>
                    </div>
                </div>
                <div class="con-box">                    
                    <div class="con-parkingInfo">
                        <div class="con-info custom-scrollbar">
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </vl-overlay>
        </vl-source-vector>                                          
    </vl-layer-vector> 

    @*Towns(using geojson)*@
    <vl-layer-vector v-for="(feature, index) in overlays.Towns.features" :key="'yilan_'+ index">                        
        <vl-source-vector ref="vectorSource" :id="'vector_'+ index">                                
            <vl-feature :id="'yilan_'+ index" v-if="(!isMobile) ? zoom < 15 : zoom < 13">
                <vl-geom-multi-polygon :coordinates="feature.geometry.coordinates"></vl-geom-multi-polygon>
                    <vl-style-box>
                        <vl-style-stroke :color="setStrokeColor(feature.properties.TOWN_)" :width="1"></vl-style-stroke>
                        <vl-style-fill :color="feature.properties.color"></vl-style-fill>
                    </vl-style-box>
            </vl-feature>
            <vl-feature v-for="(marker, idx) in townMarker" :id="'town_'+ idx" :key="'town_'+ idx" v-if="(!isMobile) ? zoom < 15 : zoom < 13">
                <vl-geom-point :coordinates="marker.coordinates" :positioning="'bottom-center'"></vl-geom-point>
                <vl-style-box>
                    <vl-style-icon :src="marker.img" :anchor="[0.5, 1]"></vl-style-icon>
                </vl-style-box>
            </vl-feature>
        </vl-source-vector>                                          
    </vl-layer-vector>
</vl-map>

Later, I implemented another data-setting webpage which is embeded with a simple ol-map also using vuelayers that 90% of functions are the same as my main ol-map webpage. (the common _Layout are added with babel.js, es6-promise.min.js and polyfill.min.js)

I fully copy the codes to another new cshtml and add the same ol.js and index.umd.js version. It should be work on all browsers, but unfortunately there are some errors on IE11. (still wors well on Chrome and Edge)

I got the first error: [Vue warn]: Error in nextTick: TypeError: Object doesn't support property or method 'includes'

Then I try to add polyfill: Array.prototype.includes to the script block... and then there are many errors showing on the IE console: [Vue warn]: Error in getter for watcher "resolvedDataProjection": Object doesn't support property or method 'find' found in

---> <VlView> at view.vue
<VlMap> at map.vue
<Root>

---> <VlGeomPoint> at geom.vue
<VlFeature> at feature.vue
<VlMap> at map.vue
<Root>

.... a lot of similar errors and also with many these errors Unhandled promise rejection TypeError: Object doesn't support property or method 'find' ............ Unhandled Promise rejection: TypeError: Cannot read property 'has' of undefined or Null ............

What's wrong with my webpage? ><

Try to include full ES2015 shim lib like 'https://babeljs.io/docs/en/babel-polyfill'. It adds all missed array prototype methods.

@ghettovoice
Thank you so much~ :)) Well Done!!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ghettovoice / vuelayers

Got Injection "$services" not found on IE11 and got DOMException on Chrome if using vuelayers@0.11.1 #161