3

With a NativeScript iOS and Android app using Angular, how do I load, inside of a WebView, a locally stored html file that has JS and CSS references? I am able to display the WebView but I get the error that the file is not found because I do not know where to point the src from my component.

Currently I have the files inside src/assets and in there is the index.html

Is there a more appropriate place to store these files within the app? Is there a better way to display this than a WebView? How do I reference this file as the source of a WebView?

I will also be needing to know how to reference a file the app downloads. Where does iOS and Android store downloaded files from within the app? How do i reference these files from my WebView?

Thank you.

Improve this question
5
  • 1
    Use absolute paths to load files. Possible duplicate of stackoverflow.com/questions/53309673/…, check the example and linked Github issue. Commented Dec 11, 2018 at 22:18
  • @Manoj how do I know what the absolute path is of a bundled folder in assets or of a downloaded file? I know what an absolute path is, but I can't seem to find out what that path is. I am using an emulator...also thank you for the link. This is not a duplicate of that because the issue is not a bug - I am asking to know what the absolute path to a folder is that is bundled and also downloaded and how to put that as the src of a WebView. Thank you. Commented Dec 12, 2018 at 15:15
  • 1
    You have everything you need form the Playground example linked, it was demonstrating on loading an external image. I even double checked with external JS files and it works the same way. If you are packaging your HTML / JS / Images within app, then all you have to do is to use app directory instead of temp directory. Commented Dec 12, 2018 at 15:51
  • @Manoj Thank you. It was the use of 'tns-core-modules/file-system' that allowed me to locate the proper file path. I appreciate your help! Commented Dec 12, 2018 at 20:29
  • Glad, you figured it out. Added same as answer. Commented Dec 12, 2018 at 20:33

2 Answers 2

Reset to default
3

You have to use absolute path while importing local JS / CSS / Image into WebView. Here is a Playground sample. Unlike the given example if you want to load files those are packed with app, simply use app directory instead with right path to file.

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

Comments

1

I'm using path like:

src='~/assets/player.iframe.html'

And in the webpack.config.js I just added

new CopyWebpackPlugin([
                { from: { glob: "assets/**" } },          <= Added this row
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.jpg" } },
                ...
Improve this answer

1 Comment

also, in tsconfig.json there's a "paths" key. which describe what each ~ is mapped to. i.e in my new project it's now "~/*: "src/*" so now the path to such image ( w/o webpack change ) will be: ~/app/assets/... as ~ is the root.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.