Android webview not rendering CSS and angular

Question

I am trying to load a URL in to android native webview, but it does not render CSS and Angular

CODE:

    WebView wvFAQs = (WebView) mFragmentView.findViewById(R.id.wvUrls);

    Map<String, String> headersMap = new HashMap<>();
    headersMap.put(ApiConstants.AUTHORIZATION, BuildConfig.SS_API_AUTH);
    wvFAQs.setWebViewClient(new WebViewClient() {

        @SuppressWarnings("deprecation")
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }

        @TargetApi(Build.VERSION_CODES.N)
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            return false;
        }
    });
    wvFAQs.getSettings().setJavaScriptEnabled(true);
    wvFAQs.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
    wvFAQs.loadUrl(mUrl,headersMap);

ERRORS:

"Uncaught ReferenceError: _ is not defined",

"Uncaught ReferenceError: angular is not defined",

"Uncaught ReferenceError: $ is not defined",

but this URL works fine in mobile browsers (chrome & default android browser).

when i googled this issue, i came to know that i need to enable html5 support feature in webiew, here is the link, but still not working.

Can anyone tell me what might be the issue? is there any issue with the URL or webview?

Answer 1

I use this Java code to load the webview:

public class MainActivity extends AppCompatActivity {

private WebView view;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    view = (WebView) this.findViewById(R.id.webView);
    view.getSettings().setJavaScriptEnabled(true);
    view.setWebViewClient(new MyBrowser());
    view.loadUrl("file:///android_asset/www/index.html"); //try js alert
    view.setWebChromeClient(new WebChromeClient()); // adding js alert support
}

private class MyBrowser extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KeyEvent.KEYCODE_BACK) && view.canGoBack()) {
        view.goBack(); //method goback()
        return true;
    }

    return super.onKeyDown(keyCode, event);
}

What I can say is if that you use Jquery you need to add it to your assets because external links like from cdn like:

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 

would not load.