如何在Angular懒加载独立组件路由中实现服务延迟加载？

要让仅登录后使用的服务避免在初始登录页加载，你可以通过以下两种核心方式实现：

方法一：路由级别统一提供服务（推荐） #

这种方式会让服务和懒加载的授权路由块一起加载，适合所有授权路由共用的服务：

1. 修改服务的注入配置
   去掉服务的providedIn: 'root'，或者改为providedIn: 'any'（避免根注入器提前加载）：

   @Injectable() // 或 @Injectable({ providedIn: 'any' })
   export class DashboardService {
     // 服务逻辑
   }
   

2. 在授权路由中添加提供者
   调整app-authorized.routes.ts，给所有授权路由的父节点添加providers数组，把需要懒加载的服务都声明在这里：

   export const appAuthorizedRoutes: Array<Route> = [
     {
       path: '', // 作为授权路由的父容器
       providers: [DashboardService, SettingsService], // 所有登录后用到的服务
       children: [
         {
           path: 'dashboard',
           component: DashboardComponent,
           canActivate: [AuthGuard],
           title: 'Dashboard',
         },
         {
           path: 'settings',
           component: SettingsComponent,
           canActivate: [AuthGuard],
           title: 'Settings',
         },
         // 其他授权路由
       ]
     }
   ];
   

   当用户首次访问授权路由（如/dashboard）时，Angular会懒加载这个路由块，同时初始化这些服务，不会在登录页加载阶段引入。

方法二：组件内按需动态加载服务 #

适合仅单个组件使用的服务，在组件初始化时再加载服务：

1. 修改服务配置
   同样去掉providedIn: 'root'，改为providedIn: 'any'：

   @Injectable({ providedIn: 'any' })
   export class SettingsService {
     // 服务逻辑
   }
   

2. 在组件中动态导入并注入
   在需要使用服务的组件中，通过Injector动态获取服务：

   import { Injector, OnInit } from '@angular/core';
   
   export class SettingsComponent implements OnInit {
     private settingsService!: SettingsService;
   
     constructor(private injector: Injector) {}
   
     ngOnInit(): void {
       // 动态导入服务模块
       import('./settings.service').then(({ SettingsService }) => {
         this.settingsService = this.injector.get(SettingsService);
         // 后续调用服务方法
       });
     }
   }
   

关键原理说明 #

使用providedIn: 'root'时，Angular会将服务注册到根注入器，根注入器在应用启动时就会初始化，因此服务会被打包到初始加载块中。通过路由级提供者或动态导入，服务会延迟到授权路由加载/组件初始化时才被引入，实现按需加载。

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