Angular 4.4.6中懒加载模块中的共享服务

Question

我已经在谷歌上搜了两个星期，但是没有找到合适的答案，所以我来这里问。

描述

工具: Angular 4.4.6和Angular-CLI 1.4.9

我正在开发一个相当简单的应用程序。它有AuthModule、AdminModule、LayoutModule和SharedModule。如果我将所有这些模块添加到AppModule中，一切都很正常，但是问题是当我将这些模块添加到AppModule时，我的vender.js大小就会超过600kb (--aot)。

模块的说明。

ShareModule: 包括一些对每个模块通用的模型和服务，例如HttpService。 AuthModule: 包含简单的登录和注册组件，使用了来自共享模块的HttpService

因此，我决定将它们全部作为带有路由的延迟加载模块，这在这里有描述。这样可以将vendor...js的大小减少约50%，但是依赖关系不能正常工作。

尽管我在LazyLoaded模块中引用了ShareModule，但仍然无法解决这个问题，依赖关系不起作用。我知道，每个延迟加载的模块都会创建自己的DI树，但它不能解决除在延迟加载模块内创建和提供的依赖项以外的其他依赖项。

正如我在工具部分中所说，我正在使用Angular-CLI，它具有检测是否有相似模块被多次用于某些组件的功能，如果是，则为该模块创建一个common...js。但问题仍然存在，我无法在延迟加载模块中访问共享服务。

是否有可能或者有谁能指点一下我如何在延迟加载模块中加载共享服务？

谢谢

- Riy

Answer 1

如果你想让懒加载模块的服务作为全局单例对象并且任何地方都可以使用，可以在 AppModule 中实现 forRoot 并导入 MyLazyModule.forRoot()。这样提供者将会被全局注册，而其余部分则是惰性加载。

更多详情请查看：https://angular.io/guide/ngmodule#configure-core-services-with-coremoduleforroot。

- Günter Zöchbauer

---

谢谢你指向链接，但是无论我将其导出为根模块还是导入共享模块都没有关系。因为所有的共享服务都在 SharedModule 中使用共享模型，所以当我尝试将服务导出到根模块时，它也会将所有模型都导出到根模块。 - Riy

Answer 2

我已经找到了解决方案。它在angular的文档中提到，但之前并没有引起我的注意。

不要在共享模块中指定应用程序范围的单例providers。导入该共享模块的惰性加载模块会创建自己的服务副本。

你需要做的是不要从共享模块提供任何服务。只需在惰性加载的模块中导入共享模块，并从该惰性加载的模块提供服务。

希望这能帮助其他人。

祝编码愉快。 :)

- Riy

---

采用这种方法，懒加载模块能够共享相同的服务吗？当尝试访问由另一个模块设置的服务的公共属性时，我在懒加载模块中收到未定义（undefined）的错误。 - bomaboom

这个解决方案是可行的，但问题在于当您将信息保存到此服务/提供程序中时。每次从一个组件切换到另一个组件时，即使两个组件都加载了该服务，您也会丢失信息。这对于一般功能来说是可以接受的，但不适用于存储数据。 - Dani

这是否意味着这是唯一的方法，并且我们需要改变保存信息的方式，使用其他方式，例如内部存储？ - Dani