Nativescript 5.0 - displaying react/angular webapp read from local path inside WebView component on Android

Question

It is possible to display an react/angular web application on WebView component ?

I build angular(angular cli) and react application in prod mode. Next, prepared files I put inside ./assets folder. After changes inside webpack.config.js and run tns run android --bundle than nothing is shown beside of static texts.

home.component.tns.html

 <GridLayout>
     <WebView src="~/assets/seatmap/index.html"></WebView>
 </GridLayout>

home.component.tns.html

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>t</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" href="styles.x.css"></head>
 <body>
     <img src="favicon.ico"> // not displayed
     <img src="./favicon.ico"> // displayed
     <app-root></app-root> // nothing is displayed
     <b>This text is displayed</b>
     <script type="text/javascript" src="runtime.x.js"></script>
     <script type="text/javascript" src="polyfills.x.js"></script>
     <script type="text/javascript" src="main.x.js"></script>
 </body>
 </html>

Javascript files are loaded. There is no problem with path. When I change src to any external web site (src="http://facebook.com") everything is ok.

Manoj · Accepted Answer · 2018-11-17 21:41:34Z

0

Duplicate of NativeScript WebView loading local resources in src document

It's known issue with iOS, please refer my answer there which includes possible workarounds.

answered Nov 17, 2018 at 21:41

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

wolfpack Over a year ago

Thanks Manoj, I have problem on Android, so similar solution should I apply like you suggested for iOS ?

Manoj Over a year ago

For Android, the path has to be absolute.

wolfpack Over a year ago

After investigation I have found reason why web application written in Angular didn`t display on WebView component well. Just, wrong command used for build angular application. If anyone meet similar problem, try to build angular application in following command : ng build --base-href='./' --prod.

Collectives™ on Stack Overflow

Nativescript 5.0 - displaying react/angular webapp read from local path inside WebView component on Android

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related