延迟加载和组件

Question

我将应用程序转移到延迟加载状态，发现了两种加载组件的方式。

其中一个包含X个组件，而只有一个全局component.module（例如https://www.9lessons.info/2017/12/ionic-angular-lazy-loading-child-components.html），我们需要将其导入页面中。但是，如果我们只需要一个组件会发生什么？

那是我在@mhartington的回购中看到的另一种方式。我们可以像使用页面一样，每个组件再有一个.module： https://github.com/mhartington/lazyLoad2-components/blob/master/src/components/music-card/music-card.module.ts

第二种方法比第一种更好吗？ 如果我们使用延迟加载，将所有组件加载到一页上有什么意义？

Answer 1

我在下面写的是《 Angular风格指南》的简短摘录，它将帮助您确定哪种延迟加载策略。

在Angular中延迟加载模块的基本思想是仅在需要时才加载模块。实现它的理想方法是创建不同的模块。现在，您的Angular应用中通常会包含以下类型的模块：

1. App/Main/Root Module -这将是您的Angular应用的协调器。最初加载Angular App所需的所有模块都位于该模块中。
2. Shared Module -此模块将包含Angular App中其他模块将使用的所有组件/管道/指令等。
3. Core Module -此模块将包含所有一次性组件/管道/指令/服务等。此外，此模块应为imported only once，并且，在您的App / Main / Root模块中。
4. 实用程序模块-理想情况下，应该有一个针对您正在使用的任何特定第三方功能的模块。这有助于保持App / Main / Root模块的清洁。因此，理想情况下，例如，如果您使用Angular Material，则应为此创建一个模块，该模块将导入您将在Angular App中使用的所有组件的所有模块，然后从该模块中导出，这样任何想要使用Angular Material Components的模块都可以导入并使用它。
5. Feature Modules -理想情况下，这些模块应该是延迟加载的。理想情况下，应将Angular应用分解为逻辑上分离的功能，并且每个模块都应包含一个这样的逻辑上分离的feature。这样我们就可以延迟加载它们。

请牢记所有这些要点，您应该以这种方式分解Angular App，以便清楚地了解哪些模块是功能模块并可以延迟加载。