如何在角度应用程序中延迟加载静态 JSON答案

【问题标题】：How to lazy load static JSON in angular application如何在角度应用程序中延迟加载静态 JSON
【发布时间】：2020-01-26 15:47:06
【问题描述】：

我想知道如何在 Angular 应用程序中延迟加载 JSON 文件。据我了解，assets 文件夹中的静态内容仅在初始渲染时默认加载，并且存在于浏览器内存中。我只希望在浏览器中按需加载特定的 JSON 文件。有人可以解释一下如何做到这一点。

【问题讨论】：

据我了解，assets 文件夹中的静态内容仅在初始渲染时默认加载，并且存在于浏览器内存中你从哪里得到这个？
我在资产文件夹中放置了一些 JSON 文件。在我的 HTML 中，我放置了一个按钮，单击该按钮将显示此 JSON 的某些属性。在 IE 上运行应用程序时，我在单击按钮之前和之后检查了内存。它没有显着变化。如果我们想延迟加载资产，我还遇到了需要明确实施的策略。所以我得出结论，默认情况下，资产必须在初始加载时在浏览器中加载，然后再请求。如果我错了，请纠正我。
在您的示例中，如果您将该 JSON 导入到您的组件文件中，那么它当然不会延迟加载，因为导入语句在构建步骤中已解决。用具体的用例更新您的问题。但我几乎可以完全肯定地告诉你，你的理解是错误的。
感谢 Jota，这有助于澄清我的理解。我已经导入了文件。现在，我正在尝试通过单击我的 .ts 文件中的 URL 将 JSON 作为 HTTP 资源访问，并且单击按钮后，我可以看到 JSON 出现在开发工具的网络选项卡中。因此，我可以得出结论，JSON 是按需延迟加载的。

标签： json angular lazy-loading assets

【解决方案1】：

不必将所有静态内容放在应用模块的资产文件夹中。您可以在模块级别创建资产文件夹。以便在加载模块时加载这些内容。

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

在上述层次结构的情况下，如果 module_2 是延迟加载的，那么在加载模块时也会下载资产。

【讨论】：

谢谢 Yash。请看一下上面有问题的cmets。我想这里不需要任何特定的解决方案，因为角度仅加载所需的资产。其余所有资源都按需加载。这似乎是默认行为。