Angular懒加载模块Tree-shaking疑问：providedIn:root服务未被摇树

核心原因：providedIn: 'root'的注册机制 #

当你给服务设置providedIn: 'root'时，这个服务会被注册到根注入器——根注入器是Angular应用启动时就会初始化的全局注入器。不管你的服务只在哪个懒加载模块中使用，Angular的依赖注入系统会在应用启动阶段就解析根注入器的所有依赖提供者，这意味着这些服务的代码会被标记为“被引用”，构建工具（如Webpack）不会将其视为死代码进行Tree-shake。

为何初始包会包含这些服务？ #

虽然懒加载模块的代码会被拆分到独立的chunk中，仅在路由触发时下载，但providedIn: 'root'的服务注册逻辑是嵌入在应用启动的初始化代码中的。Angular编译器会在主包的初始化逻辑中添加该服务的提供者注册代码，构建工具会将这部分代码纳入初始包，因为它属于应用启动的必要依赖。

如何让服务随懒加载模块打包？ #

如果希望服务仅在懒加载模块加载时才被引入并初始化，不要使用providedIn: 'root'，而是将providedIn设置为对应的懒加载模块：

@Injectable({
  providedIn: LazyLoadedModule // 替换为你的懒加载模块类
})
export class LazyOnlyService {}

这样服务会被注册到懒加载模块的注入器中，只会被打包进该模块对应的chunk，不会出现在初始包，且只有当模块被加载时才会初始化服务。

内容的提问来源于stack exchange，提问作者Iceneo