1

I want to know how can we lazy load JSON files in angular application. As per my understanding, static content in assets folder is loaded by default at the time of initial rendering only and is present in browser memory. I want only specific JSON files to be loaded in browser on demand. Can someone please explain how to do that.

Improve this question
4
  • 1
    As per my understanding, static content in assets folder is loaded by default at the time of initial rendering only and is present in browser memory where did you got this from? Commented Sep 26, 2019 at 11:14
  • I placed some JSON files in asset folder. In my HTML i put a button, on clicking which some attributes of this JSON will be displayed. While running application on IE i checked memory, before and after clicking the button. It did not change significantly. Also i came across strategies which need to be implemented explictly if we want to lazy load the assets. So i concluded that by default, the assets must be loaded in browser at the time of initial loading, before requested. Please correct me if i am wrong. Commented Sep 27, 2019 at 4:58
  • 1
    In your example, if you imported that JSON into your component file then of course it won't be lazily loaded as the import statement is resolved on the build step. Update your question with a concrete use case. But I can almost totally sure tell you that your understanding is wrong. Commented Sep 27, 2019 at 7:11
  • Thanks Jota, this helped clear my understanding. I had imported the file. Now i am trying to access the JSONs as an HTTP resource with their URL on click inside my .ts file and i can see the JSON appear in network tab in dev tools on clicking the button. Hence i can conclude that the JSONs are being lazily-loaded on demand. Commented Sep 27, 2019 at 9:22

1 Answer 1

Reset to default
1

It is not mandatory to place all your static content inside assets folder of the app module. you can create assets folder at module level. so that those content will be loaded when the module is loaded. 

app/
    modules/
        module_1/
            assets/
                images/
                    image_module_1.png
            module_1.component.ts
            module_1.module.ts
        module_2/
            assets/
                images/
                    image_module_2.png
            module_2.component.ts
            module_2.module.ts
    app.module.ts

In case of above hierarchy if module_2 is lazy loaded then the assets will also be downloaded when module is loaded.

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

1 Comment

Thanks Yash. Please have a look at the above comments with the question. I suppose no need for any specific solution here as angular loads the required assets only. Rest all resources are loaded on demand. This seems to be the default behavior.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.