WebView element error undefined is not an object (evaluating 'this.oLangWebViewInterface.callJSFunction'

[BJacob7]

hi , since i upgrade my env to nativescript 6.0.0 im having trouble to run webview
im getting and error on callJSFunction
undefined is not an object (evaluating 'this.oLangWebViewInterface.callJSFunction')

import { WebView, LoadEventData } from 'tns-core-modules/ui/web-view/'; create : let webViewInterfaceModule = require('nativescript-webview-interface');

hild: @ViewChild('installationWebView', {static: false}) webView: ElementRef;

object: private oLangWebViewInterface;

ngAfterViewInit() {

this.setupWebViewInterface();

}

function private setupWebViewInterface() {
let webView: WebView = this.webView.nativeElement;
this.oLangWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');

if (webView.android) { // in IOS android will be undefined
    webView.android.getSettings().setBuiltInZoomControls(false);
}

// loading devices in dropdown, on load of webView.
webView.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
    let message: string;
    if (!args.error) {
        message = `WebView finished loading of ${args.url}`;

    } else {
        message = `Error loading ${args.url} : ${args.error}`;
    }
    console.log(`WebView message - ${message}`);
});

this.listenLangWebViewEvents();

}

connect to device function :

private connectToDevice() {
//this.isConnecting = true;
this.oLangWebViewInterface.callJSFunction('connectToDevice', null, (response: any) => {
console.log(JSON.stringify(response));

});

}

[BJacob7]

i try to change the code to this
public onWebViewLoaded(webargs: any) {
const webview: WebView = webargs.object;
console.log("onWebViewLoaded() " + webview);
this.oLangWebViewInterface = new WebViewInterface(webview, '~/www/index.html');
// if (webView.android) { // in IOS android will be undefined
// webView.android.getSettings().setBuiltInZoomControls(false);
// }
webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
let message = "";
if (!args.error) {
message = WebView finished loading of ${args.url};
} else {
message = Error loading ${args.url} : ${args.error};
}
console.log(WebView message - ${message});
});
this.listenLangWebViewEvents();
}

<WebView row="0" (loaded)="onWebViewLoaded($event)" height="1px" width="1px">

import { WebViewInterface } from 'nativescript-webview-interface';
import { WebView, LoadEventData } from 'tns-core-modules/ui/web-view';

and know i only have problem with the

WebView message - Error loading ~/www/index.html : The requested URL was not found on this server.

[wiedikerli]

@BJacob7 have you found the issue?

[Eonfuzz]

I'm also getting this error. I'll post an update if I can find a way around it.

[wiedikerli]

@Eonfuzz this is my solution

ngAfterViewInit() {
    const view = this.page.getViewById<WebView>(this.id);
    let instance: WebViewInterface = null;

    if (isIOS) {
        view.src = this.html;
    } else {
        instance = new WebViewInterface(view, this.html);
    }

    view.on('loadFinished', () => {
        if (view.ios) {
            instance = new WebViewInterface(view);
            view.ios.scrollView.bounces = false;
        }
    }
}

[Eonfuzz]

Thanks @ninjaonsafari. Do you ever try to invoke a js webview function? I still run into undefined is not an object (evaluating 'this.oLangWebViewInterface.callJSFunction') while following your setup

[Eonfuzz]

So it turns out this.oLangWebViewInterface.callJSFunction' is defined and the recent changes to webpack-dev in the new angular version caused the HTML files to not exist in the built app.

Update webpack.config.js to directly include the html file like so:

            new CopyWebpackPlugin([
                { from: "app-common/www/measuring/dist/index.html" }, <- Important Part
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.jpg" } },
                { from: { glob: "**/*.png" } },
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

(See this issue for more details NativeScript/nativescript-dev-webpack#718)

But now I've gone and run into a seperate issue where executeJS isn't actually executing the JS inside the webview on iOS.